timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 02:53:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add more themes

Browse Source
This commit is contained in:
Timothy Pidashev
2026-04-06 16:20:17 -07:00
parent f6e9e16227
commit 237cacb612
7 changed files with 309 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/themes/families/dracula.ts Normal file
View File

@@ -0,0 +1,32 @@
import type { Theme, ThemeFamily } from "../types";
// Dracula — iconic dark theme with vibrant purple, pink, and cyan.
// The 7th accent color (pink) maps to aqua since Dracula has no traditional aqua.
const classic: Theme = {
id: "dracula",
family: "dracula",
label: "classic",
name: "Dracula",
type: "dark",
colors: {
background: "40 42 54",
foreground: "248 248 242",
red: "255 85 85", redBright: "255 130 130",
orange: "255 184 108", orangeBright: "255 207 155",
green: "80 250 123", greenBright: "130 255 165",
yellow: "241 250 140", yellowBright: "248 253 185",
blue: "139 233 253", blueBright: "175 241 254",
purple: "189 147 249", purpleBright: "212 180 252",
aqua: "255 121 198", aquaBright: "255 160 215",
surface: "68 71 90",
},
canvasPalette: [[255,85,85],[80,250,123],[241,250,140],[139,233,253],[189,147,249],[255,121,198]],
};
export const dracula: ThemeFamily = {
id: "dracula",
name: "Dracula",
themes: [classic],
default: "dracula",
};

31
src/lib/themes/families/monokai.ts Normal file
View File

@@ -0,0 +1,31 @@
import type { Theme, ThemeFamily } from "../types";
// Monokai — the iconic Sublime Text theme. Vibrant neons on dark olive.
const classic: Theme = {
id: "monokai",
family: "monokai",
label: "classic",
name: "Monokai",
type: "dark",
colors: {
background: "39 40 34",
foreground: "248 248 242",
red: "249 38 114", redBright: "252 85 145",
orange: "253 151 31", orangeBright: "254 182 85",
green: "166 226 46", greenBright: "195 240 95",
yellow: "230 219 116", yellowBright: "240 232 160",
blue: "102 217 239", blueBright: "145 230 245",
purple: "174 129 255", purpleBright: "200 165 255",
aqua: "161 239 228", aquaBright: "192 245 238",
surface: "73 72 62",
},
canvasPalette: [[249,38,114],[166,226,46],[230,219,116],[102,217,239],[174,129,255],[161,239,228]],
};
export const monokai: ThemeFamily = {
id: "monokai",
name: "Monokai",
themes: [classic],
default: "monokai",
};

53
src/lib/themes/families/nord.ts Normal file
View File

@@ -0,0 +1,53 @@
import type { Theme, ThemeFamily } from "../types";
// Nord — arctic, bluish clean aesthetic.
// Polar Night (dark bg), Snow Storm (light bg), Frost (blues), Aurora (accents).
const dark: Theme = {
id: "nord-dark",
family: "nord",
label: "dark",
name: "Nord Dark",
type: "dark",
colors: {
background: "46 52 64",
foreground: "216 222 233",
red: "191 97 106", redBright: "210 130 138",
orange: "208 135 112", orangeBright: "224 165 145",
green: "163 190 140", greenBright: "185 210 168",
yellow: "235 203 139", yellowBright: "242 220 175",
blue: "94 129 172", blueBright: "129 161 193",
purple: "180 142 173", purpleBright: "200 170 195",
aqua: "143 188 187", aquaBright: "136 192 208",
surface: "59 66 82",
},
canvasPalette: [[191,97,106],[163,190,140],[235,203,139],[94,129,172],[180,142,173],[143,188,187]],
};
const light: Theme = {
id: "nord-light",
family: "nord",
label: "light",
name: "Nord Light",
type: "light",
colors: {
background: "236 239 244",
foreground: "46 52 64",
red: "191 97 106", redBright: "170 75 85",
orange: "208 135 112", orangeBright: "185 110 88",
green: "163 190 140", greenBright: "135 162 110",
yellow: "235 203 139", yellowBright: "200 170 100",
blue: "94 129 172", blueBright: "75 108 150",
purple: "180 142 173", purpleBright: "155 115 148",
aqua: "143 188 187", aquaBright: "110 160 162",
surface: "229 233 240",
},
canvasPalette: [[191,97,106],[163,190,140],[235,203,139],[94,129,172],[180,142,173],[143,188,187]],
};
export const nord: ThemeFamily = {
id: "nord",
name: "Nord",
themes: [dark, light],
default: "nord-dark",
};

52
src/lib/themes/families/onedark.ts Normal file
View File

@@ -0,0 +1,52 @@
import type { Theme, ThemeFamily } from "../types";
// One Dark / One Light — the Atom editor classics.
const dark: Theme = {
id: "onedark-dark",
family: "onedark",
label: "dark",
name: "One Dark",
type: "dark",
colors: {
background: "40 44 52",
foreground: "171 178 191",
red: "224 108 117", redBright: "240 140 148",
orange: "209 154 102", orangeBright: "228 180 135",
green: "152 195 121", greenBright: "180 215 155",
yellow: "229 192 123", yellowBright: "240 212 162",
blue: "97 175 239", blueBright: "135 198 245",
purple: "198 120 221", purpleBright: "218 158 238",
aqua: "86 182 194", aquaBright: "120 202 212",
surface: "62 68 81",
},
canvasPalette: [[224,108,117],[152,195,121],[229,192,123],[97,175,239],[198,120,221],[86,182,194]],
};
const light: Theme = {
id: "onedark-light",
family: "onedark",
label: "light",
name: "One Light",
type: "light",
colors: {
background: "250 250 250",
foreground: "56 58 66",
red: "228 86 73", redBright: "240 115 100",
orange: "152 104 1", orangeBright: "180 130 30",
green: "80 161 79", greenBright: "105 185 104",
yellow: "193 132 1", yellowBright: "215 160 35",
blue: "64 120 242", blueBright: "100 148 248",
purple: "166 38 164", purpleBright: "192 75 190",
aqua: "1 132 188", aquaBright: "40 162 210",
surface: "229 229 230",
},
canvasPalette: [[228,86,73],[80,161,79],[193,132,1],[64,120,242],[166,38,164],[1,132,188]],
};
export const onedark: ThemeFamily = {
id: "onedark",
name: "One Dark",
themes: [dark, light],
default: "onedark-dark",
};

55
src/lib/themes/families/solarized.ts Normal file
View File

@@ -0,0 +1,55 @@
import type { Theme, ThemeFamily } from "../types";
// Solarized — Ethan Schoonover's precision-engineered color scheme.
// Same accent colors in both dark and light — that's the whole point.
const accents = {
red: "220 50 47", redBright: "238 85 80",
orange: "203 75 22", orangeBright: "225 110 60",
yellow: "181 137 0", yellowBright: "210 168 40",
green: "133 153 0", greenBright: "165 185 35",
blue: "38 139 210", blueBright: "75 165 228",
purple: "108 113 196", purpleBright: "140 145 215",
aqua: "42 161 152", aquaBright: "80 190 182",
} as const;
const palette: [number, number, number][] = [
[220,50,47],[133,153,0],[181,137,0],[38,139,210],[108,113,196],[42,161,152],
];
const dark: Theme = {
id: "solarized-dark",
family: "solarized",
label: "dark",
name: "Solarized Dark",
type: "dark",
colors: {
background: "0 43 54",
foreground: "131 148 150",
...accents,
surface: "7 54 66",
},
canvasPalette: palette,
};
const light: Theme = {
id: "solarized-light",
family: "solarized",
label: "light",
name: "Solarized Light",
type: "light",
colors: {
background: "253 246 227",
foreground: "101 123 131",
...accents,
surface: "238 232 213",
},
canvasPalette: palette,
};
export const solarized: ThemeFamily = {
id: "solarized",
name: "Solarized",
themes: [dark, light],
default: "solarized-dark",
};

74
src/lib/themes/families/tokyonight.ts Normal file
View File

@@ -0,0 +1,74 @@
import type { Theme, ThemeFamily } from "../types";
// Tokyo Night — modern, popular blue/purple-toned palette.
// Three variants: Night (deep), Storm (slightly lighter), Day (light).
const night: Theme = {
id: "tokyonight-night",
family: "tokyonight",
label: "night",
name: "Tokyo Night",
type: "dark",
colors: {
background: "26 27 38",
foreground: "169 177 214",
red: "247 118 142", redBright: "250 150 170",
orange: "255 158 100", orangeBright: "255 185 140",
green: "158 206 106", greenBright: "185 222 140",
yellow: "224 175 104", yellowBright: "238 200 140",
blue: "122 162 247", blueBright: "155 185 250",
purple: "187 154 247", purpleBright: "208 180 250",
aqua: "125 207 255", aquaBright: "165 222 255",
surface: "41 46 66",
},
canvasPalette: [[247,118,142],[158,206,106],[224,175,104],[122,162,247],[187,154,247],[125,207,255]],
};
const storm: Theme = {
id: "tokyonight-storm",
family: "tokyonight",
label: "storm",
name: "Tokyo Night Storm",
type: "dark",
colors: {
background: "36 40 59",
foreground: "169 177 214",
red: "247 118 142", redBright: "250 150 170",
orange: "255 158 100", orangeBright: "255 185 140",
green: "158 206 106", greenBright: "185 222 140",
yellow: "224 175 104", yellowBright: "238 200 140",
blue: "122 162 247", blueBright: "155 185 250",
purple: "187 154 247", purpleBright: "208 180 250",
aqua: "125 207 255", aquaBright: "165 222 255",
surface: "59 66 97",
},
canvasPalette: [[247,118,142],[158,206,106],[224,175,104],[122,162,247],[187,154,247],[125,207,255]],
};
const day: Theme = {
id: "tokyonight-day",
family: "tokyonight",
label: "day",
name: "Tokyo Night Day",
type: "light",
colors: {
background: "225 226 231",
foreground: "55 96 191",
red: "245 42 101", redBright: "248 80 130",
orange: "177 92 0", orangeBright: "200 120 30",
green: "88 117 57", greenBright: "110 140 78",
yellow: "140 108 62", yellowBright: "165 135 85",
blue: "46 125 233", blueBright: "80 150 240",
purple: "152 84 241", purpleBright: "175 115 245",
aqua: "0 113 151", aquaBright: "30 140 175",
surface: "196 200 218",
},
canvasPalette: [[245,42,101],[88,117,57],[140,108,62],[46,125,233],[152,84,241],[0,113,151]],
};
export const tokyonight: ThemeFamily = {
id: "tokyonight",
name: "Tokyo Night",
themes: [night, storm, day],
default: "tokyonight-night",
};

12
src/lib/themes/index.ts
View File

@@ -5,6 +5,12 @@ import { everforest } from "./families/everforest";
import { catppuccin } from "./families/catppuccin";
import { rosepine } from "./families/rosepine";
import { kanagawa } from "./families/kanagawa";
import { nord } from "./families/nord";
import { tokyonight } from "./families/tokyonight";
import { dracula } from "./families/dracula";
import { solarized } from "./families/solarized";
import { onedark } from "./families/onedark";
import { monokai } from "./families/monokai";
export const DEFAULT_THEME_ID = "darkbox-retro";
@@ -15,6 +21,12 @@ export const FAMILIES: ThemeFamily[] = [
catppuccin,
rosepine,
kanagawa,
nord,
tokyonight,
dracula,
solarized,
onedark,
monokai,
];
// Flat lookup — backward compatible with all existing consumers