lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2/* about: catppuccin's mocha color scheme - https://github.com/catppuccin */
3/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
4
5:root {
6 /* light colors - latte */
7 --dc-cs: light;
8 --dc-tx-1: #4c4f69; /* primary text | Text */
9 --dc-tx-2: #4c4f69; /* secondary text | Text */
10 --dc-bg-1: #e6e9ef; /* main background | Mantle */
11 --dc-bg-2: #eff1f5; /* secondary background | Base */
12 --dc-bg-3: #ccd0da; /* outlines | Surface0 */
13 --dc-lk-1: #1e66f5; /* link text | Blue */
14 --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
15 --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
16 --dc-lkb-tx: #4c4f69; /* link button text | Text */
17 --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
18 --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
19
20 /* dark colors */
21 --dc-cs: dark;
22 --dc-d-tx-1: #cdd6f4; /* primary text | Text */
23 --dc-d-tx-2: #cdd6f4; /* secondary text | Text */
24 --dc-d-bg-1: #181825; /* main background | Mantle */
25 --dc-d-bg-2: #1e1e2e; /* secondary background | Base */
26 --dc-d-bg-3: #313244; /* outlines | Surface0 */
27 --dc-d-lk-1: #89b4fa; /* link text | Blue */
28 --dc-d-lkb-1: #45475a; /* link button background | Surface1 */
29 --dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */
30 --dc-d-lkb-tx: #cdd6f4; /* link button text | Text */
31 --dc-d-ac-1: #9399b21e; /* accent/selection color | Overlay2 + 1e */
32 --dc-d-ac-tx: #cdd6f4; /* accent/selection color text | Text */
33}
34
35@media (prefers-color-scheme: dark) {
36 :root {
37 --dc-cs: var(--dc-d-cs);
38 --dc-tx-1: var(--dc-d-tx-1);
39 --dc-tx-2: var(--dc-d-tx-2);
40 --dc-bg-1: var(--dc-d-bg-1);
41 --dc-bg-2: var(--dc-d-bg-2);
42 --dc-bg-3: var(--dc-d-bg-3);
43 --dc-lk-1: var(--dc-d-lk-1);
44 --dc-lkb-1: var(--dc-d-lkb-1);
45 --dc-lkb-2: var(--dc-d-lkb-2);
46 --dc-lkb-tx: var(--dc-d-lkb-tx);
47 --dc-ac-1: var(--dc-d-ac-1);
48 --dc-ac-tx: var(--dc-d-ac-tx);
49 }
50}