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-tx-1: #4c4f69; /* primary text | Text */
8 --dc-tx-2: #4c4f69; /* secondary text | Text */
9 --dc-bg-1: #e6e9ef; /* main background | Mantle */
10 --dc-bg-2: #eff1f5; /* secondary background | Base */
11 --dc-bg-3: #ccd0da; /* outlines | Surface0 */
12 --dc-lk-1: #1e66f5; /* link text | Blue */
13 --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
14 --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
15 --dc-lkb-tx: #4c4f69; /* link button text | Text */
16 --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
17 --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
18
19 /* dark colors */
20 --dc-d-tx-1: #cdd6f4; /* primary text | Text */
21 --dc-d-tx-2: #cdd6f4; /* secondary text | Text */
22 --dc-d-bg-1: #181825; /* main background | Mantle */
23 --dc-d-bg-2: #1e1e2e; /* secondary background | Base */
24 --dc-d-bg-3: #313244; /* outlines | Surface0 */
25 --dc-d-lk-1: #89b4fa; /* link text | Blue */
26 --dc-d-lkb-1: #45475a; /* link button background | Surface1 */
27 --dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */
28 --dc-d-lkb-tx: #cdd6f4; /* link button text | Text */
29 --dc-d-ac-1: #9399b21e; /* accent/selection color | Overlay2 + 1e */
30 --dc-d-ac-tx: #cdd6f4; /* accent/selection color text | Text */
31}
32
33@media (prefers-color-scheme: dark) {
34 :root {
35 --dc-tx-1: var(--dc-d-tx-1);
36 --dc-tx-2: var(--dc-d-tx-2);
37 --dc-bg-1: var(--dc-d-bg-1);
38 --dc-bg-2: var(--dc-d-bg-2);
39 --dc-bg-3: var(--dc-d-bg-3);
40 --dc-lk-1: var(--dc-d-lk-1);
41 --dc-lkb-1: var(--dc-d-lkb-1);
42 --dc-lkb-2: var(--dc-d-lkb-2);
43 --dc-lkb-tx: var(--dc-d-lkb-tx);
44 --dc-ac-1: var(--dc-d-ac-1);
45 --dc-ac-tx: var(--dc-d-ac-tx);
46 }
47}