diff --git a/less/_components/quicksilver/dark-theme.less b/less/_components/quicksilver/dark-theme.less new file mode 100644 index 00000000..7a2f928d --- /dev/null +++ b/less/_components/quicksilver/dark-theme.less @@ -0,0 +1,12 @@ +@media (prefers-color-scheme: dark) { + body, footer{ + background-color: @body-dark-theme; + color: @text-dark-theme; + } + + main a{ + color: @brand-primary; + } +} + + diff --git a/less/quicksilver/_variables.less b/less/quicksilver/_variables.less index dce3a05b..00d3aed9 100644 --- a/less/quicksilver/_variables.less +++ b/less/quicksilver/_variables.less @@ -17,6 +17,7 @@ //== Background color for ``. @body-bg: #f9f9f9; +@body-dark-theme:#020202; //== Colors @@ -84,6 +85,7 @@ //== Text color @text-color:#4c4d4e; @hr-border:@gray-mid-light; +@text-dark-theme:#fbfbfb; //== Input @input-border-radius:0; diff --git a/less/quicksilver/styles.less b/less/quicksilver/styles.less index ca55ee06..a3a7aadf 100644 --- a/less/quicksilver/styles.less +++ b/less/quicksilver/styles.less @@ -44,6 +44,7 @@ @import '../_components/quicksilver/project-list.less'; @import '../_components/quicksilver/featured-testimonials.less'; @import '../_components/quicksilver/content-nav-tab.less'; +@import '../_components/quicksilver/dark-theme.less'; @import '../_components/_mixin.less'; @import '../_components/ads.less';