70 lines
1.4 KiB
SCSS
70 lines
1.4 KiB
SCSS
|
body.light-theme, :root {
|
||
|
|
/* light theme color */
|
||
|
|
--background: #fff;
|
||
|
|
--background-secondary: #eaeaea;
|
||
|
|
--header: #fafafa;
|
||
|
|
--color: #222;
|
||
|
|
--color-secondary: #999;
|
||
|
|
--border-color: #dcdcdc;
|
||
|
|
|
||
|
|
/* variables for js, must be the same as these in @custom-media queries */
|
||
|
|
--phoneWidth: (max-width: 684px);
|
||
|
|
--tabletWidth: (max-width: 900px);
|
||
|
|
}
|
||
|
|
|
||
|
|
body.dark-theme {
|
||
|
|
/* dark theme colors */
|
||
|
|
--background: #121212;
|
||
|
|
--background-secondary: #1e1e1e;
|
||
|
|
--header: #0f0f0f;
|
||
|
|
--color: #bdc1c6;
|
||
|
|
--color-secondary: #666666;
|
||
|
|
--border-color: #232323;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
body:not(.dark-theme) {
|
||
|
|
/* light theme color */
|
||
|
|
--background: #fff;
|
||
|
|
--background-secondary: #eaeaea;
|
||
|
|
--header: #fafafa;
|
||
|
|
--color: #222;
|
||
|
|
--color-secondary: #999;
|
||
|
|
--border-color: #dcdcdc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
body:not(.light-theme) {
|
||
|
|
/* dark theme colors */
|
||
|
|
--background: #121212;
|
||
|
|
--background-secondary: #1e1e1e;
|
||
|
|
--header: #0f0f0f;
|
||
|
|
--color: #bdc1c6;
|
||
|
|
--color-secondary: #666666;
|
||
|
|
--border-color: #232323;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* MEDIA QUERIES */
|
||
|
|
$phone: "max-width: 684px";
|
||
|
|
$tablet: "max-width: 900px";
|
||
|
|
|
||
|
|
@mixin greater-icon($stroke-width: 3px, $width: .95rem, $height: 100%) {
|
||
|
|
.greater-icon {
|
||
|
|
width: $width;
|
||
|
|
height: $height;
|
||
|
|
|
||
|
|
path {
|
||
|
|
stroke: currentColor;
|
||
|
|
stroke-width: $stroke-width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* HOW TO USE */
|
||
|
|
|
||
|
|
/*@media ($phone) {*/
|
||
|
|
/*margin-top: 0;*/
|
||
|
|
/*}*/
|