192 lines
4.3 KiB
CSS
192 lines
4.3 KiB
CSS
/*
|
|
|
|
custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha.
|
|
it's basically a mix and mash of the both of them together, and slightly modified.
|
|
it doesn't have a name, call it "synth.download color scheme official real"
|
|
|
|
*/
|
|
|
|
:root {
|
|
/* base colors */
|
|
--background: #fafafa;
|
|
--foreground: #3d454d;
|
|
--selection: #f0eee4;
|
|
--comment: #abb0b6;
|
|
--accent: #fd9e1a;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ff9940;
|
|
--green: #86b300;
|
|
--blue: #4cbf99;
|
|
--purple: #a37acc;
|
|
--red: #ec3838;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #ff7d7d;
|
|
--rosewater: #eca69a;
|
|
--pink: #ff8adb;
|
|
--mauve: #ba8aff;
|
|
--maroon: #e06c75;
|
|
--peach: #ffac6b;
|
|
--yellow: #e5c07b;
|
|
--teal: #2bbac5;
|
|
--sky: #3eacce;
|
|
--sapphire: #4db5d0;
|
|
--lavender: #7881ce;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #fa8d3e;
|
|
--ui-green: #91b362;
|
|
--ui-blue: #6994bf;
|
|
--ui-purple: #7e57c2;
|
|
--ui-teal: #56c2c0;
|
|
--ui-lavender: #9d8cdb;
|
|
|
|
/* misc. */
|
|
--border: #e4e4e4;
|
|
--shadow: rgba(0, 0, 0, 0.1);
|
|
--hover: rgba(0, 0, 0, 0.05);
|
|
--active: rgba(0, 0, 0, 0.1);
|
|
--focus: #86b300;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* base colors */
|
|
--background: #0a0e14;
|
|
--foreground: #d8d6d2;
|
|
--selection: #253340;
|
|
--comment: #5c6773;
|
|
--accent: #e6b450;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ffb454;
|
|
--green: #aad94c;
|
|
--blue: #59c2ff;
|
|
--purple: #d2a6ff;
|
|
--red: #f0646b;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #f2cdcd;
|
|
--rosewater: #f5e0dc;
|
|
--pink: #ffc9e3;
|
|
--mauve: #cba6f7;
|
|
--maroon: #eba0ac;
|
|
--peach: #ffcca8;
|
|
--yellow: #f9e2af;
|
|
--teal: #8ddedc;
|
|
--sky: #89dceb;
|
|
--sapphire: #74c7ec;
|
|
--lavender: #b4befe;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #e6b450;
|
|
--ui-green: #aad94c;
|
|
--ui-blue: #39bae6;
|
|
--ui-purple: #a37acc;
|
|
--ui-teal: #7adbd3;
|
|
--ui-lavender: #ada0f3;
|
|
|
|
/* misc. */
|
|
--border: #1a1f29;
|
|
--shadow: rgba(0, 0, 0, 0.4);
|
|
--hover: rgba(255, 255, 255, 0.05);
|
|
--active: rgba(255, 255, 255, 0.1);
|
|
--focus: #ffb454;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
varient of the theme modified for use with the theme selector
|
|
|
|
*/
|
|
|
|
/* Theme classes for manual theme selection */
|
|
html[data-theme="light"] {
|
|
/* base colors */
|
|
--background: #fafafa;
|
|
--foreground: #3d454d;
|
|
--selection: #f0eee4;
|
|
--comment: #abb0b6;
|
|
--accent: #ffaa33;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ff9940;
|
|
--green: #86b300;
|
|
--blue: #4cbf99;
|
|
--purple: #a37acc;
|
|
--red: #ec3838;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #ff7d7d;
|
|
--rosewater: #eca69a;
|
|
--pink: #ff8adb;
|
|
--mauve: #ba8aff;
|
|
--maroon: #e06c75;
|
|
--peach: #ffac6b;
|
|
--yellow: #e5c07b;
|
|
--teal: #2bbac5;
|
|
--sky: #3eacce;
|
|
--sapphire: #4db5d0;
|
|
--lavender: #7881ce;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #fa8d3e;
|
|
--ui-green: #91b362;
|
|
--ui-blue: #6994bf;
|
|
--ui-purple: #7e57c2;
|
|
--ui-teal: #56c2c0;
|
|
--ui-lavender: #9d8cdb;
|
|
|
|
/* misc. */
|
|
--border: #e4e4e4;
|
|
--shadow: rgba(0, 0, 0, 0.1);
|
|
--hover: rgba(0, 0, 0, 0.05);
|
|
--active: rgba(0, 0, 0, 0.1);
|
|
--focus: #86b300;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
/* base colors */
|
|
--background: #0a0e14;
|
|
--foreground: #d8d6d2;
|
|
--selection: #253340;
|
|
--comment: #5c6773;
|
|
--accent: #e6b450;
|
|
|
|
/* original ayu colors */
|
|
--orange: #ffb454;
|
|
--green: #aad94c;
|
|
--blue: #59c2ff;
|
|
--purple: #d2a6ff;
|
|
--red: #f0646b;
|
|
|
|
/* extended catppuccin based colors */
|
|
--flamingo: #f2cdcd;
|
|
--rosewater: #f5e0dc;
|
|
--pink: #ffc9e3;
|
|
--mauve: #cba6f7;
|
|
--maroon: #eba0ac;
|
|
--peach: #ffcca8;
|
|
--yellow: #f9e2af;
|
|
--teal: #8ddedc;
|
|
--sky: #89dceb;
|
|
--sapphire: #74c7ec;
|
|
--lavender: #b4befe;
|
|
|
|
/* ui accent colors */
|
|
--ui-orange: #e6b450;
|
|
--ui-green: #aad94c;
|
|
--ui-blue: #39bae6;
|
|
--ui-purple: #a37acc;
|
|
--ui-teal: #7adbd3;
|
|
--ui-lavender: #ada0f3;
|
|
|
|
/* misc. */
|
|
--border: #1a1f29;
|
|
--shadow: rgba(0, 0, 0, 0.4);
|
|
--hover: rgba(255, 255, 255, 0.05);
|
|
--active: rgba(255, 255, 255, 0.1);
|
|
--focus: #ffb454;
|
|
}
|