elements-sk/modules/themes/themes.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,400italic|Roboto+Mono:400,700|Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0');
/* A basic color theme and associated dark theme inspired by
   https://material.io/design/color/dark-theme.html.

Can be imported via:

    @import '~elements-sk/themes/themes';

When choosing colors for a theme be sure to use the Material
Design Color Tool:

   https://material.io/resources/color/

And follow the guidance on the use of colors for both light
and dark themes:

  https://material.io/design/color/the-color-system.html#color-theme-creation
  https://material.io/design/color/dark-theme.html#ui-application
*/

/* Define Color Palette */
html {
  /* See https://material.io/design/color/dark-theme.html for how to use each of
     the CSS variables below.

     This theme was generated using the Material Design Color Tool with the
     following selections:

     https://material.io/resources/color/#!/?view.left=1&view.right=0&secondary.color=D84315&primary.color=1565C0

     The "Accessibility" tab shows the text colors to use for legibility.

     The colors were chosen to meet MD guidelines and come as close as possible
     to the color scheme elements-sk had before theme support was added.
     */
  --primary: #1565c0;
  --on-primary: #ffffff;
  --primary-variant: #5e92f3;
  --on-primary-variant: #000000;
  --secondary: #d84315;
  --on-secondary: #000000;
  --background: #fafafa;
  --on-background: #000000;
  --surface: #ffffff;
  --on-surface: #000000;
  --surface-1dp: #eee;
  --surface-2dp: #bdbdbd;
  --disabled: #f5f5f5;
  --on-disabled: #616161;
  --error: #b71c1c;
  --on-error: #ffffff;
  --transparent-overlay: rgba(0, 0, 0, 0.5);

  --text-intensity-high: 87%;
  --text-intensity-medium: 60%;
  --text-intensity-disabled: 38%;
}

/* Class to override colors with dark theme.

These colors match the names of the colors given in
https://material.io/design/color/dark-theme.html#ui-application for the default
dark color scheme.
*/
.darkmode {
  --primary: #ce93d8;
  --on-primary: #000000;
  --primary-variant: #303f9f;
  --on-primary-variant: #ffffff;
  --secondary: #80cbc4;
  --on-secondary: #000000;
  --background: #000000;
  --on-background: #ffffff;
  --surface: #212121;
  --surface-1dp: #424242;
  --surface-2dp: #616161;
  --disabled: #757575;
  --on-disabled: #e0e0e0;
  --on-surface: #ffffff;
  --error: #ec407a;
  --on-error: #000000;
  --transparent-overlay: rgba(255, 255, 255, 0.5);
}

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

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

.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);
}