85 lines
2.4 KiB
CSS
85 lines
2.4 KiB
CSS
|
/*
|
||
|
|
/ colors
|
||
|
|
/ ======
|
||
|
|
/ default colors and extra colors specified here
|
||
|
|
/ colors yoinked as is from https://gogh-co.github.io/Gogh/
|
||
|
|
/ maybe some modifications here and there, but otherwise what is named is what is used
|
||
|
|
*/
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--pagefind-ui-font: var(--font-family);
|
||
|
|
--pagefind-ui-primary: var(--foreground);
|
||
|
|
--pagefind-ui-text: var(--foreground);
|
||
|
|
--pagefind-ui-background: var(--background);
|
||
|
|
--pagefind-ui-border: var(--accent);
|
||
|
|
--pagefind-ui-tag: var(--background);
|
||
|
|
--site-border: .1rem solid var(--border);
|
||
|
|
|
||
|
|
color-scheme: light dark; /* by default, automatically use light mode */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Ayu Light */
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root {
|
||
|
|
--background: #fafafa;
|
||
|
|
--foreground: #575f66;
|
||
|
|
--accent: #f2ae49;
|
||
|
|
--link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */
|
||
|
|
|
||
|
|
--black: #8A9199;
|
||
|
|
--red: #F51818;
|
||
|
|
--green: #86B300;
|
||
|
|
--yellow: #F2AE49;
|
||
|
|
--blue: #399EE6;
|
||
|
|
--purple: #A37ACC;
|
||
|
|
--cyan: #4CBF99;
|
||
|
|
--white: #FAFAFA;
|
||
|
|
|
||
|
|
--dark-black: #575F66;
|
||
|
|
--dark-red: #F51818;
|
||
|
|
--dark-green: #86B300;
|
||
|
|
--dark-yellow: #F2AE49;
|
||
|
|
--dark-blue: #399EE6;
|
||
|
|
--dark-purple: #A37ACC;
|
||
|
|
--dark-cyan: #4CBF99;
|
||
|
|
--dark-white: #FAFAFA;
|
||
|
|
|
||
|
|
--border: hsl(from var(--foreground) h s calc(l + 10));
|
||
|
|
--hover: hsl(from var(--background) h s calc(l - 20));;
|
||
|
|
--shadow: rgba(from var(--foreground) r g b / .8);
|
||
|
|
--focused: var(--dark-purple)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Astrodark */
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--background: #1a1d23;
|
||
|
|
--foreground: #caccd3;
|
||
|
|
--accent: #efbd58;
|
||
|
|
--link: var(--accent);
|
||
|
|
|
||
|
|
--black: #576176;
|
||
|
|
--red: #FAA5AB;
|
||
|
|
--green: #A5CD84;
|
||
|
|
--yellow: #EFBD58;
|
||
|
|
--blue: #8DC3F1;
|
||
|
|
--purple: #DEAEED;
|
||
|
|
--cyan: #27FFDF;
|
||
|
|
--white: #CACCD3;
|
||
|
|
|
||
|
|
--dark-black: #111317;
|
||
|
|
--dark-red: #F8747E;
|
||
|
|
--dark-green: #75AD47;
|
||
|
|
--dark-yellow: #D09214;
|
||
|
|
--dark-blue: #50A4E9;
|
||
|
|
--dark-purple: #CC83E3;
|
||
|
|
--dark-cyan: #00B298;
|
||
|
|
--dark-white: #ADB0BB;
|
||
|
|
|
||
|
|
--border: hsl(from var(--background) h s calc(l + 40));
|
||
|
|
--hover: hsl(from var(--background) h s calc(l + 20));;
|
||
|
|
--shadow: rgba(from var(--background) r g b / .8);
|
||
|
|
--focused: var(--dark-purple)
|
||
|
|
}
|
||
|
|
}
|