diff --git a/README.md b/README.md
index 3def585..fb71d51 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,7 @@ This turns the header into a sidebar on displays that are wide enough to support
## Themes
-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:
+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:
```html
diff --git a/package.json b/package.json
index 90da25b..cccdba0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@intergrav/dev.css",
- "version": "3.1.0",
+ "version": "3.1.1",
"description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system",
"author": "intergrav (https://intergrav.xyz)",
"license": "MIT",
diff --git a/theme/catppuccin-frappe.css b/theme/catppuccin-frappe.css
new file mode 100644
index 0000000..dc53990
--- /dev/null
+++ b/theme/catppuccin-frappe.css
@@ -0,0 +1,47 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: catppuccin's frappé color scheme - https://github.com/catppuccin */
+/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
+
+:root {
+ /* light colors - latte */
+ --dc-tx-1: #4c4f69; /* primary text | Text */
+ --dc-tx-2: #4c4f69; /* secondary text | Text */
+ --dc-bg-1: #e6e9ef; /* main background | Mantle */
+ --dc-bg-2: #eff1f5; /* secondary background | Base */
+ --dc-bg-3: #ccd0da; /* outlines | Surface0 */
+ --dc-lk-1: #1e66f5; /* link text | Blue */
+ --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
+ --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
+ --dc-lkb-tx: #4c4f69; /* link button text | Text */
+ --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
+ --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
+
+ /* dark colors */
+ --dc-d-tx-1: #c6d0f5; /* primary text | Text */
+ --dc-d-tx-2: #c6d0f5; /* secondary text | Text */
+ --dc-d-bg-1: #292c3c; /* main background | Mantle */
+ --dc-d-bg-2: #303446; /* secondary background | Base */
+ --dc-d-bg-3: #414559; /* outlines | Surface0 */
+ --dc-d-lk-1: #8caaee; /* link text | Blue */
+ --dc-d-lkb-1: #51576d; /* link button background | Surface1 */
+ --dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */
+ --dc-d-lkb-tx: #c6d0f5; /* link button text | Text */
+ --dc-d-ac-1: #949cbb1e; /* accent/selection color | Overlay2 + 1e */
+ --dc-d-ac-tx: #c6d0f5; /* accent/selection color text | Text */
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --dc-tx-1: var(--dc-d-tx-1);
+ --dc-tx-2: var(--dc-d-tx-2);
+ --dc-bg-1: var(--dc-d-bg-1);
+ --dc-bg-2: var(--dc-d-bg-2);
+ --dc-bg-3: var(--dc-d-bg-3);
+ --dc-lk-1: var(--dc-d-lk-1);
+ --dc-lkb-1: var(--dc-d-lkb-1);
+ --dc-lkb-2: var(--dc-d-lkb-2);
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
+ --dc-ac-1: var(--dc-d-ac-1);
+ --dc-ac-tx: var(--dc-d-ac-tx);
+ }
+}
diff --git a/theme/catppuccin-macchiato.css b/theme/catppuccin-macchiato.css
new file mode 100644
index 0000000..bd66640
--- /dev/null
+++ b/theme/catppuccin-macchiato.css
@@ -0,0 +1,47 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */
+/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
+
+:root {
+ /* light colors - latte */
+ --dc-tx-1: #4c4f69; /* primary text | Text */
+ --dc-tx-2: #4c4f69; /* secondary text | Text */
+ --dc-bg-1: #e6e9ef; /* main background | Mantle */
+ --dc-bg-2: #eff1f5; /* secondary background | Base */
+ --dc-bg-3: #ccd0da; /* outlines | Surface0 */
+ --dc-lk-1: #1e66f5; /* link text | Blue */
+ --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
+ --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
+ --dc-lkb-tx: #4c4f69; /* link button text | Text */
+ --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
+ --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
+
+ /* dark colors */
+ --dc-d-tx-1: #cad3f5; /* primary text | Text */
+ --dc-d-tx-2: #cad3f5; /* secondary text | Text */
+ --dc-d-bg-1: #1e2030; /* main background | Mantle */
+ --dc-d-bg-2: #24273a; /* secondary background | Base */
+ --dc-d-bg-3: #363a4f; /* outlines | Surface0 */
+ --dc-d-lk-1: #8aadf4; /* link text | Blue */
+ --dc-d-lkb-1: #494d64; /* link button background | Surface1 */
+ --dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */
+ --dc-d-lkb-tx: #cad3f5; /* link button text | Text */
+ --dc-d-ac-1: #939ab71e; /* accent/selection color | Overlay2 + 1e */
+ --dc-d-ac-tx: #cad3f5; /* accent/selection color text | Text */
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --dc-tx-1: var(--dc-d-tx-1);
+ --dc-tx-2: var(--dc-d-tx-2);
+ --dc-bg-1: var(--dc-d-bg-1);
+ --dc-bg-2: var(--dc-d-bg-2);
+ --dc-bg-3: var(--dc-d-bg-3);
+ --dc-lk-1: var(--dc-d-lk-1);
+ --dc-lkb-1: var(--dc-d-lkb-1);
+ --dc-lkb-2: var(--dc-d-lkb-2);
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
+ --dc-ac-1: var(--dc-d-ac-1);
+ --dc-ac-tx: var(--dc-d-ac-tx);
+ }
+}
diff --git a/theme/catppuccin-mocha.css b/theme/catppuccin-mocha.css
new file mode 100644
index 0000000..15121e2
--- /dev/null
+++ b/theme/catppuccin-mocha.css
@@ -0,0 +1,47 @@
+/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: catppuccin's mocha color scheme - https://github.com/catppuccin */
+/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */
+
+:root {
+ /* light colors - latte */
+ --dc-tx-1: #4c4f69; /* primary text | Text */
+ --dc-tx-2: #4c4f69; /* secondary text | Text */
+ --dc-bg-1: #e6e9ef; /* main background | Mantle */
+ --dc-bg-2: #eff1f5; /* secondary background | Base */
+ --dc-bg-3: #ccd0da; /* outlines | Surface0 */
+ --dc-lk-1: #1e66f5; /* link text | Blue */
+ --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */
+ --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */
+ --dc-lkb-tx: #4c4f69; /* link button text | Text */
+ --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */
+ --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */
+
+ /* dark colors */
+ --dc-d-tx-1: #cdd6f4; /* primary text | Text */
+ --dc-d-tx-2: #cdd6f4; /* secondary text | Text */
+ --dc-d-bg-1: #181825; /* main background | Mantle */
+ --dc-d-bg-2: #1e1e2e; /* secondary background | Base */
+ --dc-d-bg-3: #313244; /* outlines | Surface0 */
+ --dc-d-lk-1: #89b4fa; /* link text | Blue */
+ --dc-d-lkb-1: #45475a; /* link button background | Surface1 */
+ --dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */
+ --dc-d-lkb-tx: #cdd6f4; /* link button text | Text */
+ --dc-d-ac-1: #9399b21e; /* accent/selection color | Overlay2 + 1e */
+ --dc-d-ac-tx: #cdd6f4; /* accent/selection color text | Text */
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --dc-tx-1: var(--dc-d-tx-1);
+ --dc-tx-2: var(--dc-d-tx-2);
+ --dc-bg-1: var(--dc-d-bg-1);
+ --dc-bg-2: var(--dc-d-bg-2);
+ --dc-bg-3: var(--dc-d-bg-3);
+ --dc-lk-1: var(--dc-d-lk-1);
+ --dc-lkb-1: var(--dc-d-lkb-1);
+ --dc-lkb-2: var(--dc-d-lkb-2);
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
+ --dc-ac-1: var(--dc-d-ac-1);
+ --dc-ac-tx: var(--dc-d-ac-tx);
+ }
+}