Add option to change the luminosity depending on the time of day

src/db/action.ts

@@ -15,7 +15,7 @@ export const setBackground = (key: string): void => {
   DB.put(db, "background", {
     id,
     key,
-    display: { blur: 0, luminosity: -0.2 },
+    display: { blur: 0, luminosity: -0.2, nightDim: false },
   });
   DB.del(db, `data/${current.id}`);
   DB.del(cache, current.id);

src/db/state.ts

@@ -28,6 +28,7 @@ export interface BackgroundState {
 export interface BackgroundDisplay {
   blur?: number;
   luminosity?: number;
+  nightDim?: boolean;
 }
 
 export interface WidgetState {
@@ -64,6 +65,7 @@ const initData: State = {
     display: {
       luminosity: -0.2,
       blur: 0,
+      nightDim: false,
     },
   },
   "widget/default-time": {

src/hooks/index.ts

@@ -8,3 +8,4 @@ export * from "./useObjectUrl";
 export * from "./useSavedReducer";
 export * from "./useTime";
 export * from "./useToggle";
+export * from "./useIsNight";

src/hooks/useIsNight.ts

@@ -0,0 +1,9 @@
+import { useTime } from "./useTime";
+
+export function useIsNight() {
+  const time = useTime();
+  const currentHour = time.getHours();
+
+  // Return true if the current hour is between 9 PM (21:00) and 5 AM (05:00)
+  return currentHour >= 21 || currentHour < 5;
+}

src/views/dashboard/Dashboard.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { db } from "../../db/state";
+import { useIsNight } from "../../hooks";
 import { useValue } from "../../lib/db/react";
 import Background from "./Background";
 import "./Dashboard.sass";
@@ -8,7 +9,12 @@ import Widgets from "./Widgets";
 
 const Dashboard: React.FC = () => {
   const background = useValue(db, "background");
-  const theme = (background.display.luminosity ?? 0) > 0 ? "light" : "dark";
+  const isNight = useIsNight();
+  const theme =
+    (background.display.luminosity ?? 0) > 0 &&
+    !(background.display.nightDim && isNight)
+      ? "light"
+      : "dark";
 
   // Set init theme for pre settings load (see `target/<target>/index.html`)
   React.useEffect(() => {

src/views/settings/Background.tsx

@@ -95,6 +95,19 @@ const Background: React.FC = () => {
                     <option value="1" label="Lighten" />
                   </datalist>
                 </label>
+
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={data.display.nightDim}
+                    onChange={(e) => {
+                      setBackgroundDisplay({
+                        nightDim: e.target.checked,
+                      });
+                    }}
+                  />{" "}
+                  Automatically dim at night
+                </label>
               </>
             </ToggleSection>
           )}

src/views/shared/Backdrop.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { db } from "../../db/state";
 import { useValue } from "../../lib/db/react";
+import { useIsNight } from "../../hooks";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   ready?: boolean;
@@ -21,7 +22,8 @@ const Backdrop: React.FC<Props> = ({
   const focus = useValue(db, "focus");
   // TODO: Consider passing display in via prop
   const background = useValue(db, "background");
-  const { blur, luminosity = 0 } = background.display;
+  const { blur, luminosity = 0, nightDim } = background.display;
+  const isNight = useIsNight();
 
   style = { ...style };
 
@@ -30,8 +32,12 @@ const Backdrop: React.FC<Props> = ({
     style["transform"] = `scale(${blur / 500 + 1})`;
   }
 
-  if (luminosity && !focus) {
-    style["opacity"] = 1 - Math.abs(luminosity);
+  if (luminosity !== null && !focus) {
+    if (nightDim && isNight) {
+      style["opacity"] = (luminosity + 1) / 2;
+    } else {
+      style["opacity"] = 1 - Math.abs(luminosity);
+    }
   }
 
   return (