119 lines
3 KiB
Stylus
119 lines
3 KiB
Stylus
/* 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: darken(latte['sapphire'], 30%),
|
|
--link-visited-fg: darken(latte['mauve'], 30%),
|
|
--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 }
|