feat: provide initial stack of declarations for dark mode #507

db-ui · Jul 11, 2023 · 451f669 · 451f669
1 parent b029e0a
commit 451f669
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 9 deletions.
diff --git a/source/_patterns/00-base/_init.global.scss b/source/_patterns/00-base/_init.global.scss
@@ -12,7 +12,9 @@ body {
 
 // adapted from https://github.com/jgthms/bulma/blob/0.7.5/sass/base/generic.sass
 html {
-	background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
+	background-color: var(
+		--db-element---backgroundColor
+	); // TODO: This would need to get replaced by the correct (semantic) color
 	// font-size: 16px; // We need to deactivate this due to accessibility problems, as even also reported with https://github.com/jgthms/bulma/issues/3588
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
@@ -40,22 +42,25 @@ pre {
 }
 
 body {
-	color: $db-color-cool-gray-700;
+	color: var(--db-text---color);
 	font-size: 1rem;
 	font-weight: 400;
 	line-height: 1.5;
 }
 
 // Inline
 a {
-	color: $db-color-cool-gray-700;
+	color: var(--db-text---color);
 
 	strong {
 		color: currentColor;
 	}
 
 	&:hover {
 		color: #5d616a; // TODO: Identify correct color variable
+		@media (prefers-color-scheme: dark) {
+			color: #cdd4da; // TODO: Identify correct color variable
+		}
 	}
 }
 

diff --git a/source/_patterns/00-base/_init.scss b/source/_patterns/00-base/_init.scss
@@ -1,3 +1,13 @@
+:root {
+	--db-text---color: #{$db-color-cool-gray-700};
+	--db-element---backgroundColor: #fdfdfd; // We need to figure out the correct variable for this
+
+	@media (prefers-color-scheme: dark) {
+		--db-text---color: #{$db-color-white};
+		--db-element---backgroundColor: #{$db-color-cool-gray-700};
+	}
+}
+
 // Box sizing
 html {
 	box-sizing: var(--db-box-sizing, border-box);

diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -22,7 +22,7 @@
 	}
 
 	li {
-		background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
+		background-color: var(--db-element---backgroundColor);
 
 		position: absolute;
 

diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
@@ -41,7 +41,7 @@
 		@include icon(glyph(menu), 24, "outline", $partial: $partial);
 		@include icon(glyph(close), 24, "outline", "after", $partial: $partial);
 
-		background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
+		background-color: var(--db-element---backgroundColor);
 
 		border-bottom: 1px solid $db-color-warm-gray-100;
 
@@ -84,7 +84,7 @@
 	}
 
 	ul {
-		background-color: $header---backgroundColor;
+		background-color: var(--db-element---backgroundColor);
 	}
 
 	// Multiple level navigation

diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss
@@ -3,7 +3,7 @@
 @import "../../../css/helpers/functions";
 
 .rea-header {
-	background-color: $header---backgroundColor;
+	background-color: var(--db-element---backgroundColor);
 	box-shadow: $header---boxShadow;
 	display: flex;
 	justify-content: space-between;

diff --git a/source/_patterns/03-areas/03-footer/footer.scss b/source/_patterns/03-areas/03-footer/footer.scss
@@ -7,10 +7,13 @@
 .rea-footer {
 	@include clearfix($partial: $partial);
 
-	background-color: $footer---backgroundColor;
+	background-color: var(--db-background---color);
 	box-shadow: $footer---boxShadow;
 
-	color: $db-color-cool-gray-500;
+	color: var(--db-text---color);
+	@media (prefers-color-scheme: light) {
+		--db-text---color: #{$db-color-cool-gray-500};
+	}
 	margin-top: $footer---marginTop;
 	padding: #{to-rem($pxValue: 21)} #{to-rem($pxValue: 16)};