Windows on buildings, a Midnight theme, and a timeline colour fix

README.md

@@ -147,7 +147,7 @@ A view only ever changes colour. Position and shape always mean the same thing.
 
 ### Themes
 
-Three themes are included: **Light**, **Dark** and **Beach**. By default the map follows your system's light or dark setting. A theme changes the ground the map stands on. It never changes what the buildings' colours mean.
+Four themes are included: **Light**, **Dark**, **Beach** and **Midnight**, a city at night with its windows lit in neon. By default the map follows your system's light or dark setting. A theme changes the ground the map stands on. It never changes what the buildings' colours mean.
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/icydotdev/codecity/main/assets/screenshot-plain.jpg" width="400" alt="Light theme" />
@@ -162,7 +162,7 @@ codecity [folder] [options]
   -o <file>         Write the map to one HTML file and stop, to keep or share
   --once            The same, to a temporary folder
   --port <number>   Port to serve the live map on (default: 3737)
-  --theme <name>    Theme: auto, light, dark, beach (default: auto)
+  --theme <name>    Theme: auto, light, dark, beach, midnight (default: auto)
   --link <url>      Link each file to <url>/<path> instead of opening it
                     in VS Code, for maps you publish. For a GitHub
                     repository: https://github.com/<owner>/<repo>/blob/main

src/city.ts

@@ -7,7 +7,7 @@ import { layout, type District } from "./layout.js";
 // A city is everything the page needs, ready to be written into it: the files
 // with their plots, the districts, and a few words about the repository.
 
-export const LANDS = ["auto", "light", "dark", "beach"] as const;
+export const LANDS = ["auto", "light", "dark", "beach", "midnight"] as const;
 export type Land = (typeof LANDS)[number];
 
 export interface City {

src/client/index.html

@@ -35,6 +35,17 @@
         --fresh: #2fc49a;
         color-scheme: dark;
       }
+      :root.dark[data-land="midnight"] {
+        --paper: #04050d;
+        --ink: #e6ecff;
+        --soft: #8a93bd;
+        --line: rgba(0, 225, 255, 0.22);
+        --panel: rgba(8, 10, 26, 0.86);
+        --accent: #00e1ff;
+        --hot: #ff2e8a;
+        --amber: #ffc21a;
+        --fresh: #2bff9e;
+      }
       * { box-sizing: border-box; }
       html, body { height: 100%; margin: 0; overflow: hidden; background: var(--paper); color: var(--ink); font: 13px/1.4 var(--mono); }
       canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }