diff --git a/apps/www/app/content/fundamentals/en/code/colors.mdx b/apps/www/app/content/fundamentals/en/code/colors.mdx index 087c140a4f..cce67224f8 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 to ensure good color contrast, as `color` is otherwise inherited. + +```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, or globally by matching our selector. + ## `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..4a796e9817 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 for å garantera god fargekontrast, då `color` ellers arvar utanfrå. + +```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 å sette eigne verdiar for `color` og `background-color` på elementet, eller globalt ved å bruke samme selector som oss. + ## `data-color` Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt.