custom theme in config

Author: tdjsnelling

README.md

@@ -12,21 +12,21 @@ Please join the [Discord server](https://discord.gg/BEGXEk29Up) for support and
   * Registration modes (open / closed / invite only)
   * Sending of invites
   * Account management (2FA, password resets etc.)
-  * Bonus points system
+  * Bonus points system (purchase invites, upload etc.)
   * Option to browse torrents without logging in (for search engine discovery)
 * Torrent management
   * Uploading torrents with rich metadata (title, description, source, mediainfo, category, tags etc.)
   * Searching torrents or browsing by category or tags
-  * Freeleech options (specific torrents, sitewide)
+  * Freeleech options (specific torrents, site-wide)
   * Torrent grouping (e.g. different formats of same movie)
   * Bookmarks
 * Upload / download tracking
   * Track how much content each user has uploaded / downloaded
   * Track ratios
   * Limit up / downloading per user based on ratio
-  * Award invites based on ratio
+  * Award bonus points based on upload
 * User interaction
-  * Commenting on torrents
+  * Commenting on torrents and announcements
   * Up / down voting torrents
   * Requests system
 * Moderation

api/src/utils/validateConfig.js

@@ -2,14 +2,14 @@ import * as yup from "yup";
 
 const httpRegex = /http(s)?:\/\/.*/;
 const mongoRegex = /mongodb:\/\/.*/;
+const hexRegex = /#([a-f0-9]){6}/i;
 
 const configSchema = yup
   .object({
     envs: yup
       .object({
         SQ_SITE_NAME: yup.string().min(1).max(20).required(),
         SQ_SITE_DESCRIPTION: yup.string().min(1).max(80).required(),
-        SQ_THEME_COLOUR: yup.string().matches(/#([a-f0-9]){6}/i),
         SQ_ALLOW_REGISTER: yup
           .string()
           .oneOf(["open", "invite", "closed"])
@@ -39,6 +39,14 @@ const configSchema = yup
           return yup.object(entries).required();
         }),
         SQ_ALLOW_UNREGISTERED_VIEW: yup.boolean().required(),
+        SQ_CUSTOM_THEME: yup.object({
+          primary: yup.string().matches(hexRegex),
+          background: yup.string().matches(hexRegex),
+          sidebar: yup.string().matches(hexRegex),
+          border: yup.string().matches(hexRegex),
+          text: yup.string().matches(hexRegex),
+          grey: yup.string().matches(hexRegex),
+        }),
         SQ_BASE_URL: yup.string().matches(httpRegex).required(),
         SQ_API_URL: yup.string().matches(httpRegex).required(),
         SQ_MONGO_URL: yup.string().matches(mongoRegex).required(),

client/pages/_app.js

@@ -27,31 +27,31 @@ import { NotificationsProvider } from "../components/Notifications";
 import Text from "../components/Text";
 import LoadingContext from "../utils/LoadingContext";
 
-const getThemeColours = (theme, primary = "#f45d48") => {
-  switch (theme) {
+const getThemeColours = (themeName, customTheme = {}) => {
+  switch (themeName) {
     case "light":
       return {
-        primary,
-        background: "#ffffff",
-        sidebar: "#f8f8f8",
-        text: "#202224",
-        grey: "#747474",
+        primary: customTheme.primary ?? "#f45d48",
+        background: customTheme.background ?? "#ffffff",
+        sidebar: customTheme.sidebar ?? "#f8f8f8",
+        border: customTheme.border ?? "#deebf1",
+        text: customTheme.text ?? "#202224",
+        grey: customTheme.grey ?? "#747474",
         error: "#f33",
         success: "#44d944",
         info: "#427ee1",
-        border: "#deebf1",
       };
     case "dark":
       return {
-        primary,
-        background: "#1f2023",
-        sidebar: "#27282b",
-        text: "#f8f8f8",
-        grey: "#aaa",
+        primary: customTheme.primary ?? "#f45d48",
+        background: customTheme.background ?? "#1f2023",
+        sidebar: customTheme.sidebar ?? "#27282b",
+        border: customTheme.border ?? "#303236",
+        text: customTheme.text ?? "#f8f8f8",
+        grey: customTheme.grey ?? "#aaa",
         error: "#f33",
         success: "#44d944",
         info: "#427ee1",
-        border: "#303236",
       };
   }
 };
@@ -169,13 +169,17 @@ const SqTracker = ({ Component, pageProps, initialTheme }) => {
 
   const {
     publicRuntimeConfig: {
-      SQ_THEME_COLOUR,
+      SQ_CUSTOM_THEME,
       SQ_SITE_WIDE_FREELEECH,
       SQ_API_URL,
       SQ_MINIMUM_RATIO,
     },
   } = getConfig();
 
+  const allowThemeToggle = !Object.keys(SQ_CUSTOM_THEME ?? {}).some(
+    (key) => key !== "primary"
+  );
+
   const setThemeAndSave = (theme) => {
     setTheme(theme);
     setCookie("theme", theme, {
@@ -193,12 +197,14 @@ const SqTracker = ({ Component, pageProps, initialTheme }) => {
       setIsMobile(matches);
     });
 
-    const { theme: themeCookie } = cookies;
-    const themeQuery = window.matchMedia("(prefers-color-scheme: light)");
-    if (!themeCookie) setThemeAndSave(themeQuery.matches ? "light" : "dark");
-    themeQuery.addEventListener("change", ({ matches }) => {
-      setThemeAndSave(matches ? "light" : "dark");
-    });
+    if (allowThemeToggle) {
+      const { theme: themeCookie } = cookies;
+      const themeQuery = window.matchMedia("(prefers-color-scheme: light)");
+      if (!themeCookie) setThemeAndSave(themeQuery.matches ? "light" : "dark");
+      themeQuery.addEventListener("change", ({ matches }) => {
+        setThemeAndSave(matches ? "light" : "dark");
+      });
+    }
 
     Router.events.on("routeChangeStart", () => setLoading(true));
     Router.events.on("routeChangeComplete", () => setLoading(false));
@@ -226,7 +232,7 @@ const SqTracker = ({ Component, pageProps, initialTheme }) => {
 
   const appTheme = {
     ...baseTheme,
-    colors: getThemeColours(theme, SQ_THEME_COLOUR),
+    colors: getThemeColours(theme, SQ_CUSTOM_THEME),
     name: theme,
   };
 
@@ -353,22 +359,24 @@ const SqTracker = ({ Component, pageProps, initialTheme }) => {
                         ref={searchRef}
                       />
                     </Box>
-                    <Button
-                      variant="secondary"
-                      onClick={() => {
-                        setThemeAndSave(theme === "light" ? "dark" : "light");
-                      }}
-                      width="40px"
-                      px={2}
-                      py={2}
-                      ml={3}
-                    >
-                      {theme === "light" ? (
-                        <Sun size={24} />
-                      ) : (
-                        <Moon size={24} />
-                      )}
-                    </Button>
+                    {allowThemeToggle && (
+                      <Button
+                        variant="secondary"
+                        onClick={() => {
+                          setThemeAndSave(theme === "light" ? "dark" : "light");
+                        }}
+                        width="40px"
+                        px={2}
+                        py={2}
+                        ml={3}
+                      >
+                        {theme === "light" ? (
+                          <Sun size={24} />
+                        ) : (
+                          <Moon size={24} />
+                        )}
+                      </Button>
+                    )}
                   </Box>
                 )}
               </Box>

config.example.js

@@ -9,8 +9,18 @@ module.exports = {
     // A short description of your tracker site. Maximum 80 characters.
     SQ_SITE_DESCRIPTION: "A short description for your tracker site",
 
-    // A hex colour code used as the main theme colour of your site.
-    SQ_THEME_COLOUR: "#f45d48",
+    // A map of custom hex colours to use as the theme of your site.
+    // If not specified, the default light and dark themes will be used.
+    // If only "primary" is specified, the default light and dark themes will be used but with your main brand colour.
+    // If the other values are specified, the fully custom theme will be used and not the default light/dark.
+    SQ_CUSTOM_THEME: {
+      primary: "#f45d48",
+      // background: "#1f2023", // Page background colour
+      // sidebar: "#27282b",    // A secondary background colour, used for sidebar, infoboxes etc.
+      // border: "#303236",     // Border colour
+      // text: "#f8f8f8",       // Text colour. Should be readable against background and sidebar
+      // grey: "#aaa",          // Secondary text colour, used for less important text
+    },
 
     // Registration mode. Either "open", "invite" or "closed".
     // Open: anyone can register.