Merge pull request #1391 from rustom/master

Implement light and dark theme randomization functionality

package.json

@@ -45,6 +45,7 @@
     "@babel/runtime": "^7.12.5",
     "chart.js": "^2.9.4",
     "chartjs-plugin-annotation": "^0.5.7",
-    "chartjs-plugin-trendline": "^0.2.2"
+    "chartjs-plugin-trendline": "^0.2.2",
+    "tinycolor2": "^1.4.2"
   }
 }

src/js/commandline-lists.js

@@ -409,6 +409,20 @@ let commandsRandomTheme = {
         UpdateConfig.setRandomTheme("fav");
       },
     },
+    {
+      id: "setRandomLight",
+      display: "light",
+      exec: () => {
+        UpdateConfig.setRandomTheme("light");
+      },
+    },
+    {
+      id: "setRandomDark",
+      display: "dark",
+      exec: () => {
+        UpdateConfig.setRandomTheme("dark");
+      },
+    },
   ],
 };
 

src/js/theme-controller.js

@@ -4,6 +4,7 @@ import * as Misc from "./misc";
 import * as Notifications from "./notifications";
 import Config from "./config";
 import * as UI from "./ui";
+import tinycolor from "tinycolor2";
 
 let isPreviewingTheme = false;
 export let randomTheme = null;
@@ -132,12 +133,21 @@ export function clearPreview() {
 export function randomizeTheme() {
   var randomList;
   Misc.getThemesList().then((themes) => {
-    randomList = themes.map((t) => {
-      return t.name;
-    });
-
-    if (Config.randomTheme === "fav" && Config.favThemes.length > 0)
+    if (Config.randomTheme === "fav" && Config.favThemes.length > 0) {
       randomList = Config.favThemes;
+    } else if (Config.randomTheme === "light") {
+      randomList = themes
+        .filter((t) => tinycolor(t.bgColor).isLight())
+        .map((t) => t.name);
+    } else if (Config.randomTheme === "dark") {
+      randomList = themes
+        .filter((t) => tinycolor(t.bgColor).isDark())
+        .map((t) => t.name);
+    } else {
+      randomList = themes.map((t) => {
+        return t.name;
+      });
+    }
 
     const previousTheme = randomTheme;
     randomTheme = randomList[Math.floor(Math.random() * randomList.length)];

static/index.html

@@ -3230,7 +3230,9 @@
                 <div class="text">
                   After completing a test, the theme will be set to a random
                   one. The random themes are not saved to your config. If set to
-                  'fav' only favourite themes will be randomized.
+                  'fav' only favourite themes will be randomized. If set to
+                  'light' or 'dark', only presets with light or dark background
+                  colors will be randomized, respectively.
                 </div>
                 <div class="buttons">
                   <div
@@ -3257,6 +3259,22 @@
                   >
                     fav
                   </div>
+                  <div
+                    class="button"
+                    randomTheme="light"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    light
+                  </div>
+                  <div
+                    class="button"
+                    randomTheme="dark"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    dark
+                  </div>
                 </div>
               </div>
               <div class="section customBackgroundSize">