diff --git a/source/_meta/_head.hbs b/source/_meta/_head.hbs
index e41f8e2da0..ac190604ed 100644
--- a/source/_meta/_head.hbs
+++ b/source/_meta/_head.hbs
@@ -13,6 +13,9 @@
{{! }}
{{! }}
+
+
+
diff --git a/source/_patterns/00-base/_init.global.scss b/source/_patterns/00-base/_init.global.scss
index cd9db54f00..f2f7640b55 100644
--- 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,7 +42,7 @@ pre {
}
body {
- color: $db-color-cool-gray-700;
+ color: var(--db-text---color);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
@@ -48,14 +50,17 @@ body {
// Inline
a {
- color: $db-color-cool-gray-700;
+ color: var(--db-text---color);
strong {
color: currentColor;
}
&:hover {
- color: #5d616a; // TODO: Identify correct color variable
+ --db-text---color: #5d616a; // TODO: Identify correct color variable
+ @media (prefers-color-scheme: dark) {
+ --db-text---color: #cdd4da; // TODO: Identify correct color variable
+ }
}
}
diff --git a/source/_patterns/00-base/_init.scss b/source/_patterns/00-base/_init.scss
index 269f2ccf6e..3fa182eae6 100644
--- 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/00-base/icons/_icons.demonstration.scss b/source/_patterns/00-base/icons/_icons.demonstration.scss
index 695ba27fd3..4b120976bf 100644
--- a/source/_patterns/00-base/icons/_icons.demonstration.scss
+++ b/source/_patterns/00-base/icons/_icons.demonstration.scss
@@ -23,6 +23,12 @@
margin: to-rem($pxValue: 4);
padding: to-rem($pxValue: 32);
+ &.DO-NOT-COPY-THIS-CLASS-example-bg-variants-regular {
+ @media (prefers-color-scheme: dark) {
+ --db-icon-color: #fff;
+ }
+ }
+
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-turquoise {
background-color: $db-color-turquoise-400;
}
diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss
index d88bff7d20..9ee1651b72 100644
--- a/source/_patterns/01-elements/_form-elements.scss
+++ b/source/_patterns/01-elements/_form-elements.scss
@@ -22,7 +22,9 @@
caret-color: $db-color-red-500;
- color: $form-elements-color;
+ @media (prefers-color-scheme: light) {
+ color: $form-elements-color;
+ }
// Description styles
& ~ .description {
@@ -75,7 +77,9 @@
// Outline
%form-element-outline {
- --formElement---borderColor: #{$form-elements-outline-border-color};
+ @media (prefers-color-scheme: light) {
+ --formElement---borderColor: #{$form-elements-outline-border-color};
+ }
background-color: transparent;
border-bottom: $form-elements---borderBottom;
border-left: $form-elements---borderLeft;
diff --git a/source/_patterns/01-elements/_form-elements.variables.scss b/source/_patterns/01-elements/_form-elements.variables.scss
index 1859f4293b..a2cbe9eaa2 100644
--- a/source/_patterns/01-elements/_form-elements.variables.scss
+++ b/source/_patterns/01-elements/_form-elements.variables.scss
@@ -8,13 +8,15 @@ $form-elements---borderLeft: 1px solid var(--formElement---borderLeftColor) !def
// ### Style variations ###
// Semitransparent
-$form-elements-semitransparent-background-color: rgba(
- $db-color-cool-gray-700,
- 0.05
+$form-elements-semitransparent-background-color: color-mix(
+ in srgb,
+ transparent 95%,
+ currentColor
) !default;
-$form-elements-semitransparent-border-bottom-color: rgba(
- $db-color-cool-gray-700,
- 0.5
+$form-elements-semitransparent-border-bottom-color: color-mix(
+ in srgb,
+ transparent 50%,
+ currentColor
) !default;
// White
@@ -25,14 +27,19 @@ $form-elements-white-border-bottom-color: rgba(
) !default;
// Solid
-$form-elements-solid-background-color: $db-color-cool-gray-100 !default;
+$form-elements-solid-background-color: color-mix(
+ in srgb,
+ transparent 95%,
+ currentColor
+) !default;
$form-elements-solid-border-bottom-color: rgba(
$db-color-cool-gray-700,
0.5
) !default;
// Outline
-$form-elements-outline-border-color: rgba(
- $db-color-cool-gray-700,
- 0.25
+$form-elements-outline-border-color: color-mix(
+ in srgb,
+ transparent 75%,
+ currentColor
) !default;
diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss
index 42f833cdf6..fb51b41c6c 100644
--- a/source/_patterns/01-elements/buttons/button.scss
+++ b/source/_patterns/01-elements/buttons/button.scss
@@ -86,22 +86,32 @@
// TODO: This might get replaced by another effect
backdrop-filter: blur(4px);
background-color: transparent;
- border-color: $db-color-cool-gray-700;
- color: $db-color-cool-gray-700;
+ border-color: currentColor;
+ @media (prefers-color-scheme: light) {
+ color: $db-color-cool-gray-700;
+ }
&:disabled {
- color: unquote($db-color-cool-gray-700 + "80");
- border-color: unquote($db-color-cool-gray-700 + "40");
+ @media (prefers-color-scheme: light) {
+ color: unquote($db-color-cool-gray-700 + "80");
+ border-color: unquote($db-color-cool-gray-700 + "40");
+ }
}
&:not(:disabled) {
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
background-color: $button-secondaryOutline-hover-backgroundColor;
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.03);
+ }
}
&:active {
background-color: $button-secondaryOutline-active-backgroundColor;
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.06);
+ }
}
}
}
@@ -132,7 +142,9 @@
&%variant-tertiaryPlain {
background-color: transparent; // shame.css
border: 2px solid transparent;
- color: $db-color-cool-gray-700;
+ @media (prefers-color-scheme: light) {
+ color: $db-color-cool-gray-700;
+ }
&:disabled {
color: unquote($db-color-cool-gray-700 + "80");
@@ -142,10 +154,16 @@
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
background-color: $button-secondaryOutline-hover-backgroundColor;
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.03);
+ }
}
&:active {
background-color: $button-secondaryOutline-active-backgroundColor;
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.06);
+ }
}
}
}
@@ -214,6 +232,8 @@
}
&:disabled {
- color: unquote($button---color + "80");
+ @media (prefers-color-scheme: light) {
+ color: unquote($button---color + "80");
+ }
}
}
diff --git a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
index 8f93fe9c52..07baf730a7 100644
--- a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
+++ b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
@@ -3,7 +3,7 @@
@import "../../00-base/colors/colors.variables";
$checkbox---backgroundColor: rgba(255, 255, 255, 0.1) !default;
-$checkbox---borderColor: $db-color-cool-gray-700 !default;
+$checkbox---borderColor: currentColor !default;
$checkbox---color: $db-color-cool-gray-700 !default;
$checkbox--checked-backgroundColor: $db-color-cool-gray-700 !default;
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 4751e36bba..c3d9626dd2 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -8,10 +8,14 @@
align-content: center;
appearance: none;
- background-color: $checkbox---backgroundColor;
+ @media (prefers-color-scheme: light) {
+ background-color: $checkbox---backgroundColor;
+ }
border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
border-radius: 4px;
- color: $checkbox---color;
+ @media (prefers-color-scheme: light) {
+ color: $checkbox---color;
+ }
display: inline-flex;
height: to-rem($pxValue: 24);
@@ -24,14 +28,19 @@
&::before {
--icon-font-size: 1.375rem;
+ color: inherit;
margin-right: 0;
}
&:checked {
background-color: $checkbox--checked-backgroundColor;
+ color: $checkbox--checked-color;
+ @media (prefers-color-scheme: dark) {
+ color: $checkbox---color;
+ background-color: $db-color-white;
+ }
&::before {
- color: $checkbox--checked-color;
content: glyph(done);
}
}
@@ -39,6 +48,9 @@
&:enabled {
&:hover {
background-color: rgba(40, 45, 55, 0.14);
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.03);
+ }
&:checked {
background-color: $checkbox-hover-checked-backgroundColor;
@@ -47,6 +59,9 @@
&:active {
background-color: rgba(40, 45, 55, 0.14);
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.06);
+ }
}
}
diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss
index 341f670010..ea070a7188 100644
--- a/source/_patterns/01-elements/input/input.scss
+++ b/source/_patterns/01-elements/input/input.scss
@@ -6,7 +6,9 @@
.elm-input {
@extend %form-element;
- color: $input---color;
+ @media (prefers-color-scheme: light) {
+ color: $input---color;
+ }
font-size: to-rem($pxValue: 16);
height: to-rem($pxValue: 44);
diff --git a/source/_patterns/01-elements/radio/_radio.variables.scss b/source/_patterns/01-elements/radio/_radio.variables.scss
index 9d624928e8..ef128bf04a 100644
--- a/source/_patterns/01-elements/radio/_radio.variables.scss
+++ b/source/_patterns/01-elements/radio/_radio.variables.scss
@@ -1,3 +1,3 @@
@import "../../../css/helpers/functions";
-$radio---border: $db-color-cool-gray-700 !default;
+$radio---border: currentColor !default;
diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss
index 0a9cdcc7da..f0f9641b6b 100644
--- a/source/_patterns/01-elements/radio/radio.scss
+++ b/source/_patterns/01-elements/radio/radio.scss
@@ -5,7 +5,9 @@
.elm-radio {
appearance: none;
- background-color: rgba(255, 255, 255, 0.1);
+ @media (prefers-color-scheme: light) {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
border: to-rem($pxValue: 1) solid $radio---border;
border-radius: to-em($pxValue: 16);
@@ -27,11 +29,17 @@
&:hover {
&:not(:checked) {
background-color: rgba(40, 45, 55, 0.14);
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.03);
+ }
}
}
&:active {
background-color: rgba(40, 45, 55, 0.3);
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(255, 255, 255, 0.06);
+ }
}
}
diff --git a/source/_patterns/02-components/breadcrumb/breadcrumb.scss b/source/_patterns/02-components/breadcrumb/breadcrumb.scss
index 50e8b8a6d5..a554a0b498 100644
--- a/source/_patterns/02-components/breadcrumb/breadcrumb.scss
+++ b/source/_patterns/02-components/breadcrumb/breadcrumb.scss
@@ -2,7 +2,9 @@
@import "breadcrumb.variables";
.cmp-breadcrumb {
- color: $db-color-cool-gray-500;
+ @media (prefers-color-scheme: light) {
+ color: $db-color-cool-gray-500;
+ }
font-size: to-rem($pxValue: 12);
a {
diff --git a/source/_patterns/02-components/cards/card.scss b/source/_patterns/02-components/cards/card.scss
index e5600ff9a9..a37d0bb856 100644
--- a/source/_patterns/02-components/cards/card.scss
+++ b/source/_patterns/02-components/cards/card.scss
@@ -3,6 +3,9 @@
.cmp-card {
background-color: #fff;
+ @media (prefers-color-scheme: dark) {
+ background-color: color-mix(in srgb, transparent 95%, currentColor);
+ }
border-radius: 8px;
box-shadow: $box-shadow-01, $box-shadow-02;
diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss
index 01cb407cc2..6bd65026e6 100644
--- a/source/_patterns/02-components/dialog/dialog.scss
+++ b/source/_patterns/02-components/dialog/dialog.scss
@@ -5,7 +5,9 @@
border: 0;
border-radius: 8px;
- color: $db-color-cool-gray-700;
+ color: var(--db-element---color);
+
+ background-color: var(--db-element---backgroundColor);
font-size: to-rem($pxValue: 14);
margin-top: 0;
@@ -43,7 +45,9 @@
}
header {
- color: $db-color-cool-gray-800;
+ @media (prefers-color-scheme: light) {
+ color: $db-color-cool-gray-800;
+ }
transform: translateY(-#{to-rem($pxValue: 9)});
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
index baf7c4033c..09310b6b77 100644
--- 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
index f4bd1d89aa..a9168870ef 100644
--- 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/02-components/notifications/notification.scss b/source/_patterns/02-components/notifications/notification.scss
index 66d8aacd14..4cdf60e92c 100644
--- a/source/_patterns/02-components/notifications/notification.scss
+++ b/source/_patterns/02-components/notifications/notification.scss
@@ -10,7 +10,7 @@
margin-bottom: #{to-rem($pxValue: 16)};
padding: #{to-rem($pxValue: 16)}; // TODO: replace by spacing-m variable
section[data-variant="hovering"] & {
- background-color: #fff;
+ background-color: var(--db-element---backgroundColor);
}
// Alert variant
diff --git a/source/_patterns/02-components/overflow-menu/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
index 4ad5cf4665..4888444f6c 100644
--- a/source/_patterns/02-components/overflow-menu/overflow-menu.scss
+++ b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
@@ -2,7 +2,9 @@
@import "overflow-menu.variables";
.cmp-overflow-menu {
- color: #2d333f; // TODO: replace by correct color
+ @media (prefers-color-scheme: light) {
+ color: #2d333f; // TODO: replace by correct color
+ }
display: inline-block;
position: relative;
@@ -31,7 +33,9 @@
&:hover,
&:focus {
&::before {
- background-color: $db-color-cool-gray-200;
+ @media (prefers-color-scheme: light) {
+ background-color: $db-color-cool-gray-200;
+ }
}
}
diff --git a/source/_patterns/02-components/pagination/pagination.scss b/source/_patterns/02-components/pagination/pagination.scss
index 2a7447e0b0..e70304ede1 100644
--- a/source/_patterns/02-components/pagination/pagination.scss
+++ b/source/_patterns/02-components/pagination/pagination.scss
@@ -2,7 +2,7 @@
@import "pagination.variables";
.cmp-pagination {
- color: $db-color-cool-gray-700;
+ color: var(--db-element---color);
font-size: to-rem($pxValue: 14);
user-select: none;
diff --git a/source/_patterns/02-components/table/_table.variables.scss b/source/_patterns/02-components/table/_table.variables.scss
index db7f28d9e7..21691eb912 100644
--- a/source/_patterns/02-components/table/_table.variables.scss
+++ b/source/_patterns/02-components/table/_table.variables.scss
@@ -12,7 +12,7 @@ $table-cell-height68-paddingVertical: to-rem(
$table-line--borderColor: $db-color-cool-gray-200 !default;
-$table-row-zebra-color: rgba($db-color-cool-gray-700, 0.07) !default;
+$table-row-zebra-color: color-mix(in srgb, transparent 93%, currentColor);
$table-densitySmall--padding: $db-spacing-s !default;
$table-densityRegular--padding: $db-spacing-sm !default;
diff --git a/source/_patterns/02-components/table/table.scss b/source/_patterns/02-components/table/table.scss
index 82af0d957f..73bff27289 100644
--- a/source/_patterns/02-components/table/table.scss
+++ b/source/_patterns/02-components/table/table.scss
@@ -22,11 +22,13 @@
}
thead {
- border-bottom: to-rem($pxValue: 1) solid $db-color-cool-gray-700;
- border-top: to-rem($pxValue: 1) solid $db-color-cool-gray-700;
+ border-bottom: to-rem($pxValue: 1) solid currentColor;
+ border-top: to-rem($pxValue: 1) solid currentColor;
th {
- color: $db-color-cool-gray-500;
+ @media (prefers-color-scheme: light) {
+ color: $db-color-cool-gray-500;
+ }
}
}
@@ -52,10 +54,10 @@
}
tbody {
- border-bottom: to-rem($pxValue: 1) solid $db-color-cool-gray-700;
+ border-bottom: to-rem($pxValue: 1) solid currentColor;
th:first-child {
- border-right: 1px solid $db-color-warm-gray-700;
+ border-right: 1px solid currentColor;
}
}
@@ -166,7 +168,7 @@
&[data-sticky="header"] {
thead,
tbody th {
- background-color: #fff;
+ background-color: var(--db-element---backgroundColor);
position: sticky;
top: -1px;
}
diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss
index 3bbf37fb89..21fd7199a8 100644
--- 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
index 94bcb774d4..2733f1ebc7 100644
--- 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)};
diff --git a/source/css/pattern-scaffolding-project-specific.scss b/source/css/pattern-scaffolding-project-specific.scss
index 598ac9ae0a..c719b36724 100644
--- a/source/css/pattern-scaffolding-project-specific.scss
+++ b/source/css/pattern-scaffolding-project-specific.scss
@@ -35,6 +35,13 @@ pl-iframe {
// Splitted Intro Page
&:nth-of-type(2) {
background-color: $db-color-cool-gray-100;
+ @media (prefers-color-scheme: dark) {
+ background-color: color-mix(
+ in srgb,
+ transparent 95%,
+ currentColor
+ );
+ }
padding-bottom: 2.5rem;
}
}
diff --git a/tests/backstop.json b/tests/backstop.json
index ecc5e615e6..e77c092f5f 100644
--- a/tests/backstop.json
+++ b/tests/backstop.json
@@ -3,26 +3,61 @@
"viewports": [
{
"label": "phone - portrait",
+ "emulateDark": false,
"width": 320,
"height": 480
},
{
"label": "phone - landscape",
+ "emulateDark": false,
"width": 480,
"height": 320
},
{
"label": "tablet - portrait",
+ "emulateDark": false,
"width": 1024,
"height": 768
},
{
"label": "tablet - landscape",
+ "emulateDark": false,
"width": 768,
"height": 1024
},
{
"label": "13 Zoll Macbook",
+ "emulateDark": false,
+ "width": 1440,
+ "height": 900
+ },
+ {
+ "label": "phone - portrait",
+ "emulateDark": true,
+ "width": 320,
+ "height": 480
+ },
+ {
+ "label": "phone - landscape",
+ "emulateDark": true,
+ "width": 480,
+ "height": 320
+ },
+ {
+ "label": "tablet - portrait",
+ "emulateDark": true,
+ "width": 1024,
+ "height": 768
+ },
+ {
+ "label": "tablet - landscape",
+ "emulateDark": true,
+ "width": 768,
+ "height": 1024
+ },
+ {
+ "label": "13 Zoll Macbook",
+ "emulateDark": true,
"width": 1440,
"height": 900
}