Merge pull request 'feat: present theme switch as a segmented control' (#15) from feat/segmented-theme-switch into main

Reviewed-on: #15

renovate.json

@@ -10,25 +10,20 @@
   "semanticCommitType": "fix",
   "semanticCommitScope": "deps",
   "github-actions": {
-    "managerFilePatterns": ["/^\\.gitea/workflows/[^/]+\\.ya?ml$/"]
+    "fileMatch": ["^\\.gitea/workflows/[^/]+\\.ya?ml$"]
   },
   "packageRules": [
     {
       "description": "Group nginx base image updates",
       "matchManagers": ["dockerfile"],
       "groupName": "docker base image"
-    },
-    {
-      "description": "Commit every update as fix(deps) so each merged Renovate PR triggers a patch release. config:recommended pulls in :semanticPrefixFixDepsChoreOthers, which forces non-npm updates (Docker, Actions) to chore and would otherwise produce no release.",
-      "matchPackageNames": ["*"],
-      "semanticCommitType": "fix"
     }
   ],
   "customManagers": [
     {
       "customType": "regex",
       "description": "Update HTML dependencies annotated with a renovate comment, e.g. <!-- renovate: datasource=npm depName=bootstrap --> before the versioned URL",
-      "managerFilePatterns": ["/\\.html$/"],
+      "fileMatch": ["\\.html$"],
       "matchStrings": [
         "datasource=(?<datasource>\\S+) depName=(?<depName>\\S+)( versioning=(?<versioning>\\S+))?[\\s\\S]*?(?<currentValue>v?\\d+\\.\\d+\\.\\d+[\\w.-]*)"
       ]
@@ -36,7 +31,7 @@
     {
       "customType": "regex",
       "description": "Auto-detect versioned jsDelivr / unpkg npm assets in HTML",
-      "managerFilePatterns": ["/\\.html$/"],
+      "fileMatch": ["\\.html$"],
       "matchStrings": [
         "https://cdn\\.jsdelivr\\.net/npm/(?<depName>@?[^@/]+(?:/[^@/]+)?)@(?<currentValue>\\d[^/\"']+)",
         "https://unpkg\\.com/(?<depName>@?[^@/]+(?:/[^@/]+)?)@(?<currentValue>\\d[^/\"']+)"

styles.css

@@ -21,14 +21,14 @@
 
 /* Original DLR — 1987 red, white and blue */
 [data-theme="original"] {
-  --bg: #c8102e;
+  --bg: #f5f0e1;
   --surface: #002b5c;
-  --text: #f5f0e1;
+  --text: #002b5c;
-  --message: #f5f0e1;
+  --message: #002b5c;
-  --button-bg: #002b5c;
+  --button-bg: #c8102e;
   --button-text: #f5f0e1;
-  --button-active-bg: #f5f0e1;
+  --button-active-bg: #002b5c;
-  --button-active-text: #002b5c;
+  --button-active-text: #f5f0e1;
 }
 
 * {
@@ -63,10 +63,13 @@ body {
   padding: 1.5rem;
 }
 
+/* Segmented control: both options joined in one rounded container,
+   with the active segment filled. */
 .theme-toggle {
-  display: flex;
+  display: inline-flex;
-  gap: 0.5rem;
+  border: 2px solid var(--button-bg);
-  border: none;
+  border-radius: 999px;
+  overflow: hidden;
   margin: 0;
   padding: 0;
 }
@@ -75,19 +78,22 @@ body {
   font-family: inherit;
   font-size: 0.9rem;
   font-weight: 600;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1.1rem;
-  border: 2px solid var(--button-bg);
+  border: none;
-  border-radius: 999px;
   background: transparent;
   color: var(--text);
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
 }
 
+/* Divider between the two segments. */
+.theme-button + .theme-button {
+  border-left: 2px solid var(--button-bg);
+}
+
 .theme-button[aria-pressed="true"] {
   background: var(--button-active-bg);
   color: var(--button-active-text);
-  border-color: var(--button-active-bg);
 }
 
 .stage {