feat(web): add theme definition system with 5 built-in themes (#493)
All checks were successful
ci/woodpecker/push/web Pipeline was successful
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #493.
This commit is contained in:
41
apps/web/src/themes/dark.ts
Normal file
41
apps/web/src/themes/dark.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import type { ThemeDefinition } from "./types";
|
||||
|
||||
export const darkTheme: ThemeDefinition = {
|
||||
id: "dark",
|
||||
name: "Dark",
|
||||
description: "Default dark theme — deep navy with vibrant accents",
|
||||
author: "Mosaic Stack",
|
||||
isDark: true,
|
||||
colorPreview: ["#0f141d", "#1b2331", "#eef3ff", "#2f80ff", "#8b5cf6"],
|
||||
colors: {
|
||||
"bg-950": "#080b12",
|
||||
"bg-900": "#0f141d",
|
||||
"bg-850": "#151b26",
|
||||
"surface-800": "#1b2331",
|
||||
"surface-750": "#232d3f",
|
||||
"border-700": "#2f3b52",
|
||||
"text-100": "#eef3ff",
|
||||
"text-300": "#c5d0e6",
|
||||
"text-500": "#8f9db7",
|
||||
"blue-500": "#2f80ff",
|
||||
"blue-400": "#56a0ff",
|
||||
"red-500": "#e5484d",
|
||||
"red-400": "#f06a6f",
|
||||
"purple-500": "#8b5cf6",
|
||||
"purple-400": "#a78bfa",
|
||||
"teal-500": "#14b8a6",
|
||||
"teal-400": "#2dd4bf",
|
||||
"amber-500": "#f59e0b",
|
||||
"amber-400": "#fbbf24",
|
||||
"pink-500": "#ec4899",
|
||||
"emerald-500": "#10b981",
|
||||
"orange-500": "#f97316",
|
||||
"cyan-500": "#06b6d4",
|
||||
"indigo-500": "#6366f1",
|
||||
},
|
||||
shadows: {
|
||||
sm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
|
||||
md: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
|
||||
lg: "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user