devins.page
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: a template that you can modify, but with an automatic light/dark mode */
3/* note: you can remove lines that you want to keep as the dev.css default, such as the font lines */
4
5:root {
6 /* font families */
7 --dc-font-sans: sans-serif; /* sans serif */
8 --dc-font-mono: monospace; /* monospace */
9
10 /* light colors */
11 --dc-cs: light; /* light/dark scrollbars, inputs, etc */
12 --dc-tx-1: #000000; /* primary text */
13 --dc-tx-2: #1a1a1a; /* secondary text */
14 --dc-bg-1: #fafafa; /* main background */
15 --dc-bg-2: #fff; /* secondary background */
16 --dc-bg-3: #ebebeb; /* outlines */
17 --dc-lk-1: #0068d6; /* link text */
18 --dc-lkb-1: #0072f5; /* link button background */
19 --dc-lkb-2: #0062d1; /* link button background (hover) */
20 --dc-lkb-tx: #ededed; /* link button text */
21 --dc-ac-1: #8e4ec6; /* accent color */
22 --dc-ac-tx: #ededed; /* accent color text */
23
24 /* dark colors */
25 --dc-d-cs: dark;
26 --dc-d-tx-1: #ededed;
27 --dc-d-tx-2: #a1a1a1;
28 --dc-d-bg-1: #000;
29 --dc-d-bg-2: #0a0a0a;
30 --dc-d-bg-3: #2e2e2e;
31 --dc-d-lk-1: #52a8ff;
32 --dc-d-lkb-1: #0072f5;
33 --dc-d-lkb-2: #0062d1;
34 --dc-d-lkb-tx: #ededed;
35 --dc-d-ac-1: #8e4ec6;
36 --dc-d-ac-tx: #ededed;
37}
38
39@media (prefers-color-scheme: dark) {
40 :root {
41 --dc-cs: var(--dc-d-cs);
42 --dc-tx-1: var(--dc-d-tx-1);
43 --dc-tx-2: var(--dc-d-tx-2);
44 --dc-bg-1: var(--dc-d-bg-1);
45 --dc-bg-2: var(--dc-d-bg-2);
46 --dc-bg-3: var(--dc-d-bg-3);
47 --dc-lk-1: var(--dc-d-lk-1);
48 --dc-lkb-1: var(--dc-d-lkb-1);
49 --dc-lkb-2: var(--dc-d-lkb-2);
50 --dc-lkb-tx: var(--dc-d-lkb-tx);
51 --dc-ac-1: var(--dc-d-ac-1);
52 --dc-ac-tx: var(--dc-d-ac-tx);
53 }
54}