feat: add dark-mode-class mixin

README.md

@@ -60,6 +60,7 @@ Visit <https://sass-butler.kasimir.dev> for full documentation.
   - [target-anchor-offset()](https://sass-butler.kasimir.dev/#basic-mixin-target-anchor-offset)
 - [@media](https://github.com/felix-berlin/sass-butler/blob/master/mixins/_breakpoint.scss)
   - [breakpoint()](https://sass-butler.kasimir.dev/#@media-mixin-breakpoint)
+  - [dark-mode-class()](https://sass-butler.kasimir.dev/#@media-mixin-dark-mode-class)
   - [feature()](https://sass-butler.kasimir.dev/#@media-mixin-feature)
   - [hover](https://sass-butler.kasimir.dev/#@media-mixin-hover)
 - [element](https://github.com/felix-berlin/sass-butler/blob/master/mixins/_element.scss)

mixins.scss

@@ -1,5 +1,6 @@
 @forward './mixins/basic';
 @forward './mixins/breakpoint';
+@forward './mixins/dark-mode-class';
 @forward './mixins/element';
 @forward './mixins/feature';
 @forward './mixins/font';

mixins/_dark-mode-class.scss

@@ -0,0 +1,24 @@
+/// Use a predefined dark mode class to define dark mode styles.
+/// @param {String} $element ['html']
+/// @param {String} $class ['dark']
+/// @group @media
+/// @author Felix Scholze
+/// @since v1.10.0
+///
+/// @example
+///    .button {
+///      @include dark-mode-class('body', 'dark-mode') {
+///        color: #fff;
+///      }
+///    }
+///
+/// @example CSS - Output CSS
+///    body[class=dark-mode] .button {
+///      color: #fff;
+///    }
+///
+@mixin dark-mode-class($element: 'html', $class: 'dark') {
+	#{$element}[class='#{$class}'] & {
+		@content;
+	}
+}