From 85d5a6dae0891ab4ecc46ae1d1aff563e660cbd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= Date: Wed, 11 Feb 2026 14:07:28 +0100 Subject: [PATCH 1/4] chore(docs): color-scheme behavior --- .../www/app/content/fundamentals/en/code/colors.mdx | 13 +++++++++++++ .../www/app/content/fundamentals/no/code/colors.mdx | 13 +++++++++++++ 2 files changed, 26 insertions(+) diff --git a/apps/www/app/content/fundamentals/en/code/colors.mdx b/apps/www/app/content/fundamentals/en/code/colors.mdx index 087c140a4f..f5218a5364 100644 --- a/apps/www/app/content/fundamentals/en/code/colors.mdx +++ b/apps/www/app/content/fundamentals/en/code/colors.mdx @@ -39,6 +39,19 @@ but with a dark footer. You can then set `data-color-scheme="dark"` on the foote `data-color-scheme` can be set to `light`, `dark`, or `auto`. `auto` will follow the user's system settings. +`color` and `background-color` are redeclared to default values on the element with `data-color-scheme`. This is necessary as the variables are not inherited past the point where they are redefined. + +```css +/*@digdir/designsystemet-css*/ +body, +[data-color-scheme] { + color: var(--ds-color-neutral-text-default); + background: var(--ds-color-neutral-background-default); +} +``` + +You can override this by setting custom values for `color` and `background-color` on the element. + ## `data-color` This data attribute is used to change the color of a component. You can use all colors that exist in your theme. diff --git a/apps/www/app/content/fundamentals/no/code/colors.mdx b/apps/www/app/content/fundamentals/no/code/colors.mdx index b98d72d97e..01a6e2968b 100644 --- a/apps/www/app/content/fundamentals/no/code/colors.mdx +++ b/apps/www/app/content/fundamentals/no/code/colors.mdx @@ -40,6 +40,19 @@ men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` `data-color-scheme` kan bli satt til `light`, `dark` eller `auto`. `auto` vil følgje systeminnstillingane til brukaren. +`color` og `background-color` blir redeklarert til standard verdiar på elementet med `data-color-scheme`. Dette er nødvendig fordi variablane ikkje blir arva forbi det punktet dei blir redefinert. + +```css +/*@digdir/designsystemet-css*/ +body, +[data-color-scheme] { + color: var(--ds-color-neutral-text-default); + background: var(--ds-color-neutral-background-default); +} +``` + +Du kan overstyra dette med å setje eigne verdiar for `color` og `background-color` på elementet. + ## `data-color` Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt. From 31efeef1968eb16bce4de1db3c4181b1bf058ec4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= Date: Wed, 11 Feb 2026 17:58:51 +0100 Subject: [PATCH 2/4] try to explain better --- apps/www/app/content/fundamentals/en/code/colors.mdx | 2 +- apps/www/app/content/fundamentals/no/code/colors.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/fundamentals/en/code/colors.mdx b/apps/www/app/content/fundamentals/en/code/colors.mdx index f5218a5364..310fb069df 100644 --- a/apps/www/app/content/fundamentals/en/code/colors.mdx +++ b/apps/www/app/content/fundamentals/en/code/colors.mdx @@ -39,7 +39,7 @@ but with a dark footer. You can then set `data-color-scheme="dark"` on the foote `data-color-scheme` can be set to `light`, `dark`, or `auto`. `auto` will follow the user's system settings. -`color` and `background-color` are redeclared to default values on the element with `data-color-scheme`. This is necessary as the variables are not inherited past the point where they are redefined. +`color` and `background-color` are redeclared to default values on the element with `data-color-scheme`. This is necessary to ensure good color contrast, as `color` is otherwise inherited. ```css /*@digdir/designsystemet-css*/ diff --git a/apps/www/app/content/fundamentals/no/code/colors.mdx b/apps/www/app/content/fundamentals/no/code/colors.mdx index 01a6e2968b..df7419e131 100644 --- a/apps/www/app/content/fundamentals/no/code/colors.mdx +++ b/apps/www/app/content/fundamentals/no/code/colors.mdx @@ -40,7 +40,7 @@ men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` `data-color-scheme` kan bli satt til `light`, `dark` eller `auto`. `auto` vil følgje systeminnstillingane til brukaren. -`color` og `background-color` blir redeklarert til standard verdiar på elementet med `data-color-scheme`. Dette er nødvendig fordi variablane ikkje blir arva forbi det punktet dei blir redefinert. +`color` og `background-color` blir redeklarert til standard verdiar på elementet med `data-color-scheme`. Dette er nødvendig for å garantera god fargekontrast, då `color` ellers arvar utanfrå. ```css /*@digdir/designsystemet-css*/ From 8eeb721b876771d133c0fdca6985019aa558e932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= Date: Fri, 13 Feb 2026 10:02:02 +0100 Subject: [PATCH 3/4] Update apps/www/app/content/fundamentals/en/code/colors.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/en/code/colors.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/en/code/colors.mdx b/apps/www/app/content/fundamentals/en/code/colors.mdx index 310fb069df..cce67224f8 100644 --- a/apps/www/app/content/fundamentals/en/code/colors.mdx +++ b/apps/www/app/content/fundamentals/en/code/colors.mdx @@ -50,7 +50,7 @@ body, } ``` -You can override this by setting custom values for `color` and `background-color` on the element. +You can override this by setting custom values for `color` and `background-color` on the element, or globally by matching our selector. ## `data-color` From fc8ef2d892cfb46ab0015cb20142be2392463628 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= Date: Fri, 13 Feb 2026 10:02:15 +0100 Subject: [PATCH 4/4] Update apps/www/app/content/fundamentals/no/code/colors.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/no/code/colors.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/colors.mdx b/apps/www/app/content/fundamentals/no/code/colors.mdx index df7419e131..4a796e9817 100644 --- a/apps/www/app/content/fundamentals/no/code/colors.mdx +++ b/apps/www/app/content/fundamentals/no/code/colors.mdx @@ -51,7 +51,7 @@ body, } ``` -Du kan overstyra dette med å setje eigne verdiar for `color` og `background-color` på elementet. +Du kan overstyra dette med å sette eigne verdiar for `color` og `background-color` på elementet, eller globalt ved å bruke samme selector som oss. ## `data-color`