From 2d2f5b3dfd901bca22133ae25fdcce7afb4042c7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Jan 2021 21:02:26 -0800 Subject: Add color-scheme mixin --- scss/_mixins.scss | 1 + scss/mixins/_color-scheme.scss | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 scss/mixins/_color-scheme.scss (limited to 'scss') diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 7b06cd819..eec085789 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -10,6 +10,7 @@ // Helpers @import "mixins/breakpoints"; +@import "mixins/color-scheme"; @import "mixins/image"; @import "mixins/resize"; @import "mixins/visually-hidden"; diff --git a/scss/mixins/_color-scheme.scss b/scss/mixins/_color-scheme.scss new file mode 100644 index 000000000..303fed72d --- /dev/null +++ b/scss/mixins/_color-scheme.scss @@ -0,0 +1,17 @@ +// scss-docs-start mixin-color-scheme +@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; + } + } +} +// scss-docs-end mixin-color-scheme -- cgit v1.2.3