feat: add setting to follow the system theme

.github/workflows/build-tauri.yml

@@ -18,7 +18,7 @@ jobs:
     strategy:
       matrix:
         include:
-          - os: ubuntu-22.04
+          - os: ubuntu-latest
             name: linux
             # https://tauri.app/v1/guides/building/linux#cross-compiling-tauri-applications-for-arm-based-devices
             # Cross Compiling is also more of a pain it seems for linux atm, explore later
@@ -57,10 +57,10 @@ jobs:
         with:
           workspaces: "./app/tauri -> target"
       - name: install dependencies (ubuntu only)
-        if: matrix.os == 'ubuntu-22.04'
+        if: matrix.os == 'ubuntu-latest'
         run: |
           sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1 build-essential curl wget file libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev javascriptcoregtk-4.1
+          sudo apt-get install -y libwebkit2gtk-4.1 build-essential curl wget file libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev javascriptcoregtk-4.1 libglib2.0-dev
       - name: Install NPM Packages
         run: |
           yarn install --immutable --network-timeout 120000
@@ -87,7 +87,7 @@ jobs:
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
           APPLE_PROVIDER_SHORT_NAME: ${{ secrets.APPLE_PROVIDER_SHORT_NAME }}
       # Possibly set up some basic unit testing just to make sure parts render and none of the libraries are straight up breaking
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: tauri-${{ matrix.name }}
           path: |
@@ -130,7 +130,7 @@ jobs:
           cache: "yarn"
       - name: Generate updater file
         run: node app/tauri/release-prep/release-prep.js
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: tauri-release
           path: |

.github/workflows/build.yml

@@ -26,7 +26,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup node
         uses: actions/setup-node@v3
         with:
@@ -62,40 +62,40 @@ jobs:
           sudo snap install snapcraft --classic
           yarn lerna run build:snap --stream
       - name: Upload windows all-in-one build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: built-app-all-in-one-${{ matrix.name }}
           path: |
             app/electron/dist/Pomatez-v+([0-9]).+([0-9]).+([0-9])-win-*.exe
       - name: Upload ia32 builds
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: built-app-ia32-${{ matrix.name }}
           path: |
             app/electron/dist/Pomatez*ia32*.*
       - name: Upload x64 builds
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: built-app-x64-${{ matrix.name }}
           path: |
             app/electron/dist/Pomatez*x64*.*
             app/electron/dist/Pomatez*x86_64*.*
             app/electron/dist/Pomatez*amd64*.*
       - name: Upload arm64 builds
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: built-app-arm64-${{ matrix.name }}
           path: |
             app/electron/dist/Pomatez*arm64*.*
             app/electron/dist/Pomatez*aarch64*.*
       - name: Upload armv7l builds
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: built-app-armv7l-${{ matrix.name }}
           path: |
             app/electron/dist/Pomatez*armv7l*.*
       - name: Upload autoupdaters
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: built-app-AutoUpdater-${{ matrix.name }}
           path: |

.github/workflows/codeql-analysis.yml

@@ -39,11 +39,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -54,7 +54,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -68,4 +68,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

.github/workflows/pre-commit-check.yml

@@ -11,10 +11,10 @@ concurrency:
 jobs:
   pre-commit-check:
     name: Run pre-commit checks
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -28,14 +28,14 @@ jobs:
 
       # run only if changed files were detected
       - name: Run against changes
-        uses: pre-commit/action@v2.0.3
+        uses: pre-commit/action@v3.0.1
         if: steps.filter.outputs.addedOrModified == 'true'
         with:
           extra_args: --files ${{ steps.filter.outputs.addedOrModified_files }}
 
       # run if no changed files were detected (e.g. workflow_dispatch on master branch)
       - name: Run against all files
-        uses: pre-commit/action@v2.0.3
+        uses: pre-commit/action@v3.0.1
         if: steps.filter.outputs.addedOrModified != 'true'
         with:
           extra_args: --all-files

.github/workflows/website-deploy.yml

@@ -6,7 +6,7 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js 18.x
         uses: actions/setup-node@v2
         with:

app/renderer/package.json

@@ -46,7 +46,7 @@
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^16.9.19",
     "@types/react-redux": "^7.1.9",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.2",
     "autosize": "^4.0.4",
     "is-electron": "^2.2.0",

app/renderer/src/components/Toggler.tsx

@@ -9,6 +9,7 @@ export type TogglerProps = {
   id: string;
   label: string;
   checked: boolean;
+  disabled?: boolean;
   onChange?:
     | ((event: React.ChangeEvent<HTMLInputElement>) => void)
     | undefined;
@@ -19,6 +20,7 @@ const Toggler: React.FC<TogglerProps> = ({
   id,
   label,
   checked,
+  disabled,
   onChange,
   style,
 }) => {
@@ -28,6 +30,7 @@ const Toggler: React.FC<TogglerProps> = ({
       <StyledTogglerSwitch
         type="checkbox"
         id={id}
+        disabled={disabled}
         checked={checked}
         onChange={onChange}
       />

app/renderer/src/contexts/ConnnectorContext.tsx

@@ -36,5 +36,5 @@ export const ConnectorProvider: React.FC = ({ children }) => {
     Connector = TauriConnectorProvider;
   }
 
-  return <Connector children={children} />;
+  return <Connector>{children}</Connector>;
 };

app/renderer/src/contexts/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { isPreferredDark } from "utils";
 import { GlobalStyles } from "styles";
 import { useAppDispatch, useAppSelector } from "hooks/storeHooks";
@@ -24,6 +24,21 @@ const ThemeProvider: React.FC = ({ children }) => {
     dispatch(setEnableDarkTheme(!settings.enableDarkTheme));
   };
 
+  useEffect(() => {
+    if (!settings.followSystemTheme) return;
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = (e: MediaQueryListEvent) => {
+      dispatch(setEnableDarkTheme(e.matches));
+    };
+    // Ensure theme matches current system theme
+    dispatch(setEnableDarkTheme(media.matches));
+    media.addEventListener("change", listener);
+    return () => {
+      media.removeEventListener("change", listener);
+    };
+  }, [dispatch, settings.followSystemTheme]);
+
   return (
     <ThemeContext.Provider
       value={{

app/renderer/src/routes/Settings/FeatureSection.tsx

@@ -13,6 +13,7 @@ import {
   setEnableVoiceAssistance,
   setEnableCompactMode,
   setOpenAtLogin,
+  setFollowSystemTheme,
 } from "store";
 import { Toggler, TogglerProps, Collapse, Radio } from "components";
 import { ThemeContext } from "contexts";
@@ -67,12 +68,21 @@ const FeatureSection: React.FC = () => {
       id: "dark-theme",
       label: "Dark Theme",
       checked: isDarkMode,
+      disabled: settings.followSystemTheme,
       onChange: () => {
         if (toggleThemeAction) {
           toggleThemeAction();
         }
       },
     },
+    {
+      id: "follow-system-theme",
+      label: "Follow System Theme",
+      checked: settings.followSystemTheme,
+      onChange: useCallback(() => {
+        dispatch(setFollowSystemTheme(!settings.followSystemTheme));
+      }, [dispatch, settings.followSystemTheme]),
+    },
     {
       id: "native-titlebar",
       label: "Native Titlebar",
@@ -152,12 +162,16 @@ const FeatureSection: React.FC = () => {
   return (
     <SettingSection heading="App Features">
       {featureList.map(
-        ({ id, label, checked, onChange, ...rest }, index) => (
+        (
+          { id, label, checked, onChange, disabled = false, ...rest },
+          index
+        ) => (
           <Toggler
             id={id}
             key={index}
             label={label}
             checked={checked}
+            disabled={disabled}
             onChange={onChange}
             {...rest}
           />

app/renderer/src/store/settings/defaultSettings.ts

@@ -8,6 +8,7 @@ export const defaultSettings: Readonly<SettingTypes> = Object.freeze({
   enableFullscreenBreak: false,
   enableStrictMode: false,
   enableDarkTheme: isPreferredDark(),
+  followSystemTheme: true,
   enableProgressAnimation: true,
   enableVoiceAssistance: false,
   notificationSoundOn: true,

app/renderer/src/store/settings/index.ts

@@ -5,9 +5,35 @@ import { defaultSettings } from "./defaultSettings";
 
 export type { SettingTypes };
 
-const settings =
-  (getFromStorage("state") && getFromStorage("state").settings) ||
-  defaultSettings;
+function mergeSettings(
+  base: SettingTypes,
+  override: Partial<SettingTypes>
+): SettingTypes {
+  const merged: any = { ...base };
+
+  for (const key in base) {
+    if (
+      typeof base[key] === "object" &&
+      base[key] !== null &&
+      !Array.isArray(base[key])
+    ) {
+      merged[key] = mergeSettings(
+        base[key],
+        (override?.[key] as any) || {}
+      );
+    } else {
+      merged[key] = override?.[key] ?? base[key];
+    }
+  }
+  return merged as SettingTypes;
+}
+
+const settings = mergeSettings(
+  defaultSettings,
+  getFromStorage("state") && getFromStorage("state").settings
+);
+
+console.log("settings", settings);
 
 const initialState: SettingTypes = settings;
 
@@ -34,6 +60,13 @@ const settingsSlice = createSlice({
       state.enableDarkTheme = action.payload;
     },
 
+    setFollowSystemTheme(
+      state,
+      action: SettingsPayload<"followSystemTheme">
+    ) {
+      state.followSystemTheme = action.payload;
+    },
+
     setEnableCompactMode(
       state,
       action: SettingsPayload<"compactMode">
@@ -118,6 +151,7 @@ export const {
   setCloseToTray,
   setEnableCompactMode,
   setEnableDarkTheme,
+  setFollowSystemTheme,
   setEnableFullscreenBreak,
   setEnableProgressAnimation,
   setEnableStrictMode,

app/renderer/src/store/settings/types.ts

@@ -6,6 +6,7 @@ export type SettingTypes = {
   compactMode: boolean;
   enableFullscreenBreak: boolean;
   enableDarkTheme: boolean;
+  followSystemTheme: boolean;
   enableStrictMode: boolean;
   enableProgressAnimation: boolean;
   enableVoiceAssistance: boolean;

app/renderer/src/styles/components/toggler.ts

@@ -40,6 +40,8 @@ export const StyledTogglerSwitch = styled.input`
 
   position: relative;
 
+  transition: opacity 0.15s;
+
   &::before,
   &::after {
     content: "";
@@ -88,6 +90,10 @@ export const StyledTogglerSwitch = styled.input`
     box-shadow: 0 0 0 0.6rem rgba(var(--color-primary-rgb), 0.24);
   }
 
+  &:disabled {
+    opacity: 0.2;
+  }
+
   &:checked::before {
     background-color: var(--color-primary);
   }

app/tauri/Cargo.toml

@@ -3,7 +3,7 @@ name = "pomatez"
 # In the current version of release please, unless the toml file is in the root of the project it cannot be updated.
 # https://github.com/googleapis/release-please/issues/1724
 # util/cargo-version-updater.js will run to keep this value up to date before rust builds.
-version = "1.7.0"
+version = "1.7.2"
 description = "Attractive pomodoro timer for Windows, Mac, and Linux."
 authors = ["Roldan Montilla Jr"]
 license = "MIT"