88 lines
1.5 KiB
SCSS
88 lines
1.5 KiB
SCSS
/*
|
|
COLORS
|
|
*/
|
|
|
|
/*
|
|
Themes
|
|
*/
|
|
|
|
:root, [data-selected-theme="grayscalelight"] {
|
|
--color-background: #fff;
|
|
--text-normal: #000;
|
|
--text-invert: #fff;
|
|
--text-subtle: #666;
|
|
--color-primary: #999;
|
|
--color-secondary: #aaa;
|
|
--color-link: #00f;
|
|
--color-paper: #fff;
|
|
--background: #eee;
|
|
}
|
|
|
|
[data-selected-theme="light"] {
|
|
--color-background: #aabf7e; //aabf7e
|
|
--text-normal: #191b19; //191b19
|
|
--text-invert: #fff;
|
|
--text-subtle: #595959; //595959
|
|
--color-primary: #344f1f; //344f1f
|
|
--color-secondary: #60941a; //60941a
|
|
--color-link: #309bae; //309bae
|
|
--color-paper: #e8efd7; //e8efd7
|
|
}
|
|
|
|
[data-selected-theme="dark"] {
|
|
--color-background: #191b19; //191b19
|
|
--text-normal: #f8ffef; //f8ffef
|
|
--text-invert: #fff;
|
|
--text-subtle: #8c8c8c; //8c8c8c
|
|
--color-primary: #60941a; //60941a
|
|
--color-secondary: #344f1f; //344f1f
|
|
--color-link: #05abc4; //05abc4
|
|
--color-paper: #070e07; //070e07
|
|
}
|
|
|
|
[data-selected-theme="grayscaledark"] {
|
|
--color-background: #fff;
|
|
--text-normal: #000;
|
|
--text-invert: #fff;
|
|
--text-subtle: #666;
|
|
--color-primary: #999;
|
|
--color-secondary: #aaa;
|
|
--color-link: #39a;
|
|
--color-paper: #fff;
|
|
--background: #eee;
|
|
}
|
|
|
|
/*
|
|
Themed elements
|
|
*/
|
|
body {
|
|
background: var(--background);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-link);
|
|
}
|
|
|
|
h1 {
|
|
color: var(--color-primary);
|
|
}
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
hr {
|
|
background-color: var(--text-normal);
|
|
border: none;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--text-subtle); // Muted color
|
|
}
|
|
|
|
.site {
|
|
color: var(--text-normal);
|
|
} |