Skip to content

Instantly share code, notes, and snippets.

@mdo
Last active Jan 12, 2021
Embed
What would you like to do?
Generated by SassMeister.com.
@mixin color-scheme($name) {
@if $name == dark {
@media (prefers-color-scheme: dark) {
@content;
}
} @else if $name == light {
@media (prefers-color-scheme: light) {
@content;
}
} @else {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
}
.test {
@include color-scheme(dark) {
display: block;
}
}
.test {
@include color-scheme(light) {
display: block;
}
}
.test {
@include color-scheme(custom) {
display: block;
}
}
@media (prefers-color-scheme: dark) {
.test {
display: block;
}
}
@media (prefers-color-scheme: light) {
.test {
display: block;
}
}
@media (prefers-color-scheme: custom) {
.test {
display: block;
}
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment