lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1/* ==userstyle==
2@name catppuccin macchiato and latte for dev.css
3@description dev.css theme based on catppuccin's macchiato and latte colors - https://github.com/catppuccin
4@namespace intergrav
5@version 1.0.0
6@author intergrav <intergrav@proton.me> (https://github.com/intergrav)
7@homepageURL https://github.com/intergrav/dev.css
8@supportURL https://github.com/intergrav/dev.css/issues
9@license MIT
10==/userstyle== */
11
12:root {
13 /* light colors - latte */
14 --dc-cs: light;
15 --dc-tx-1: #4c4f69; /* primary text | Text */
16 --dc-tx-2: #4c4f69; /* secondary text | Text */
17 --dc-bg-1: #eff1f5; /* primary background | Base */
18 --dc-bg-2: #e6e9ef; /* secondary background | Mantle */
19 --dc-bg-3: #ccd0da; /* border | Surface0 */
20 --dc-lk-1: #1e66f5; /* link text | Blue */
21 --dc-lkb-1: #bcc0cc; /* link button | Surface1 */
22 --dc-lkb-2: #ccd0da; /* link button hover | Surface0 */
23 --dc-lkb-tx: #4c4f69; /* text over link button | Text */
24 --dc-ac-1: #8839ef; /* accent color | Mauve */
25 --dc-ac-tx: #eff1f5; /* text over accent color | Base */
26
27 /* dark colors - macchiato */
28 --dc-d-cs: dark;
29 --dc-d-tx-1: #cad3f5; /* primary text | Text */
30 --dc-d-tx-2: #cad3f5; /* secondary text | Text */
31 --dc-d-bg-1: #24273a; /* primary background | Base */
32 --dc-d-bg-2: #1e2030; /* secondary background | Mantle */
33 --dc-d-bg-3: #363a4f; /* border | Surface0 */
34 --dc-d-lk-1: #8aadf4; /* link text | Blue */
35 --dc-d-lkb-1: #494d64; /* link button | Surface1 */
36 --dc-d-lkb-2: #363a4f; /* link button hover | Surface0 */
37 --dc-d-lkb-tx: #cad3f5; /* text over link button | Text */
38 --dc-d-ac-1: #c6a0f6; /* accent color | Mauve */
39 --dc-d-ac-tx: #24273a; /* text over accent color | Base */
40}
41
42@media (prefers-color-scheme: dark) {
43 :root {
44 --dc-cs: var(--dc-d-cs);
45 --dc-tx-1: var(--dc-d-tx-1);
46 --dc-tx-2: var(--dc-d-tx-2);
47 --dc-bg-1: var(--dc-d-bg-1);
48 --dc-bg-2: var(--dc-d-bg-2);
49 --dc-bg-3: var(--dc-d-bg-3);
50 --dc-lk-1: var(--dc-d-lk-1);
51 --dc-lkb-1: var(--dc-d-lkb-1);
52 --dc-lkb-2: var(--dc-d-lkb-2);
53 --dc-lkb-tx: var(--dc-d-lkb-tx);
54 --dc-ac-1: var(--dc-d-ac-1);
55 --dc-ac-tx: var(--dc-d-ac-tx);
56 }
57}