Merge pull request #386 from treyg/global-theming-2.4

Global theming support

.github/SECURITY.md

@@ -1,17 +1,19 @@
-# Security Policy
+# Security
 
-## Supported Versions
+The Linkwarden team and community take security bugs in Linkwarden seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
 
-| Version | Supported |
+# Reporting Security Issues
-| ------- | --------- |
-| 1.x.x   | ✅        |
 
-## Reporting a Vulnerability
+**Please do not report security vulnerabilities through public GitHub issues.**
 
-First off, we really appreciate the time you spent!
+Instead, please use the GitHub Security Advisory ["Report a Vulnerability"](https://github.com/linkwarden/linkwarden/security/advisories/new) tab.
 
-If you found a vulnerability, these are the ways you can reach us:
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message:
+[security@linkwarden.app](mailto:security@linkwarden.app)
 
-Email: [security@linkwarden.app](mailto:security@linkwarden.app)
 
-Or you can directly DM me via Twitter: [@daniel31x13](https://twitter.com/Daniel31X13).
+After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.
+
+# Preferred Languages
+
+We prefer all communications to be in English.

README.md

@@ -27,17 +27,21 @@ Additionally, Linkwarden is designed with collaboration in mind, sharing links w
 <img src="./assets/dashboard.png" />
 
 <div align="center">
-<img src="./assets/all_links.png" width="32%" />
+<img src="./assets/all_links.jpg" width="23%" />
 
-<img src="./assets/all_collections.png" width="32%" />
+<img src="./assets/list_view.jpg" width="23%" />
 
-<img src="./assets/manage_team.png" width="32%" />
+<img src="./assets/all_collections.jpg" width="23%" />
 
-<img src="./assets/readable_view.png" width="32%" />
+<img src="./assets/manage_team.jpg" width="23%" />
 
-<img src="./assets/public_page.png" width="32%" />
+<img src="./assets/readable_view.jpg" width="23%" />
 
-<img src="./assets/light_mode.png" width="32%" />
+<img src="./assets/preserved_formats.jpg" width="23%" />
+
+<img src="./assets/public_page.jpg" width="23%" />
+
+<img src="./assets/light_dashboard.jpg" width="23%" />
 </div>
 
 <details>

components/Navbar.tsx

@@ -26,13 +26,13 @@ export default function Navbar() {
   const { width } = useWindowDimensions();
 
   const handleToggle = () => {
-    if (settings.theme === "dark") {
+    const [colorTheme, mode] = (settings.theme || "default-light").split('-');
-      updateSettings({ theme: "light" });
+    const newMode = mode === "dark" ? "light" : "dark";
-    } else {
+    const newTheme = `${colorTheme}-${newMode}`;
-      updateSettings({ theme: "dark" });
+    updateSettings({ theme: newTheme });
-    }
   };
   
+
   useEffect(() => {
     setSidebar(false);
   }, [width]);
@@ -143,7 +143,7 @@ export default function Navbar() {
                     tabIndex={0}
                     role="button"
                     >
-                Switch to {settings.theme === "light" ? "Dark" : "Light"}
+                    Switch to {(settings.theme || "default-light").endsWith("-dark") ? "Light" : "Dark"}
                 </div>
             </li>
             <li>

components/ToggleDarkMode.tsx

@@ -6,32 +6,39 @@ type Props = {
 };
 
 export default function ToggleDarkMode({ className }: Props) {
-  const { settings, updateSettings } = useLocalSettingsStore();
+   const { updateSettings } = useLocalSettingsStore();
-
+   const [theme, setTheme] = useState('default-light');
-  const [theme, setTheme] = useState(localStorage.getItem("theme"));
-
-  const handleToggle = (e: any) => {
-    setTheme(e.target.checked ? "dark" : "light");
-  };
 
    useEffect(() => {
-    updateSettings({ theme: theme as string });
+      const storedTheme = localStorage.getItem("theme");
-  }, [theme]);
+      if (storedTheme) {
+         setTheme(storedTheme);
+      } else {
+         // Default theme if not set in localStorage
+         localStorage.setItem("theme", "default-light");
+         setTheme("default-light");
+      }
+      console.log("Initial theme from localStorage:", storedTheme || "default-light");
+   }, []);
+
+   const handleToggle = () => {
+      const [currentColorTheme, currentMode] = theme.split('-');
+      const newMode = currentMode === 'light' ? 'dark' : 'light';
+      const newTheme = `${currentColorTheme}-${newMode}`;
+
+      setTheme(newTheme);
+      localStorage.setItem("theme", newTheme);
+      document.documentElement.setAttribute('data-theme', newTheme);
+      updateSettings({ theme: newTheme });
+      console.log("New theme set:", newTheme);
+   };
+
+   const isDarkMode = theme.endsWith('-dark');
 
    return (
-    <div
+      <div className="tooltip tooltip-bottom" data-tip={`Switch to ${isDarkMode ? "Light" : "Dark"}`}>
-      className="tooltip tooltip-bottom"
+         <label className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}>
-      data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
+            <input type="checkbox" onChange={handleToggle} className="theme-controller" checked={isDarkMode} />
-    >
-      <label
-        className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}
-      >
-        <input
-          type="checkbox"
-          onChange={handleToggle}
-          className="theme-controller"
-          checked={localStorage.getItem("theme") === "light" ? false : true}
-        />
             <i className="bi-sun-fill text-xl swap-on"></i>
             <i className="bi-moon-fill text-xl swap-off"></i>
          </label>

docker-compose.yml

@@ -11,7 +11,8 @@ services:
     environment:
       - DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgres:5432/postgres
     restart: always
-    image: ghcr.io/linkwarden/linkwarden:latest
+    # build: . # uncomment this line to build from source
+    image: ghcr.io/linkwarden/linkwarden:latest # comment this line to build from source
     ports:
       - 3000:3000
     volumes:

lib/api/archiveHandler.ts

@@ -50,11 +50,11 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
         let imageExtension = "png";
 
         if (!link.url) linkType = link.type;
-        else if (contentType === "application/pdf") linkType = "pdf";
+        else if (contentType?.includes("application/pdf")) linkType = "pdf";
         else if (contentType?.startsWith("image")) {
           linkType = "image";
-          if (contentType === "image/jpeg") imageExtension = "jpeg";
+          if (contentType.includes("image/jpeg")) imageExtension = "jpeg";
-          else if (contentType === "image/png") imageExtension = "png";
+          else if (contentType.includes("image/png")) imageExtension = "png";
         }
 
         const user = link.collection?.owner;

package.json

@@ -39,6 +39,7 @@
     "crypto-js": "^4.2.0",
     "csstype": "^3.1.2",
     "dompurify": "^3.0.6",
+    "dotenv": "^16.3.1",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.9",
     "formidable": "^3.5.1",

pages/_app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "@/styles/globals.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import { SessionProvider } from "next-auth/react";
@@ -14,6 +14,18 @@ export default function App({
 }: AppProps<{
    session: Session;
 }>) {
+
+   useEffect(() => {
+      let theme = localStorage.getItem("theme");
+      if (!theme || !theme.includes("-")) {
+         theme = "default-dark"; // Default theme
+         localStorage.setItem("theme", theme);
+      }
+
+      document.documentElement.setAttribute('data-theme', theme);
+   }, []);
+
+
    return (
       <SessionProvider
          session={pageProps.session}

pages/collections/[id].tsx

@@ -104,8 +104,10 @@ export default function Index() {
       className="h-[60rem] p-5 flex gap-3 flex-col"
       style={{
          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
-            settings.theme === "dark" ? "#262626" : "#f3f4f6"
+            (settings.theme || "default-light").endsWith("-dark") ? "#262626" : "#f3f4f6"
-          } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+         } 13rem, ${
+            (settings.theme || "default-light").endsWith("-dark") ? "#171717" : "#ffffff"
+         } 100%)`,
       }}
       >
         {activeCollection && (

pages/dashboard.tsx

@@ -155,7 +155,7 @@ export default function Dashboard() {
                </div>
                <Link
                   href="/links"
-            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
+                  className="flex items-center text-sm text-neutral gap-2 cursor-pointer"
                >
                   View All
                   <i className="bi-chevron-right text-sm"></i>
@@ -264,7 +264,7 @@ export default function Dashboard() {
                </div>
                <Link
                   href="/links/pinned"
-            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
+                  className="flex items-center text-sm text-neutral gap-2 cursor-pointer"
                >
                   View All
                   <i className="bi-chevron-right text-sm "></i>

pages/settings/appearance.tsx

@@ -1,16 +1,16 @@
+
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState, useEffect } from "react";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
-import React from "react";
 import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Appearance() {
    const { updateSettings } = useLocalSettingsStore();
+   const { account, updateAccount } = useAccountStore();
    const submit = async () => {
     setSubmitLoader(true);
-
     const load = toast.loading("Applying...");
     
     const response = await updateAccount({
@@ -18,17 +18,12 @@ export default function Appearance() {
     });
 
     toast.dismiss(load);
-
     if (response.ok) {
        toast.success("Settings Applied!");
     } else toast.error(response.data as string);
         setSubmitLoader(false);
  };
-
    const [submitLoader, setSubmitLoader] = useState(false);
-
-  const { account, updateAccount } = useAccountStore();
-
    const [user, setUser] = useState<AccountSettings>(
       !objectIsEmpty(account)
          ? account
@@ -48,6 +43,9 @@ export default function Appearance() {
          } as unknown as AccountSettings)
    );
 
+   // Combine colorTheme and mode into a single state
+   const [theme, setTheme] = useState(localStorage.getItem("theme") || "default-dark");
+
    function objectIsEmpty(obj: object) {
       return Object.keys(obj).length === 0;
    }
@@ -56,51 +54,72 @@ export default function Appearance() {
       if (!objectIsEmpty(account)) setUser({ ...account });
    }, [account]);
 
+   const handleThemeChange = (newThemePart: string, isColorTheme: boolean) => {
+      const currentTheme = localStorage.getItem("theme") || "default-light";
+      const [currentColorTheme, currentMode] = currentTheme.split('-');
+      const newTheme = isColorTheme ? `${newThemePart}-${currentMode}` : `${currentColorTheme}-${newThemePart}`;
+
+      localStorage.setItem("theme", newTheme);
+      document.documentElement.setAttribute('data-theme', newTheme);
+      updateSettings({ theme: newTheme });
+
+      // Update the theme state
+      setTheme(newTheme);
+   };
+
+
+
+
+
    return (
       <SettingsLayout>
          <p className="capitalize text-3xl font-thin inline">Appearance</p>
-
          <div className="divider my-3"></div>
 
          <div className="flex flex-col gap-5">
+
             <div>
-          <p className="mb-3">Select Theme</p>
+               <p className="mb-3">Select Mode</p>
-          <div className="flex gap-3 w-full">
+               <div className="grid grid-cols-2 gap-3">
-            <div
+                  {["light", "dark"].map((modeOption) => (
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+                     <button
-                localStorage.getItem("theme") === "dark"
+                        key={modeOption}
-                  ? "dark:outline-primary text-primary"
+                        onClick={() => handleThemeChange(modeOption, false)}
-                  : "text-white"
+                        className={`w-full text-center h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none ${theme.endsWith(modeOption) ? "ring-2 ring-primary" : "ring-2 ring-neutral"}`}
-              }`}
-              onClick={() => updateSettings({ theme: "dark" })}
                      >
-              <i className="bi-moon-fill text-6xl"></i>
+                        {modeOption === 'light' ?
-              <p className="ml-2 text-2xl">Dark</p>
+                           <i className={`bi-sun-fill text-6xl ${theme.endsWith(modeOption) ? "text-primary" : ""}`}></i> :
-
+                           <i className={`bi-moon-fill text-6xl ${theme.endsWith(modeOption) ? "text-primary" : ""}`}></i>}
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
+                        <p className="ml-2 text-2xl">{modeOption.charAt(0).toUpperCase() + modeOption.slice(1)}</p>
-            </div>
+                     </button>
-            <div
+                  ))}
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
-                localStorage.getItem("theme") === "light"
-                  ? "outline-primary text-primary"
-                  : "text-black"
-              }`}
-              onClick={() => updateSettings({ theme: "light" })}
-            >
-              <i className="bi-sun-fill text-6xl"></i>
-              <p className="ml-2 text-2xl">Light</p>
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
-            </div>
                </div>
             </div>
 
-        {/* <SubmitButton
+            <div>
+               <p className="mb-3">Select Color Theme</p>
+               <div className="grid grid-cols-4 gap-3">
+                  {["default", "red", "green", "orange"].map((colorTheme) => (
+                     <button
+                        key={colorTheme}
+                        onClick={() => handleThemeChange(colorTheme, true)}
+                        className={`w-full text-center h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none ${theme.startsWith(colorTheme) ? "ring-2 ring-primary" : "ring-2 ring-neutral"}`}
+                     >
+                        {colorTheme.charAt(0).toUpperCase() + colorTheme.slice(1)}
+                     </button>
+                  ))}
+               </div>
+            </div>
+
+            <button
                onClick={submit}
-          loading={submitLoader}
+               disabled={submitLoader}
-          label="Save"
+               className="mt-2 mx-auto lg:mx-0 bg-primary text-white rounded-md px-4 py-2"
-          className="mt-2 mx-auto lg:mx-0"
+            >
-        /> */}
+               {submitLoader ? "Saving..." : "Save"}
+            </button>
          </div>
       </SettingsLayout>
    );
 }
+

scripts/worker.ts

@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import { Collection, Link, User } from "@prisma/client";
 import { prisma } from "../lib/api/db";
 import archiveHandler from "../lib/api/archiveHandler";

store/localSettings.ts

@@ -18,34 +18,39 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
     viewMode: "",
   },
   updateSettings: async (newSettings) => {
-    if (
+    if (newSettings.theme) {
-      newSettings.theme &&
-      newSettings.theme !== localStorage.getItem("theme")
-    ) {
       localStorage.setItem("theme", newSettings.theme);
+      document.documentElement.setAttribute('data-theme', newSettings.theme);
       
-      const localTheme = localStorage.getItem("theme") || "";
+      if (newSettings.theme.endsWith("-dark")) {
-
+        document.documentElement.classList.add("dark");
-      document.querySelector("html")?.setAttribute("data-theme", localTheme);
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
     }
 
-    if (
+    if (newSettings.viewMode) {
-      newSettings.viewMode &&
-      newSettings.viewMode !== localStorage.getItem("viewMode")
-    ) {
       localStorage.setItem("viewMode", newSettings.viewMode);
-
-      // const localTheme = localStorage.getItem("viewMode") || "";
     }
 
     set((state) => ({ settings: { ...state.settings, ...newSettings } }));
   },
   setSettings: async () => {
-    if (!localStorage.getItem("theme")) {
+    let theme = localStorage.getItem("theme");
-      localStorage.setItem("theme", "dark");
+    if (!theme || !theme.includes("-")) {
+      theme = "default-dark"; // Default theme
+      localStorage.setItem("theme", theme);
     }
 
-    const localTheme = localStorage.getItem("theme") || "";
+    const localTheme = theme;
+
+    document.documentElement.setAttribute('data-theme', localTheme);
+
+    if (localTheme.endsWith("-dark")) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
 
     set((state) => ({
       settings: { ...state.settings, theme: localTheme },

tailwind.config.js

@@ -5,7 +5,7 @@ module.exports = {
   daisyui: {
     themes: [
       {
-        light: {
+        "default-light": {
           primary: "#0369a1",
           secondary: "#0891b2",
           accent: "#6d28d9",
@@ -21,7 +21,7 @@ module.exports = {
         },
       },
       {
-        dark: {
+        "default-dark": {
           primary: "#7dd3fc",
           secondary: "#22d3ee",
           accent: "#6d28d9",
@@ -36,6 +36,108 @@ module.exports = {
           error: "#f1293c",
         },
       },
+       // Red Light Theme
+       {
+         "red-light": {
+           primary: "#ef4444",
+           secondary: "#dc2626",
+           accent: "#6d28d9",
+           neutral: "#6b7280",
+           "neutral-content": "#d1d5db",
+           "base-100": "#ffffff",
+           "base-200": "#f3f4f6",
+           "base-content": "#0a0a0a",
+           info: "#a5f3fc",
+           success: "#22c55e",
+           warning: "#facc15",
+           error: "#dc2626",
+         },
+       },
+       // Red Dark Theme
+       {
+         "red-dark": {
+           primary: "#ef4444",
+           secondary: "#dc2626",
+           accent: "#6d28d9",
+           neutral: "#9ca3af",
+           "neutral-content": "#404040",
+           "base-100": "#171717",
+           "base-200": "#262626",
+           "base-content": "#fafafa",
+           info: "#009ee4",
+           success: "#00b17d",
+           warning: "#eac700",
+           error: "#f1293c",
+         },
+       },
+       // Green Light Theme
+       {
+         "green-light": {
+           primary: "#22c55e",
+           secondary: "#16a34a",
+           accent: "#6d28d9",
+           neutral: "#6b7280",
+           "neutral-content": "#d1d5db",
+           "base-100": "#ffffff",
+           "base-200": "#f3f4f6",
+           "base-content": "#0a0a0a",
+           info: "#a5f3fc",
+           success: "#22c55e",
+           warning: "#facc15",
+           error: "#dc2626",
+         },
+       },
+       // Green Dark Theme
+       {
+         "green-dark": {
+           primary: "#22c55e",
+           secondary: "#16a34a",
+           accent: "#6d28d9",
+           neutral: "#9ca3af",
+           "neutral-content": "#404040",
+           "base-100": "#171717",
+           "base-200": "#262626",
+           "base-content": "#fafafa",
+           info: "#009ee4",
+           success: "#00b17d",
+           warning: "#eac700",
+           error: "#f1293c",
+         },
+       },
+       // Orange Light Theme
+       {
+         "orange-light": {
+           primary: "#f97316",
+           secondary: "#ea580c",
+           accent: "#6d28d9",
+           neutral: "#9ca3af",
+           "neutral-content": "#404040",
+           "base-100": "#171717",
+           "base-200": "#262626",
+           "base-content": "#fafafa",
+           info: "#009ee4",
+           success: "#00b17d",
+           warning: "#eac700",
+           error: "#f1293c",
+         },
+       },
+       // Orange Dark Theme
+       {
+         "orange-dark": {
+           primary: "#f97316",
+           secondary: "#ea580c",
+           accent: "#6d28d9",
+           neutral: "#9ca3af",
+           "neutral-content": "#404040",
+           "base-100": "#171717",
+           "base-200": "#262626",
+           "base-content": "#fafafa",
+           info: "#009ee4",
+           success: "#00b17d",
+           warning: "#eac700",
+           error: "#f1293c",
+         },
+       },
      ],
    },
    darkMode: ["class", '[data-theme="dark"]'],
@@ -53,4 +155,5 @@ module.exports = {
        addVariant("dark", '&[data-theme="dark"]');
      }),
    ],
-};
+ };
+ 

yarn.lock

@@ -2714,6 +2714,11 @@ dompurify@^3.0.6:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.6.tgz#925ebd576d54a9531b5d76f0a5bef32548351dae"
   integrity sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"