A collection of daisyUI themes that replicate classic Windows color schemes.
This project provides CSS files that can be used to theme your application to look like older versions of Windows. See a live demo in index.html.
While hunting for an old Windows color scheme for my blog, I found this gist from @zaxbux. I wanted to see how they'd actually look, so I tried creating an old-school LOB application UI with a popular CSS framework. What I thought would be 'a couple of hours of tinkering' took over the first two weeks of 2026.
There are 33 themes available:
aerobasebrickclassicclassic-classicclassic-standarddeserteggplantembeddedhigh-contrast-1high-contrast-2high-contrast-blackhigh-contrast-whitelilaclunaluna-olive-greenluna-silvermaplemarineplumpumpkinrainy-dayred-white-blueroseroyaleroyale-noirslatesprucestormtealwheatwindowszune
This project uses Bun for package management and Tailwind CSS with the daisyUI plugin.
-
Clone the repository:
git clone https://github.com/cnkt/WinDaisy.git cd WinDaisy -
Install dependencies:
bun install
-
Build the CSS:
bun run build
This command processes the
input.cssfile, which imports all the themes, and generates theoutput.cssfile. -
Link the CSS file in your HTML:
<link href="./output.css" rel="stylesheet">
-
Apply a theme by setting the
data-themeattribute on the<html>tag or any other element:<html data-theme="classic"> <!-- Your content here --> </html>
Contributions are welcome. If you find any issues with the themes or want to add a new one, please open a pull request.
- Locate the theme's directory under
themes/. - Edit the
theme.cssfile. - Rebuild the CSS to see your changes:
bun run build
- Open
index.htmlin your browser to preview the changes.
- Create a new directory for your theme under the
themes/directory. - Inside your new theme's directory, create a
theme.cssfile. - Define your theme's colors using CSS variables within a
data-themeselector. For example:[data-theme="your-theme-name"] { --primary: #0078d7; --secondary: #f0f0f0; /* ... other daisyUI color variables */ }
- Import your new
theme.cssfile ininput.css:@import "./themes/your-theme-name/theme.css";
- Rebuild the CSS:
bun run build
- Add your new theme to the theme switcher in
index.htmlto test it.
This project is licensed under the MIT License. See the LICENSE file for details. You can fork and do whatever you want with it.