Theme support

build.js

@@ -12,11 +12,11 @@ const { homepage, version } = require("./package.json");
 
 function buildCSS() {
   const input =
-    `/*! 98.css v${version} - ${homepage} */\n` + fs.readFileSync("style.css");
+    `/*! 98.css v${version} - ${homepage} */\n` + fs.readFileSync("themes.css") + fs.readFileSync("style.css");
 
   return postcss()
     .use(require("postcss-inline-svg"))
-    .use(require("postcss-css-variables"))
+    //.use(require("postcss-css-variables"))
     .use(require("postcss-calc"))
     .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
     .use(require("cssnano"))
@@ -71,9 +71,39 @@ function buildDocs() {
   );
 }
 
+function generateThemeManifest() {
+  const cssPath = "themes.css";
+  const outputPath = "dist/themes.json";
+  const css = fs.readFileSync(cssPath, "utf8");
+
+  // Match top-level selectors like ".theme-brick {"
+  const themeRegex = /\.theme-([\w-]+)\s*\{/g;
+
+  const themes = [];
+  let match;
+
+  while ((match = themeRegex.exec(css)) !== null) {
+    const slug = match[1]; // e.g. "brick"
+    themes.push({
+      name: slug
+        .split("-")
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(" "), // "brick" -> "Brick", "dark-blue" -> "Dark Blue"
+      class: `theme-${slug}`,
+    });
+  }
+
+  fs.writeFileSync(outputPath, JSON.stringify(themes, null, 2));
+  console.log(`Wrote ${themes.length} themes to ${outputPath}`);
+
+  return themes;
+}
+
+
 function build() {
   buildCSS()
     .then(buildDocs)
+    .then(generateThemeManifest)
     .catch((err) => console.log(err));
 }
 module.exports = build;

docs/docs.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  background: #c0c0c0;
+  background: var(--surface);
 }
 
 main {
@@ -79,7 +79,7 @@ p {
 blockquote {
   margin: 0 0 20px;
   padding: 20px;
-  background: #dfdfdf;
+  background: rgba(255, 255, 255, 0.4);
 }
 
 blockquote footer {

docs/index.html.ejs

@@ -22,6 +22,13 @@
   <aside>
     <ul class="tree-view">
       <li><a href="#intro">Intro</a></li>
+      <li>
+          <a href="#themes">Themes</a>
+          <ul>
+              <li><a href="#bundled-themes">Bundled</a></li>
+              <li><a href="#custom-themes">Custom</a></li>
+          </ul>
+      </li>
       <li>
         <a href="#components">Components</a>
         <ul>
@@ -125,6 +132,55 @@
     </p>
     <pre style="max-width: 375px"><code>npm install 98.css</code></pre>
 
+    <h2 id="themes">Themes</h2>
+
+    <section class="component">
+      <h3 id="bundled-themes">Bundled</h3>
+      <div>
+        <p>
+          Some of the default Windows themes are bundled. To use them, simply
+          add the theme's class to your <code>body</code> or <code>html</code>
+          element.
+        </p>
+
+        <div class="field-row-stacked" style="width: 200px">
+          <label for="theme-selector">Choose theme</label>
+          <select id="theme-selector">
+            <option value="">Default (no theme)</option>
+          </select>
+        </div>
+      </div>
+    </section>
+
+    <section class="component">
+      <h3 id="custom-themes">Custom</h3>
+      <div>
+        <p>
+          You can easily make custom themes or modify the colors runtime using
+          JavaScript. All parameters are available as CSS variables.
+        </p>
+
+        <pre style="max-width: 450px"><code>.theme-rose {
+  --font-family-title-bar: "Times New Roman", Times, serif;
+  --font-size-title-bar: 13px;
+  --text-color: #000000;
+  --text-color-inactive-title-bar: #606068;
+  --background-color: #808080;
+  --surface: #cfafb7;
+  --button-highlight: #ffffff;
+  --button-face: var(--surface);
+  --button-shadow: #808080;
+  --window-frame: #0a0a0a;
+  --dialog-blue: #9f6070;
+  --dialog-blue-light: #9f6070;
+  --dialog-gray: #a0a0a4;
+  --dialog-gray-light: #a0a0a4;
+  --link-blue: #0000ff;
+}</code></pre>
+
+      </div>
+    </section>
+
     <h2 id="components">Components</h2>
 
     <section class="component">
@@ -1125,5 +1181,28 @@
       subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
     </p>
   </main>
+
+  <script>
+    window.onload = () => {
+      const body = document.querySelector('body');
+      const select = document.getElementById('theme-selector');
+
+      fetch('themes.json')
+          .then(response => response.json())
+          .then((response) => {
+              response.forEach((theme) => {
+                  const option = document.createElement('option');
+                  option.value = theme.class;
+                  option.innerHTML = theme.name;
+
+                  select.appendChild(option);
+              })
+          });
+
+      select.addEventListener('change', () => {
+          body.className = select.value;
+      })
+    }
+  </script>
 </body>
 </html>

server.js

@@ -2,7 +2,7 @@ const chokidar = require("chokidar");
 const build = require("./build");
 
 chokidar
-  .watch(["style.css", "build.js", "docs", "fonts", "icon"], {
+  .watch(["style.css", "themes.css", "build.js", "docs", "fonts", "icon"], {
     usePolling: true,
   })
   .on("change", (file) => {