blob: 114e7d768a642e43f9dc3f89ecec8a59a91e80d7 [file] [log] [blame]
@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);
}