Skip to content

Commit

Permalink
Update scss theme.theme mixin, to allow to style body tag
Browse files Browse the repository at this point in the history
  • Loading branch information
danon committed Dec 5, 2024
1 parent 35ddae7 commit bcb2561
Showing 1 changed file with 10 additions and 18 deletions.
28 changes: 10 additions & 18 deletions resources/feature/theme/theme.scss
Original file line number Diff line number Diff line change
@@ -1,39 +1,31 @@
@mixin light {
@include scope(theme-light) {
@content;
}
@include scope(theme-light) {@content}
}

@mixin dark {
@include scope(theme-dark) {
@content;
}
@include scope(theme-dark) {@content}
}

@mixin scope($class) {
@if & {
html.#{$class} & {
@content;
}
html.#{$class} & {@content}
} @else {
body.#{$class} {
@content;
}
html.#{$class} {@content}
}
}

@mixin theme {
/**
* The dark() and light() mixins increase selector specificity.
* In some cases, it's necessary to apply a common style to both
* themes, overriding a previously defined style.
* Thus, we need to artificially elevate the specificity
* themes, overriding a previously defined style.
* For that we need to artificially elevate the specificity
* of the style, without actually changing any style.
*/
html.theme-light &,
html.theme-dark &,
{
@content;
@if & {
html.theme-light &, html.theme-dark & {@content}
} @else {
html.theme-light, html.theme-dark {@content}
}
}
Expand Down

0 comments on commit bcb2561

Please sign in to comment.