tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: catppuccin themes
+1
-1
README.md
+1
-1
README.md
···
113
114
## Themes
115
116
-
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, place this after your main stylesheet:
117
118
```html
119
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
···
113
114
## Themes
115
116
+
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. I provide a terminal-like theme, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, place this after your main stylesheet:
117
118
```html
119
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
+1
-1
package.json
+1
-1
package.json
+47
theme/catppuccin-frappe.css
+47
theme/catppuccin-frappe.css
···
···
1
+
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+
/* about: catppuccin's frappé 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: #c6d0f5; /* primary text | Text */
21
+
--dc-d-tx-2: #c6d0f5; /* secondary text | Text */
22
+
--dc-d-bg-1: #292c3c; /* main background | Mantle */
23
+
--dc-d-bg-2: #303446; /* secondary background | Base */
24
+
--dc-d-bg-3: #414559; /* outlines | Surface0 */
25
+
--dc-d-lk-1: #8caaee; /* link text | Blue */
26
+
--dc-d-lkb-1: #51576d; /* link button background | Surface1 */
27
+
--dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */
28
+
--dc-d-lkb-tx: #c6d0f5; /* link button text | Text */
29
+
--dc-d-ac-1: #949cbb1e; /* accent/selection color | Overlay2 + 1e */
30
+
--dc-d-ac-tx: #c6d0f5; /* 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
+
}
+47
theme/catppuccin-macchiato.css
+47
theme/catppuccin-macchiato.css
···
···
1
+
/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+
/* about: catppuccin's macchiato 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: #cad3f5; /* primary text | Text */
21
+
--dc-d-tx-2: #cad3f5; /* secondary text | Text */
22
+
--dc-d-bg-1: #1e2030; /* main background | Mantle */
23
+
--dc-d-bg-2: #24273a; /* secondary background | Base */
24
+
--dc-d-bg-3: #363a4f; /* outlines | Surface0 */
25
+
--dc-d-lk-1: #8aadf4; /* link text | Blue */
26
+
--dc-d-lkb-1: #494d64; /* link button background | Surface1 */
27
+
--dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */
28
+
--dc-d-lkb-tx: #cad3f5; /* link button text | Text */
29
+
--dc-d-ac-1: #939ab71e; /* accent/selection color | Overlay2 + 1e */
30
+
--dc-d-ac-tx: #cad3f5; /* 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
+
}
+47
theme/catppuccin-mocha.css
+47
theme/catppuccin-mocha.css
···
···
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
+
}