@dnb/eufemia/style/themes/ui/ui-theme-dark-mode.css

DNB Eufemia Design System UI Library

@charset "UTF-8";
/**
 * DNB Eufemia UI Theme – Dark Mode
 *
 * Import this file to enable dark mode token overrides for the UI theme.
 * Use with the Theme component's colorScheme="dark" or colorScheme="auto".
 */
/* This file is auto generated by makePropertiesFile.ts */
.eufemia-theme__color-scheme--dark {
  --token-color-background-page-background: var(--dnb-greyscale-1000);
  --token-color-background-action: var(--dnb-coldgreen-300);
  --token-color-background-action-hover: var(--dnb-coldgreen-300);
  --token-color-background-action-hover-subtle: var(--dnb-coldgreen-900);
  --token-color-background-action-pressed: var(--dnb-coldgreen-400);
  --token-color-background-action-pressed-subtle: var(--dnb-coldgreen-700);
  --token-color-background-action-focus: var(--dnb-blue-600);
  --token-color-background-action-focus-subtle: var(--dnb-blue-100);
  --token-color-background-action-disabled: var(--dnb-greyscale-700);
  --token-color-background-action-inverse: var(--dnb-coldgreen-600);
  --token-color-background-action-hover-inverse: var(--dnb-coldgreen-600);
  --token-color-background-action-hover-subtle-inverse: var(
    --dnb-coldgreen-100
  );
  --token-color-background-action-pressed-subtle-inverse: var(
    --dnb-coldgreen-200
  );
  --token-color-background-action-ondark: var(--dnb-coldgreen-300);
  --token-color-background-action-hover-ondark: var(--dnb-coldgreen-300);
  --token-color-background-action-hover-subtle-ondark: var(
    --dnb-coldgreen-800
  );
  --token-color-background-action-pressed-ondark: var(--dnb-coldgreen-400);
  --token-color-background-action-pressed-subtle-ondark: var(
    --dnb-coldgreen-700
  );
  --token-color-background-action-disabled-ondark: var(
    --dnb-greyscale-700
  );
  --token-color-background-action-alternative: var(--dnb-greyscale-500);
  --token-color-background-action-alternative-hover-subtle: var(
    --dnb-greyscale-700
  );
  --token-color-background-selected: var(--dnb-warmgreen-100);
  --token-color-background-selected-subtle: var(--dnb-green-900);
  --token-color-background-selected-ondark: var(--dnb-coldgreen-100);
  --token-color-background-selected-subtle-ondark: var(--dnb-green-900);
  --token-color-background-neutral: var(--dnb-greyscale-950);
  --token-color-background-neutral-static: var(--dnb-greyscale-0);
  --token-color-background-neutral-subtle: var(--dnb-greyscale-800);
  --token-color-background-neutral-base: var(--dnb-greyscale-800);
  --token-color-background-neutral-bold: var(--dnb-greyscale-700);
  --token-color-background-neutral-alternative: var(--dnb-greyscale-800);
  --token-color-background-info: var(--dnb-coldgreen-300);
  --token-color-background-info-subtle: var(--dnb-green-950);
  --token-color-background-positive: var(--dnb-green-500);
  --token-color-background-positive-subtle: var(--dnb-green-950);
  --token-color-background-warning: var(--dnb-yellow-500);
  --token-color-background-warning-subtle: var(--dnb-yellow-950);
  --token-color-background-error: var(--dnb-red-600);
  --token-color-background-error-subtle: var(--dnb-red-950);
  --token-color-background-marketing: var(--dnb-greyscale-50);
  --token-color-background-marketing-subtle: var(--dnb-greyscale-700);
  --token-color-text-action: var(--dnb-coldgreen-300);
  --token-color-text-action-hover: var(--dnb-coldgreen-300);
  --token-color-text-action-pressed: var(--dnb-coldgreen-400);
  --token-color-text-action-focus: var(--dnb-blue-600);
  --token-color-text-action-disabled: var(--dnb-greyscale-600);
  --token-color-text-action-inverse: var(--dnb-coldgreen-600);
  --token-color-text-action-hover-inverse: var(--dnb-coldgreen-600);
  --token-color-text-action-pressed-inverse: var(--dnb-coldgreen-700);
  --token-color-text-selected: var(--dnb-warmgreen-100);
  --token-color-text-action-ondark: var(--dnb-coldgreen-300);
  --token-color-text-action-hover-ondark: var(--dnb-coldgreen-300);
  --token-color-text-action-pressed-ondark: var(--dnb-coldgreen-400);
  --token-color-text-action-disabled-ondark: var(--dnb-greyscale-400);
  --token-color-text-action-alternative-ondark: var(--dnb-greyscale-0);
  --token-color-text-neutral: var(--dnb-greyscale-0);
  --token-color-text-neutral-onlight: var(--dnb-greyscale-800);
  --token-color-text-neutral-alternative: var(--dnb-greyscale-400);
  --token-color-text-neutral-inverse: var(--dnb-greyscale-800);
  --token-color-text-neutral-ondark: var(--dnb-greyscale-0);
  --token-color-text-neutral-subtle: var(--dnb-greyscale-600);
  --token-color-text-neutral-subtle-ondark: var(--dnb-greyscale-200);
  --token-color-text-destructive: var(--dnb-orange-600);
  --token-color-text-destructive-inverse: var(--dnb-red-600);
  --token-color-text-warning: var(--dnb-yellow-500);
  --token-color-text-warning-inverse: var(--dnb-yellow-800);
  --token-color-text-positive: var(--dnb-green-600);
  --token-color-text-positive-inverse: var(--dnb-green-700);
  --token-color-icon-action: var(--dnb-coldgreen-300);
  --token-color-icon-action-hover: var(--dnb-coldgreen-300);
  --token-color-icon-action-pressed: var(--dnb-coldgreen-400);
  --token-color-icon-action-focus: var(--dnb-blue-600);
  --token-color-icon-action-disabled: var(--dnb-greyscale-600);
  --token-color-icon-action-inverse: var(--dnb-coldgreen-600);
  --token-color-icon-action-hover-inverse: var(--dnb-coldgreen-600);
  --token-color-icon-action-pressed-inverse: var(--dnb-coldgreen-700);
  --token-color-icon-selected: var(--dnb-coldgreen-100);
  --token-color-icon-selected-ondark: var(--dnb-coldgreen-100);
  --token-color-icon-action-ondark: var(--dnb-coldgreen-300);
  --token-color-icon-action-alternative-ondark: var(--dnb-greyscale-0);
  --token-color-icon-action-hover-ondark: var(--dnb-coldgreen-300);
  --token-color-icon-action-pressed-ondark: var(--dnb-coldgreen-400);
  --token-color-icon-action-disabled-ondark: var(--dnb-greyscale-400);
  --token-color-icon-neutral: var(--dnb-greyscale-0);
  --token-color-icon-neutral-static: var(--dnb-greyscale-800);
  --token-color-icon-neutral-inverse: var(--dnb-greyscale-800);
  --token-color-icon-neutral-ondark: var(--dnb-greyscale-0);
  --token-color-icon-neutral-alternative: var(--dnb-greyscale-400);
  --token-color-icon-destructive: var(--dnb-orange-600);
  --token-color-icon-info: var(--dnb-coldgreen-300);
  --token-color-icon-info-subtle: var(--dnb-green-950);
  --token-color-icon-positive: var(--dnb-green-500);
  --token-color-icon-positive-subtle: var(--dnb-green-950);
  --token-color-icon-warning: var(--dnb-yellow-500);
  --token-color-icon-warning-subtle: var(--dnb-yellow-950);
  --token-color-icon-error: var(--dnb-red-600);
  --token-color-icon-error-subtle: var(--dnb-red-950);
  --token-color-icon-marketing: var(--dnb-greyscale-50);
  --token-color-icon-marketing-subtle: var(--dnb-greyscale-700);
  --token-color-stroke-action: var(--dnb-coldgreen-300);
  --token-color-stroke-action-alternative: var(--dnb-greyscale-200);
  --token-color-stroke-action-hover: var(--dnb-coldgreen-300);
  --token-color-stroke-action-pressed: var(--dnb-coldgreen-400);
  --token-color-stroke-action-inverse: var(--dnb-coldgreen-600);
  --token-color-stroke-action-hover-inverse: var(--dnb-coldgreen-600);
  --token-color-stroke-action-pressed-inverse: var(--dnb-coldgreen-700);
  --token-color-stroke-action-focus: var(--dnb-blue-600);
  --token-color-stroke-action-focus-subtle: var(--dnb-blue-100);
  --token-color-stroke-action-disabled: var(--dnb-greyscale-600);
  --token-color-stroke-selected: var(--dnb-warmgreen-100);
  --token-color-stroke-selected-ondark: var(--dnb-coldgreen-100);
  --token-color-stroke-action-ondark: var(--dnb-coldgreen-300);
  --token-color-stroke-action-alternative-ondark: var(--dnb-greyscale-200);
  --token-color-stroke-action-hover-ondark: var(--dnb-coldgreen-300);
  --token-color-stroke-action-pressed-ondark: var(--dnb-coldgreen-400);
  --token-color-stroke-action-disabled-ondark: var(--dnb-greyscale-600);
  --token-color-stroke-neutral: var(--dnb-greyscale-200);
  --token-color-stroke-neutral-ondark: var(--dnb-greyscale-0);
  --token-color-stroke-neutral-subtle: var(--dnb-greyscale-700);
  --token-color-stroke-neutral-bold: var(--dnb-greyscale-700);
  --token-color-stroke-neutral-alternative: var(--dnb-greyscale-800);
  --token-color-stroke-info: var(--dnb-coldgreen-300);
  --token-color-stroke-positive: var(--dnb-green-500);
  --token-color-stroke-warning: var(--dnb-yellow-500);
  --token-color-stroke-error: var(--dnb-orange-600);
  --token-color-stroke-marketing: var(--dnb-blue-50);
  --token-color-decorative-first-muted: var(--dnb-coldgreen-900);
  --token-color-decorative-first-muted-static: var(--dnb-coldgreen-100);
  --token-color-decorative-first-subtle: var(--dnb-coldgreen-700);
  --token-color-decorative-first-subtle-static: var(--dnb-coldgreen-300);
  --token-color-decorative-first-base: var(--dnb-coldgreen-500);
  --token-color-decorative-first-base-static: var(--dnb-coldgreen-500);
  --token-color-decorative-first-bold: var(--dnb-coldgreen-300);
  --token-color-decorative-first-bold-static: var(--dnb-coldgreen-700);
  --token-color-decorative-first-intense: var(--dnb-coldgreen-100);
  --token-color-decorative-first-intense-static: var(--dnb-coldgreen-950);
  --token-color-decorative-second-muted: var(--dnb-green-900);
  --token-color-decorative-second-muted-static: var(--dnb-green-100);
  --token-color-decorative-second-subtle: var(--dnb-green-700);
  --token-color-decorative-second-subtle-static: var(--dnb-green-300);
  --token-color-decorative-second-base: var(--dnb-green-500);
  --token-color-decorative-second-base-static: var(--dnb-green-500);
  --token-color-decorative-second-bold: var(--dnb-green-300);
  --token-color-decorative-second-bold-static: var(--dnb-green-700);
  --token-color-decorative-second-intense: var(--dnb-green-100);
  --token-color-decorative-second-intense-static: var(--dnb-green-900);
  --token-color-decorative-third-muted: var(--dnb-warmgreen-900);
  --token-color-decorative-third-muted-static: var(--dnb-warmgreen-50);
  --token-color-decorative-third-subtle: var(--dnb-warmgreen-700);
  --token-color-decorative-third-subtle-static: var(--dnb-warmgreen-300);
  --token-color-decorative-third-base: var(--dnb-warmgreen-500);
  --token-color-decorative-third-base-static: var(--dnb-warmgreen-500);
  --token-color-decorative-third-bold: var(--dnb-warmgreen-300);
  --token-color-decorative-third-bold-static: var(--dnb-warmgreen-700);
  --token-color-decorative-third-intense: var(--dnb-warmgreen-50);
  --token-color-decorative-third-intense-static: var(--dnb-warmgreen-900);
  --token-color-component-button-background-action: var(
    --dnb-coldgreen-300
  );
  --token-color-component-button-background-action-hover: var(
    --dnb-coldgreen-300
  );
  --token-color-component-button-background-action-destructive: var(
    --dnb-red-600
  );
  --token-color-component-button-background-action-destructive-hover: var(
    --dnb-red-600
  );
  --token-color-component-button-background-action-destructive-hover-subtle: var(
    --dnb-red-950
  );
  --token-color-component-button-background-action-destructive-pressed: var(
    --dnb-red-500
  );
  --token-color-component-button-background-action-destructive-pressed-subtle: var(
    --dnb-red-900
  );
  --token-color-component-button-text-neutral: var(--dnb-coldgreen-900);
  --token-color-component-button-text-neutral-inverse: var(
    --dnb-greyscale-0
  );
  --token-color-component-button-text-neutral-ondark: var(
    --dnb-coldgreen-900
  );
  --token-color-component-button-text-action: var(--dnb-coldgreen-300);
  --token-color-component-button-text-action-hover: var(
    --dnb-coldgreen-300
  );
  --token-color-component-button-text-action-inverse: var(
    --dnb-coldgreen-600
  );
  --token-color-component-button-text-action-hover-inverse: var(
    --dnb-coldgreen-600
  );
  --token-color-component-button-text-action-ondark: var(
    --dnb-coldgreen-600
  );
  --token-color-component-button-text-action-hover-ondark: var(
    --dnb-coldgreen-600
  );
  --token-color-component-button-text-action-disabled: var(
    --dnb-greyscale-500
  );
  --token-color-component-button-text-neutral-destructive: var(
    --dnb-greyscale-0
  );
  --token-color-component-button-text-action-destructive: var(
    --dnb-orange-600
  );
  --token-color-component-button-text-action-destructive-hover: var(
    --dnb-orange-600
  );
  --token-color-component-button-text-action-destructive-pressed: var(
    --dnb-orange-500
  );
  --token-color-component-button-icon-neutral: var(--dnb-coldgreen-900);
  --token-color-component-button-icon-neutral-ondark: var(
    --dnb-coldgreen-900
  );
  --token-color-component-button-icon-action: var(--dnb-coldgreen-300);
  --token-color-component-button-icon-action-hover: var(
    --dnb-coldgreen-300
  );
  --token-color-component-button-icon-action-disabled: var(
    --dnb-greyscale-500
  );
  --token-color-component-button-icon-neutral-destructive: var(
    --dnb-greyscale-0
  );
  --token-color-component-button-icon-action-destructive: var(
    --dnb-orange-600
  );
  --token-color-component-button-icon-action-destructive-hover: var(
    --dnb-orange-600
  );
  --token-color-component-button-icon-action-destructive-pressed: var(
    --dnb-orange-500
  );
  --token-color-component-button-stroke-action: var(--dnb-coldgreen-300);
  --token-color-component-button-stroke-action-hover: var(
    --dnb-coldgreen-300
  );
  --token-color-component-button-stroke-action-destructive: var(
    --dnb-orange-600
  );
  --token-color-component-button-stroke-action-destructive-hover: var(
    --dnb-orange-600
  );
  --token-color-component-button-stroke-action-destructive-pressed: var(
    --dnb-orange-500
  );
  --token-color-component-button-stroke-selected: var(
    --dnb-coldgreen-300-40
  );
  --token-color-component-tooltip-background-neutral: var(
    --dnb-greyscale-100
  );
  --token-color-component-table-background-neutral-alternative: var(
    --dnb-greyscale-800
  );
  --token-color-component-dimmer-background: var(--dnb-greyscale-800-60);
  --token-color-component-switch-action-disabled-ondark: var(
    --dnb-greyscale-800
  );
  --token-color-component-progressbar-neutral-onsubtle: var(
    --dnb-greyscale-700
  );
}