theme

2025-11-11 22:38:40 +01:00
parent 1111784caa
commit b987bdacfe
3 changed files with 246 additions and 48 deletions
@@ -195,6 +195,12 @@ const Sidebar = ({
    neutralHue,
    setNeutralHue,
    resetNeutralHue,
+    neutralChroma,
+    setNeutralChroma,
+    resetNeutralChroma,
+    neutralContrast,
+    setNeutralContrast,
+    resetNeutralContrast,
    themeMode,
    cycleThemeMode,
    themeModes,
@@ -204,6 +210,8 @@ const Sidebar = ({
    setCollapsed(true);
  }, [setCollapsed]);
  const neutralHueInputId = useId();
+  const neutralChromaInputId = useId();
+  const neutralContrastInputId = useId();
  const sortedCorrespondents = useMemo(() => {
    if (!Array.isArray(correspondents)) {
      return [];
@@ -281,9 +289,11 @@ const Sidebar = ({
    [onUploadFiles, selectedFolder],
  );

-  const handleNeutralHueReset = useCallback(() => {
+  const handleThemeAdjustmentsReset = useCallback(() => {
    resetNeutralHue();
-  }, [resetNeutralHue]);
+    resetNeutralChroma();
+    resetNeutralContrast();
+  }, [resetNeutralHue, resetNeutralChroma, resetNeutralContrast]);

  const handleNeutralHueChange = useCallback(
    (value) => {
@@ -300,6 +310,44 @@ const Sidebar = ({
    [resetNeutralHue, setNeutralHue],
  );

+  const handleNeutralChromaChange = useCallback(
+    (value) => {
+      if (value === '') {
+        resetNeutralChroma();
+        return;
+      }
+      const parsed = Number(value);
+      if (Number.isNaN(parsed)) {
+        return;
+      }
+      setNeutralChroma(parsed);
+    },
+    [resetNeutralChroma, setNeutralChroma],
+  );
+
+  const handleNeutralContrastChange = useCallback(
+    (value) => {
+      if (value === '') {
+        resetNeutralContrast();
+        return;
+      }
+      const parsed = Number(value);
+      if (Number.isNaN(parsed)) {
+        return;
+      }
+      setNeutralContrast(parsed);
+    },
+    [resetNeutralContrast, setNeutralContrast],
+  );
+
+  const formatSliderValue = useCallback((value) => {
+    const parsed = Number(value);
+    if (Number.isNaN(parsed)) {
+      return value;
+    }
+    return parsed.toFixed(2);
+  }, []);
+
  const themeModeList = themeModes && themeModes.length ? themeModes : THEME_MODES;
  const themeModeIndex = themeModeList.indexOf(themeMode);
  const safeThemeModeIndex = themeModeIndex === -1 ? 0 : themeModeIndex;
@@ -336,9 +384,9 @@ const Sidebar = ({
                <button
                  type="button"
                  className="icon-button"
-                  onClick={handleNeutralHueReset}
-                  aria-label="Reset neutral hue"
-                  title="Reset neutral hue"
+                  onClick={handleThemeAdjustmentsReset}
+                  aria-label="Reset theme adjustments"
+                  title="Reset theme adjustments"
                >
                  <RestoreIcon size={16} />
                </button>
@@ -354,9 +402,38 @@ const Sidebar = ({
                step="1"
                value={neutralHue}
                onChange={(event) => handleNeutralHueChange(event.target.value)}
+                onDoubleClick={resetNeutralHue}
              />
              <span className="menu__slider-value">{neutralHue}°</span>
            </label>
+            <label className="menu__slider" htmlFor={neutralChromaInputId}>
+              <span className="menu__slider-label">Chroma</span>
+              <input
+                id={neutralChromaInputId}
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                value={neutralChroma}
+                onChange={(event) => handleNeutralChromaChange(event.target.value)}
+                onDoubleClick={resetNeutralChroma}
+              />
+              <span className="menu__slider-value">{formatSliderValue(neutralChroma)}</span>
+            </label>
+            <label className="menu__slider" htmlFor={neutralContrastInputId}>
+              <span className="menu__slider-label">Contrast</span>
+              <input
+                id={neutralContrastInputId}
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                value={neutralContrast}
+                onChange={(event) => handleNeutralContrastChange(event.target.value)}
+                onDoubleClick={resetNeutralContrast}
+              />
+              <span className="menu__slider-value">{formatSliderValue(neutralContrast)}</span>
+            </label>
          </div>
        )
      : null;