blob: 114e7d768a642e43f9dc3f89ecec8a59a91e80d7 [file] [log] [blame]
@import url(',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
Can be imported via:
@import '~elements-sk/themes/themes';
When choosing colors for a theme be sure to use the Material
Design Color Tool:
And follow the guidance on the use of colors for both light
and dark themes:
/* Define Color Palette */
html {
/* See for how to use each of
the CSS variables below.
This theme was generated using the Material Design Color Tool with the
following selections:!/?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 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);