impr: randomize themes based on system theme (@fehmer) (#7075)

closes #7069

frontend/src/html/pages/settings.html

@@ -1469,7 +1469,9 @@
         random themes are not saved to your config. If set to 'favorite' only
         favorite themes will be randomized. If set to 'light' or 'dark', only
         presets with light or dark background colors will be randomized,
-        respectively. If set to 'custom', custom themes will be randomized.
+        respectively. If set to 'auto' dark or light themes are used, depending
+        on your system theme. If set to 'custom', custom themes will be
+        randomized.
       </div>
       <div class="buttons">
         <button data-config-value="off">off</button>
@@ -1477,6 +1479,7 @@
         <button data-config-value="fav">favorite</button>
         <button data-config-value="light">light</button>
         <button data-config-value="dark">dark</button>
+        <button data-config-value="auto">auto</button>
         <button data-config-value="custom">custom</button>
       </div>
     </div>

frontend/src/ts/controllers/theme-controller.ts

@@ -11,7 +11,7 @@ import * as Notifications from "../elements/notifications";
 import * as Loader from "../elements/loader";
 import { debounce } from "throttle-debounce";
 import { ThemeName } from "@monkeytype/schemas/configs";
-import { ThemesList } from "../constants/themes";
+import { themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 
 export let randomTheme: ThemeName | string | null = null;
@@ -307,7 +307,7 @@ async function changeThemeList(): Promise<void> {
     themesList = themes
       .filter((t) => isColorDark(t.bgColor))
       .map((t) => t.name);
-  } else if (Config.randomTheme === "on") {
+  } else if (Config.randomTheme === "on" || Config.randomTheme === "auto") {
     themesList = themes.map((t) => {
       return t.name;
     });
@@ -323,14 +323,23 @@ export async function randomizeTheme(): Promise<void> {
     await changeThemeList();
     if (themesList.length === 0) return;
   }
-  randomTheme = themesList[randomThemeIndex] as string;
-  randomThemeIndex++;
 
-  if (randomThemeIndex >= themesList.length) {
-    Arrays.shuffle(themesList);
-    randomThemeIndex = 0;
+  let filter = (_: string): boolean => true;
+  if (Config.randomTheme === "auto") {
+    filter = prefersColorSchemeDark() ? isColorDark : isColorLight;
   }
 
+  let nextTheme = null;
+  do {
+    randomTheme = themesList[randomThemeIndex] as string;
+    nextTheme = themes[themesList[randomThemeIndex] as ThemeName];
+    randomThemeIndex++;
+    if (randomThemeIndex >= themesList.length) {
+      Arrays.shuffle(themesList);
+      randomThemeIndex = 0;
+    }
+  } while (!filter(nextTheme.bgColor));
+
   let colorsOverride: string[] | undefined;
 
   if (Config.randomTheme === "custom") {
@@ -484,7 +493,7 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
     await clearRandom();
     await clearPreview(false);
     if (Config.autoSwitchTheme) {
-      if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+      if (prefersColorSchemeDark()) {
         await set(Config.themeDark, true);
       } else {
         await set(Config.themeLight, true);
@@ -523,7 +532,7 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
   if (eventKey === "customBackgroundSize") applyCustomBackgroundSize();
   if (eventKey === "autoSwitchTheme") {
     if (eventValue as boolean) {
-      if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+      if (prefersColorSchemeDark()) {
         await set(Config.themeDark, true);
       } else {
         await set(Config.themeLight, true);
@@ -535,7 +544,7 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
   if (
     eventKey === "themeLight" &&
     Config.autoSwitchTheme &&
-    !window.matchMedia?.("(prefers-color-scheme: dark)").matches &&
+    !prefersColorSchemeDark() &&
     !nosave
   ) {
     await set(Config.themeLight, true);
@@ -569,3 +578,7 @@ window.addEventListener("customBackgroundFailed", () => {
     { duration: 5 }
   );
 });
+
+function prefersColorSchemeDark(): boolean {
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+}

packages/schemas/src/configs.ts

@@ -68,6 +68,7 @@ export const RandomThemeSchema = z.enum([
   "light",
   "dark",
   "custom",
+  "auto",
 ]);
 export type RandomTheme = z.infer<typeof RandomThemeSchema>;