tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: add dc-cs to themes
+3
theme/boilerplate-auto.css
+3
theme/boilerplate-auto.css
···
8
--dc-font-mono: monospace; /* monospace */
9
10
/* light colors */
11
--dc-tx-1: #000000; /* primary text */
12
--dc-tx-2: #1a1a1a; /* secondary text */
13
--dc-bg-1: #fafafa; /* main background */
···
21
--dc-ac-tx: #ededed; /* accent color text */
22
23
/* dark colors */
24
--dc-d-tx-1: #ededed;
25
--dc-d-tx-2: #a1a1a1;
26
--dc-d-bg-1: #000;
···
36
37
@media (prefers-color-scheme: dark) {
38
:root {
39
--dc-tx-1: var(--dc-d-tx-1);
40
--dc-tx-2: var(--dc-d-tx-2);
41
--dc-bg-1: var(--dc-d-bg-1);
···
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 */
···
22
--dc-ac-tx: #ededed; /* accent color text */
23
24
/* dark colors */
25
+
--dc-cs: dark;
26
--dc-d-tx-1: #ededed;
27
--dc-d-tx-2: #a1a1a1;
28
--dc-d-bg-1: #000;
···
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);
+1
theme/boilerplate.css
+1
theme/boilerplate.css
+3
theme/catppuccin-frappe.css
+3
theme/catppuccin-frappe.css
···
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 */
···
17
--dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
18
19
/* dark colors */
20
--dc-d-tx-1: #c6d0f5; /* primary text | Text */
21
--dc-d-tx-2: #c6d0f5; /* secondary text | Text */
22
--dc-d-bg-1: #292c3c; /* main background | Mantle */
···
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);
···
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 */
···
18
--dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
19
20
/* dark colors */
21
+
--dc-cs: dark;
22
--dc-d-tx-1: #c6d0f5; /* primary text | Text */
23
--dc-d-tx-2: #c6d0f5; /* secondary text | Text */
24
--dc-d-bg-1: #292c3c; /* main background | Mantle */
···
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);
+3
theme/catppuccin-macchiato.css
+3
theme/catppuccin-macchiato.css
···
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 */
···
17
--dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
18
19
/* dark colors */
20
--dc-d-tx-1: #cad3f5; /* primary text | Text */
21
--dc-d-tx-2: #cad3f5; /* secondary text | Text */
22
--dc-d-bg-1: #1e2030; /* main background | Mantle */
···
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);
···
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 */
···
18
--dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
19
20
/* dark colors */
21
+
--dc-cs: dark;
22
--dc-d-tx-1: #cad3f5; /* primary text | Text */
23
--dc-d-tx-2: #cad3f5; /* secondary text | Text */
24
--dc-d-bg-1: #1e2030; /* main background | Mantle */
···
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);
+3
theme/catppuccin-mocha.css
+3
theme/catppuccin-mocha.css
···
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 */
···
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 */
···
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);
···
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 */
···
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 */
···
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);
+1
theme/day.css
+1
theme/day.css
+1
theme/night.css
+1
theme/night.css
+1
theme/terminal.css
+1
theme/terminal.css