kato/warpbox-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): introduce retro Windows 98-inspired theme

Browse Source 
Add a new "retro" theme option that mimics the classic Windows 98 aesthetic, providing a nostalgic alternative to the modern and classic dark themes.

Changes include:
- Defining CSS variables for the retro theme in `00-base.css` (pixel fonts, silver/gray colors, and classic window shadows).
- Adding custom styling for cards, headers, buttons, and title bars to replicate classic OS windows.
- Adding a star background GIF (`stars1.gif`).
- Excluding the retro theme from modern "revamp" styles in `15-revamp.css`.
- Updating `CLAUDE.md` with instructions on screenshot verification.
This commit is contained in:
Daniel Legt
2026-05-31 16:17:20 +03:00
parent df91fe9d3d
commit ffe4201f05
13 changed files with 477 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
backend/static/css/00-base.css
View File

@@ -1,10 +1,3 @@
/*
* Theme tokens.
* :root holds the default "revamp" (Aurora glass) theme so the page looks right
* even before JS runs or when JS is disabled. [data-theme="classic"] restores the
* original dark-zinc look exactly. The theme attribute is set on <html> by
* /static/js/05-theme.js from localStorage before first paint.
*/
:root {
color-scheme: dark;
--background: #0b0b16;
@@ -65,6 +58,38 @@
--surface-2: rgba(39, 39, 42, 0.28);
}
:root[data-theme="retro"] {
color-scheme: light;
--background: #ffffff;
--foreground: #000000;
--card: #c0c0c0;
--card-foreground: #000000;
--muted: #c0c0c0;
--muted-foreground: #404040;
--accent: #000078;
--accent-foreground: #ffffff;
--border: #000000;
--input: #000000;
--primary: #000078;
--primary-foreground: #ffffff;
--primary-hover: #0f80cd;
--ring: #000078;
--success: #008000;
--danger: #c00000;
--radius: 0rem;
--shadow:
inset -1px -1px 0 #404040,
inset 1px 1px 0 #ffffff,
inset -2px -2px 0 #808080,
inset 2px 2px 0 #dfdfdf;
--font-sans: "PixeloidSans", "PixelOperator", "Microsoft Sans Serif", Tahoma, sans-serif;
--header-bg: #c0c0c0;
--body-bg: #000000;
--surface-1: #ffffff;
--surface-1-hover: #fffff0;
--surface-2: #c0c0c0;
}
* {
box-sizing: border-box;
}