/* catppuccin colors */ latte = { red: #d20f39, yellow: #df8e1d, green: #40a02b, sapphire: #1e66f5, // blue mauve: #8839ef, } mocha = { red: #f38ba8, yellow: #f9e2af, green: #a6e3a1 sapphire: #74c7ec, mauve: #cba6f7, } /* TODO: everything should be a catppuccin color or based on one */ light-theme = { --syntax-brd: rgba(255, 255, 255, 0.2), --syntax-bg: #e6e9ef, --syntax-ledg: rgba(0, 0, 0, 0.1), --syntax-sh: #6c6f85, --syntax-name: latte['green'], --syntax-mag: latte['red'], --syntax-lit: latte['mauve'], --syntax-lits: latte['yellow'], --syntax-aq: latte['sapphire'], --syntax-err: latte['red'], --icon-shadow: #fff, --heading-fg: #4c4f69, --link-fg: latte['sapphire'], --link-visited-fg: alpha(latte['mauve'], 1.0), --bg: #eff1f5, --header-bg: rgba(255, 255, 255, 0.1), --header-hover-bg: rgba(255, 255, 255, 0.2), --fg: #4c4f69, --inline-code-bg: rgba(0,0,0,0.08), --input-bg: #dce0e8, --input-hover-bg: rgba(0, 0, 0, 0.16), --input-focus-bg: var(--input-bg), --button-bg: var(--input-bg), --button-hover-bg: var(--input-hover-bg), --button-focus-bg: var(--input-bg), } dark-theme = { --syntax-brd: rgba(255, 255, 255, 0.2), --syntax-bg: #181825, --syntax-ledg: #313244, --syntax-sh: #6c7086, --icon-shadow: #000, --syntax-name: mocha['green'], --syntax-mag: mocha['red'], --syntax-lit: mocha['mauve'], --syntax-lits: mocha['yellow'], --syntax-aq: mocha['sapphire'], --syntax-err: mocha['red'], --bg: #1e1e2e, --header-bg: rgba(255, 255, 255, 0.03), --header-hover-bg: rgba(255, 255, 255, 0.06), --fg: #cdd6f4, --heading-fg: #cdd6f4, --link-fg: mocha['sapphire'], --link-visited-fg: alpha(mocha['mauve'], 1.0), --inline-code-bg: rgba(255,255,255,0.05), --input-bg: #181825, --input-hover-bg: #313244, --input-focus-bg: #45475a, --button-bg: var(--input-bg), --button-hover-bg: var(--input-hover-bg), --button-focus-bg: var(--input-bg), } :root --syntax-bpx: 5px --ff system-ui, sans-serif --msff ldiosevka, IosevkaLyteWeb, IosevkaLyte, Iosevka, "Fira Code", monospace --pc #df3c59 --pcd #8e293b :root, body.dark-theme {dark-theme} body.light-theme {light-theme} :root @media (prefers-color-scheme light) {light-theme} :root @media (max-width: 600px) --syntax-bpx 2px .hide-in-light-theme display none @media (prefers-color-scheme dark) .hide-in-dark-theme { display: inherit } .hide-in-light-theme { display: none } body.light-theme .hide-in-dark-theme { display: none } body.dark-theme .hide-in-light-theme { display: inherit } body.dark-theme .hide-in-dark-theme { display: inherit } body.dark-theme .hide-in-light-theme { display: none } body.light-theme .hide-in-dark-theme { display: none } body.light-theme .hide-in-light-theme { display: inherit } body .only-in-light-theme { display: none } body .only-in-dark-theme { display: none } body .only-in-system-theme { display: none } body.dark-theme .only-in-dark-theme { display: inherit } body.light-theme .only-in-light-theme { display: inherit } body.system-theme .only-in-system-theme { display: inherit }