infra-sk/modules/themes-sk/themes.css

/* A basic color theme and associated dark theme inspired by
   https://material.io/design/color/dark-theme.html.

 Can be imported via:

    @import '../infra-sk/themes-sk/themes.css';
*/

@import url(~elements-sk/colors.css);
@import "color-palette.css";

/* Define Color Palette */
html {
  /* See https://material.io/design/color/dark-theme.html for how to use each
     of the below. */
  --primary: var(--deep-purple-500);
  --on-primary: var(--white);
  --primary-variant: var(--deep-purple-700);
  --on-primary-variant: var(--white);
  --secondary: var(--teal-200);
  --on-secondary: var(--black);
  --background: var(--white);
  --on-background: var(--black);
  --surface: var(--white);
  --on-surface: var(--black);
  --error: var(--red-900);
  --on-error: var(--white);
  --transparent-overlay: rgba(0,0,0,0.5);
}

/* Class to override colors with dark theme */
.darkmode {
  --primary: var(--purple-200);
  --on-primary: var(--black);
  --primary-variant: var(--deep-purple-700);
  --on-primary-variant: var(--white);
  --secondary: var(--teal-200);
  --on-secondary: var(--black);
  --background: var(--black);
  --on-background: var(--white);
  --surface: var(--grey-700);
  --on-surface: var(--white);
  --error: var(--pink-400);
  --on-error: var(--black);
  --transparent-overlay: rgba(255,255,255,0.5);
}

/* Ensure the body respects darkmode */
body {
  background-color: var(--background);
  color: var(--on-background);
  fill: var(--on-background);
}

/* Helper classes to set elements to colors sets. */
.primary-container-themes-sk {
  background-color: var(--primary);
  color: var(--on-primary);
  fill: var(--on-primary);
}

.primary-themes-sk {
  color: var(--primary);
  fill: var(--primary);
}

.primary-variant-container-themes-sk {
  background-color: var(--primary-variant);
  color: var(--on-primary-variant);
  fill: var(--on-primary-variant);
}

.primary-variant-themes-sk {
  color: var(--primary-variant);
  fill: var(--primary-variant);
}

.secondary-container-themes-sk {
  background-color: var(--secondary);
  color: var(--on-secondary);
  fill: var(--on-secondary);
}

.secondary-themes-sk {
  color: var(--secondary);
  fill: var(--secondary);
}

.surface-themes-sk {
  background-color: var(--surface);
  color: var(--on-surface);
  fill: var(--on-surface);
}

.error-container-themes-sk {
  background-color: var(--error);
  color: var(--on-error);
  fill: var(--on-error);
}

.error-themes-sk {
  color: var(--error);
  fill: var(--error);
}

.overlay-themes-sk {
  background-color: var(--transparent-overlay)
}