From 2899258744613d3543bb1929f760bad4f9c003b6 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 9 Sep 2021 13:15:06 +0100 Subject: [PATCH] Add prefers-color-scheme dark media query, reversed color vars --- src/styles/variables/colors.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index 09d04c1dd..84db3f316 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -9,6 +9,19 @@ $grey-700: #374151; $grey-800: #1F2937; $grey-900: #111827; +@media (prefers-color-scheme: dark) { + $grey-900: #F9FAFB; + $grey-800: #f3f4f6; + $grey-700: #E5E7EB; + $grey-600: #D1D5DB; + $grey-500: #9CA3AF; + $grey-400: #6B7280; + $grey-300: #4B5563; + $grey-200: #374151; + $grey-100: #1F2937; + $grey-50: #111827; +} + // Bulma defaults $grey-dark: $grey-800; $grey-darker: $grey-700; @@ -16,3 +29,4 @@ $grey: $grey-500; $grey-light: $grey-300; $grey-lighter: $grey-200; $grey-lightest: $grey-100; +