From 30c2cdfd82ed27600d2a75bc625431168488d07a Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Sun, 12 May 2024 00:03:54 +0100
Subject: [PATCH 01/12] Create getDayProgress & getDayParameters

---
 src/utils/utils.test.ts | 54 +++++++++++++++++++++++++++++------------
 src/utils/utils.ts      | 32 ++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/src/utils/utils.test.ts b/src/utils/utils.test.ts
index 4388dd5c5..7acc38fa8 100644
--- a/src/utils/utils.test.ts
+++ b/src/utils/utils.test.ts
@@ -1,23 +1,47 @@
-import { describe, expect, test } from "vitest";
-import { getFaviconFileName } from "./utils";
-
-const TIMES = {
-  "02:03": "02_00",
-  "14:03": "02_00",
-  "02:00": "02_00",
-  "02:30": "02_30",
-  "00:00": "00_00",
-  "12:00": "00_00",
-  "02:49": "02_30",
-  "14:49": "02_30",
-  "10:49": "10_30",
-  "22:49": "10_30",
-};
+import { describe, expect, test, vi } from "vitest";
+import { getFaviconFileName, getDayProgress } from "./utils";
 
 describe("getFaviconFileName", () => {
   test("should return expected favicon file name", () => {
+    const TIMES = {
+      "02:03": "02_00",
+      "14:03": "02_00",
+      "02:00": "02_00",
+      "02:30": "02_30",
+      "00:00": "00_00",
+      "12:00": "00_00",
+      "02:49": "02_30",
+      "14:49": "02_30",
+      "10:49": "10_30",
+      "22:49": "10_30",
+    };
+
     Object.entries(TIMES).forEach(([time, fileName]) => {
       expect(getFaviconFileName(time)).toEqual(fileName);
     });
   });
 });
+
+describe("getDayProgress", () => {
+  test("should return expected progress of the day", () => {
+    vi.useFakeTimers();
+
+    const PROGRESS = {
+      "0": new Date(2024, 5, 11, 0, 0, 0),
+      "25": new Date(2024, 5, 11, 6, 0, 0),
+      "32.78": new Date(2024, 5, 11, 7, 52, 6),
+      "50": new Date(2024, 5, 11, 12, 0, 0),
+      "60.83": new Date(2024, 5, 11, 14, 36, 0),
+      "75": new Date(2024, 5, 11, 18, 0, 0),
+      "100": new Date(2024, 5, 11, 23, 59, 59),
+    };
+
+    Object.entries(PROGRESS).forEach(([progress, date]) => {
+      vi.setSystemTime(date);
+
+      expect(getDayProgress()).toEqual(parseFloat(progress));
+    });
+
+    vi.useRealTimers();
+  });
+});
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 8547be75c..005945d0e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -21,6 +21,38 @@ export function getTime() {
   );
 }
 
+export function getDayProgress() {
+  const now = new Date();
+  const seconds =
+    now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
+  const progress = (seconds * 100) / 86400;
+
+  return parseFloat(progress.toFixed(2));
+}
+
+export function getDayParameters() {
+  const progress = getDayProgress();
+  const render = progress >= 25 && progress < 75 ? "sun" : "moon";
+  const factor = progress < 50 ? 1 : -1;
+  let stage;
+
+  if (progress < 25) {
+    stage = "dawn";
+  } else if (progress >= 25 && progress < 50) {
+    stage = "sunrise";
+  } else if (progress >= 50 && progress < 75) {
+    stage = "sunset";
+  } else if (progress >= 75) {
+    stage = "dusk";
+  }
+
+  return {
+    render,
+    stage,
+    factor,
+  };
+}
+
 export function updateGHLinks(time: string, quote: Quote, locale: Locale) {
   const quoteRaw = `${quote.quote_first}${quote.quote_time_case}${quote.quote_last}`;
 

From 0d4547b0c8219816a1982785b74733ba675a4d28 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Sun, 12 May 2024 20:41:47 +0100
Subject: [PATCH 02/12] getDayParameters

---
 src/utils/utils.test.ts | 53 +++++++++++++++++++++++++++++++++--------
 src/utils/utils.ts      | 24 +++++++++----------
 2 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/utils/utils.test.ts b/src/utils/utils.test.ts
index 7acc38fa8..7efc40626 100644
--- a/src/utils/utils.test.ts
+++ b/src/utils/utils.test.ts
@@ -1,5 +1,15 @@
 import { describe, expect, test, vi } from "vitest";
-import { getFaviconFileName, getDayProgress } from "./utils";
+import { getFaviconFileName, getDayProgress, getDayParameters } from "./utils";
+
+const PROGRESS = {
+  "0": new Date(2024, 5, 11, 0, 0, 0),
+  "25": new Date(2024, 5, 11, 6, 0, 0),
+  "32.78": new Date(2024, 5, 11, 7, 52, 6),
+  "50": new Date(2024, 5, 11, 12, 0, 0),
+  "60.83": new Date(2024, 5, 11, 14, 36, 0),
+  "75": new Date(2024, 5, 11, 18, 0, 0),
+  "100": new Date(2024, 5, 11, 23, 59, 59),
+};
 
 describe("getFaviconFileName", () => {
   test("should return expected favicon file name", () => {
@@ -26,20 +36,43 @@ describe("getDayProgress", () => {
   test("should return expected progress of the day", () => {
     vi.useFakeTimers();
 
-    const PROGRESS = {
-      "0": new Date(2024, 5, 11, 0, 0, 0),
-      "25": new Date(2024, 5, 11, 6, 0, 0),
-      "32.78": new Date(2024, 5, 11, 7, 52, 6),
-      "50": new Date(2024, 5, 11, 12, 0, 0),
-      "60.83": new Date(2024, 5, 11, 14, 36, 0),
-      "75": new Date(2024, 5, 11, 18, 0, 0),
-      "100": new Date(2024, 5, 11, 23, 59, 59),
+    Object.entries(PROGRESS).forEach(([progress, date]) => {
+      vi.setSystemTime(date);
+
+      expect(getDayProgress()).toEqual(parseFloat(progress));
+    });
+
+    vi.useRealTimers();
+  });
+});
+
+describe("getDayParameters", () => {
+  test("should return expected parameters", () => {
+    const dayParameterResponse = (
+      scene: string,
+      actor: string,
+      factor: number,
+      progress: number
+    ) => ({ scene, actor, factor, progress });
+
+    const PARAMETERS = {
+      "0": dayParameterResponse("dawn", "moon", 1, 0),
+      "25": dayParameterResponse("sunrise", "sun", 1, 25),
+      "32.78": dayParameterResponse("sunrise", "sun", 1, 32.78),
+      "50": dayParameterResponse("sunset", "sun", -1, 50),
+      "60.83": dayParameterResponse("sunset", "sun", -1, 60.83),
+      "75": dayParameterResponse("dusk", "moon", -1, 75),
+      "100": dayParameterResponse("dusk", "moon", -1, 100),
     };
 
+    vi.useFakeTimers();
+
     Object.entries(PROGRESS).forEach(([progress, date]) => {
       vi.setSystemTime(date);
 
-      expect(getDayProgress()).toEqual(parseFloat(progress));
+      expect(getDayParameters()).toEqual(
+        PARAMETERS[progress as keyof typeof PARAMETERS]
+      );
     });
 
     vi.useRealTimers();
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 005945d0e..180bf9f2b 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -32,24 +32,23 @@ export function getDayProgress() {
 
 export function getDayParameters() {
   const progress = getDayProgress();
-  const render = progress >= 25 && progress < 75 ? "sun" : "moon";
+  const actor = progress >= 25 && progress < 75 ? "sun" : "moon";
   const factor = progress < 50 ? 1 : -1;
-  let stage;
+  let scene = "dawn";
 
-  if (progress < 25) {
-    stage = "dawn";
-  } else if (progress >= 25 && progress < 50) {
-    stage = "sunrise";
+  if (progress >= 25 && progress < 50) {
+    scene = "sunrise";
   } else if (progress >= 50 && progress < 75) {
-    stage = "sunset";
+    scene = "sunset";
   } else if (progress >= 75) {
-    stage = "dusk";
+    scene = "dusk";
   }
 
   return {
-    render,
-    stage,
+    actor,
+    scene,
     factor,
+    progress,
   };
 }
 
@@ -84,9 +83,8 @@ export function updateGHLinks(time: string, quote: Quote, locale: Locale) {
   reportErrorUrl.searchParams.set("author", quote.author);
   reportErrorUrl.searchParams.set("quote", quoteRaw.replace(/<br>/g, " "));
 
-  const reportError = document.getElementById(
-    "report-error"
-  ) as HTMLAnchorElement;
+  const reportError =
+    document.querySelector<HTMLAnchorElement>("#report-error");
   if (reportError) {
     reportError.href = reportErrorUrl.href;
   }

From e9cddd8ab551b855483addfdebaa4b02171e4683 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Sun, 12 May 2024 22:00:39 +0100
Subject: [PATCH 03/12] Improve test

---
 index.html              |  1 +
 src/utils/utils.test.ts | 86 ++++++++++++++++++++++++-----------------
 src/utils/utils.ts      | 13 ++++++-
 3 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index 07c452657..5fa570579 100644
--- a/index.html
+++ b/index.html
@@ -187,6 +187,7 @@
                   </option>
                   <option value="frame" data-text="frame">Frame</option>
                   <option value="subtle" data-text="subtle">Subtle</option>
+                  <option value="subtle" data-text="subtle">Subtle</option>
                 </optgroup>
               </select>
               <select id="variant-select" tabindex="6">
diff --git a/src/utils/utils.test.ts b/src/utils/utils.test.ts
index 7efc40626..ba516daef 100644
--- a/src/utils/utils.test.ts
+++ b/src/utils/utils.test.ts
@@ -3,40 +3,50 @@ import { getFaviconFileName, getDayProgress, getDayParameters } from "./utils";
 
 const PROGRESS = {
   "0": new Date(2024, 5, 11, 0, 0, 0),
+  "16.67": new Date(2024, 5, 11, 4, 0, 0),
   "25": new Date(2024, 5, 11, 6, 0, 0),
   "32.78": new Date(2024, 5, 11, 7, 52, 6),
+  "33.33": new Date(2024, 5, 11, 8, 0, 0),
+  "37.5": new Date(2024, 5, 11, 9, 0, 0),
+  "45.83": new Date(2024, 5, 11, 11, 0, 0),
   "50": new Date(2024, 5, 11, 12, 0, 0),
   "60.83": new Date(2024, 5, 11, 14, 36, 0),
   "75": new Date(2024, 5, 11, 18, 0, 0),
+  "79.17": new Date(2024, 5, 11, 19, 0, 0),
   "100": new Date(2024, 5, 11, 23, 59, 59),
 };
 
 describe("getFaviconFileName", () => {
-  test("should return expected favicon file name", () => {
-    const TIMES = {
-      "02:03": "02_00",
-      "14:03": "02_00",
-      "02:00": "02_00",
-      "02:30": "02_30",
-      "00:00": "00_00",
-      "12:00": "00_00",
-      "02:49": "02_30",
-      "14:49": "02_30",
-      "10:49": "10_30",
-      "22:49": "10_30",
-    };
+  const TIMES = {
+    "02:03": "02_00",
+    "14:03": "02_00",
+    "02:00": "02_00",
+    "02:30": "02_30",
+    "00:00": "00_00",
+    "12:00": "00_00",
+    "02:49": "02_30",
+    "14:49": "02_30",
+    "10:49": "10_30",
+    "22:49": "10_30",
+  };
 
-    Object.entries(TIMES).forEach(([time, fileName]) => {
+  Object.entries(TIMES).forEach(([time, fileName]) => {
+    test(`should return ${fileName} file name with ${time}`, () => {
       expect(getFaviconFileName(time)).toEqual(fileName);
     });
   });
 });
 
 describe("getDayProgress", () => {
-  test("should return expected progress of the day", () => {
-    vi.useFakeTimers();
+  const formatDate = (date: Date) =>
+    `${date.getHours().toString().padStart(2, "0")}:${date
+      .getMinutes()
+      .toString()
+      .padStart(2, "0")}`;
 
-    Object.entries(PROGRESS).forEach(([progress, date]) => {
+  Object.entries(PROGRESS).forEach(([progress, date]) => {
+    test(`should return ${progress}% for ${formatDate(date)}`, () => {
+      vi.useFakeTimers();
       vi.setSystemTime(date);
 
       expect(getDayProgress()).toEqual(parseFloat(progress));
@@ -47,27 +57,31 @@ describe("getDayProgress", () => {
 });
 
 describe("getDayParameters", () => {
-  test("should return expected parameters", () => {
-    const dayParameterResponse = (
-      scene: string,
-      actor: string,
-      factor: number,
-      progress: number
-    ) => ({ scene, actor, factor, progress });
+  const dayParameterResponse = (
+    scene: string,
+    actor: string,
+    opacity: number,
+    progress: number
+  ) => ({ scene, actor, opacity, progress });
 
-    const PARAMETERS = {
-      "0": dayParameterResponse("dawn", "moon", 1, 0),
-      "25": dayParameterResponse("sunrise", "sun", 1, 25),
-      "32.78": dayParameterResponse("sunrise", "sun", 1, 32.78),
-      "50": dayParameterResponse("sunset", "sun", -1, 50),
-      "60.83": dayParameterResponse("sunset", "sun", -1, 60.83),
-      "75": dayParameterResponse("dusk", "moon", -1, 75),
-      "100": dayParameterResponse("dusk", "moon", -1, 100),
-    };
+  const PARAMETERS = {
+    "0": dayParameterResponse("dawn", "moon", 0, 0),
+    "16.67": dayParameterResponse("dawn", "moon", 0.33, 16.67),
+    "25": dayParameterResponse("sunrise", "sun", 0.5, 25),
+    "32.78": dayParameterResponse("sunrise", "sun", 0.66, 32.78),
+    "33.33": dayParameterResponse("sunrise", "sun", 0.67, 33.33),
+    "37.5": dayParameterResponse("sunrise", "sun", 0.75, 37.5),
+    "45.83": dayParameterResponse("sunrise", "sun", 0.92, 45.83),
+    "50": dayParameterResponse("sunset", "sun", 1, 50),
+    "60.83": dayParameterResponse("sunset", "sun", 0.78, 60.83),
+    "75": dayParameterResponse("dusk", "moon", 0.5, 75),
+    "79.17": dayParameterResponse("dusk", "moon", 0.42, 79.17),
+    "100": dayParameterResponse("dusk", "moon", 0, 100),
+  };
 
-    vi.useFakeTimers();
-
-    Object.entries(PROGRESS).forEach(([progress, date]) => {
+  Object.entries(PROGRESS).forEach(([progress, date]) => {
+    test(`should return expected parameters for ${progress}%`, () => {
+      vi.useFakeTimers();
       vi.setSystemTime(date);
 
       expect(getDayParameters()).toEqual(
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 180bf9f2b..630fe826a 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -33,7 +33,6 @@ export function getDayProgress() {
 export function getDayParameters() {
   const progress = getDayProgress();
   const actor = progress >= 25 && progress < 75 ? "sun" : "moon";
-  const factor = progress < 50 ? 1 : -1;
   let scene = "dawn";
 
   if (progress >= 25 && progress < 50) {
@@ -44,10 +43,20 @@ export function getDayParameters() {
     scene = "dusk";
   }
 
+  const opacity = parseFloat(
+    (progress <= 50 ? progress / 50 : 1 - (progress / 50 - 1)).toFixed(2)
+  );
+
+  // const root = document.querySelector<HTMLElement>(":root");
+  // root?.style.setProperty("--dynamic-opacity", opacity.toString());
+  // root?.setAttribute("data-actor", actor);
+  // root?.setAttribute("data-progress", progress.toString());
+  // root?.setAttribute("data-scene", scene);
+
   return {
     actor,
     scene,
-    factor,
+    opacity,
     progress,
   };
 }

From dc6c66fe3be23ba5ce332faa6e695cd088769195 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Sun, 12 May 2024 22:27:56 +0100
Subject: [PATCH 04/12] Update index.html

---
 index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/index.html b/index.html
index 99875d720..0c2108171 100644
--- a/index.html
+++ b/index.html
@@ -187,7 +187,6 @@
                   </option>
                   <option value="frame" data-text="frame">Frame</option>
                   <option value="subtle" data-text="subtle">Subtle</option>
-                  <option value="subtle" data-text="subtle">Subtle</option>
                   <option value="poster" data-text="poster">Poster</option>
                 </optgroup>
               </select>

From 63ae018e395ecfc34014e19d7e9d837b2d02cd03 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Mon, 13 May 2024 00:29:17 +0100
Subject: [PATCH 05/12] Add some styles

---
 index.html                    |  1 +
 src/modules/clock.ts          | 14 +++++--
 src/modules/dynamic.test.ts   | 73 ++++++++++++++++++++++++++++++++++
 src/modules/dynamic.ts        | 48 ++++++++++++++++++++++
 src/modules/themes.ts         |  5 +++
 src/strings/translations.json |  5 +++
 src/styles/styles.css         |  5 ++-
 src/styles/themes/dynamic.css | 40 +++++++++++++++++++
 src/utils/utils.test.ts       | 75 +----------------------------------
 src/utils/utils.ts            | 40 -------------------
 10 files changed, 187 insertions(+), 119 deletions(-)
 create mode 100644 src/modules/dynamic.test.ts
 create mode 100644 src/modules/dynamic.ts
 create mode 100644 src/styles/themes/dynamic.css

diff --git a/index.html b/index.html
index 0c2108171..9da06d5a0 100644
--- a/index.html
+++ b/index.html
@@ -188,6 +188,7 @@
                   <option value="frame" data-text="frame">Frame</option>
                   <option value="subtle" data-text="subtle">Subtle</option>
                   <option value="poster" data-text="poster">Poster</option>
+                  <option value="dynamic" data-text="dynamic">Dynamic</option>
                 </optgroup>
               </select>
               <select id="variant-select" tabindex="6">
diff --git a/src/modules/clock.ts b/src/modules/clock.ts
index 3b0983812..8ca834b99 100644
--- a/src/modules/clock.ts
+++ b/src/modules/clock.ts
@@ -1,5 +1,7 @@
 import { updateQuote } from "./quotes";
 import { getTime, updateFavicon } from "../utils/utils";
+import { getStringSetting } from "../utils/settings";
+import { setDayParameters } from "./dynamic";
 
 const urlParams = new URLSearchParams(window.location.search);
 const testTime = urlParams.get("time");
@@ -32,15 +34,19 @@ function updateProgressBar() {
 async function updateTime() {
   const time = testTime || getTime();
 
-  if (time.includes(":00") || time.includes(":30")) {
-    updateFavicon(time);
-  }
-
   if (!isTest) {
     updateProgressBar();
   }
 
   if (lastTime !== time) {
+    if (time.includes(":00") || time.includes(":30")) {
+      updateFavicon(time);
+    }
+
+    if (getStringSetting("theme")?.startsWith("dynamic")) {
+      setDayParameters();
+    }
+
     document.title = document.title.replace(/[0-9]{2}:[0-9]{2}/, time);
     updateQuote(time);
     lastTime = time;
diff --git a/src/modules/dynamic.test.ts b/src/modules/dynamic.test.ts
new file mode 100644
index 000000000..98b74a2ef
--- /dev/null
+++ b/src/modules/dynamic.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, test, vi } from "vitest";
+import { getDayParameters, getDayProgress } from "./dynamic";
+
+const PROGRESS = {
+  "0": new Date(2024, 5, 11, 0, 0, 0),
+  "16.67": new Date(2024, 5, 11, 4, 0, 0),
+  "25": new Date(2024, 5, 11, 6, 0, 0),
+  "32.78": new Date(2024, 5, 11, 7, 52, 6),
+  "33.33": new Date(2024, 5, 11, 8, 0, 0),
+  "37.5": new Date(2024, 5, 11, 9, 0, 0),
+  "45.83": new Date(2024, 5, 11, 11, 0, 0),
+  "50": new Date(2024, 5, 11, 12, 0, 0),
+  "60.83": new Date(2024, 5, 11, 14, 36, 0),
+  "75": new Date(2024, 5, 11, 18, 0, 0),
+  "79.17": new Date(2024, 5, 11, 19, 0, 0),
+  "100": new Date(2024, 5, 11, 23, 59, 59),
+};
+
+describe("getDayProgress", () => {
+  const formatDate = (date: Date) =>
+    `${date.getHours().toString().padStart(2, "0")}:${date
+      .getMinutes()
+      .toString()
+      .padStart(2, "0")}`;
+
+  Object.entries(PROGRESS).forEach(([progress, date]) => {
+    test(`should return ${progress}% for ${formatDate(date)}`, () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(date);
+
+      expect(getDayProgress()).toEqual(parseFloat(progress));
+    });
+
+    vi.useRealTimers();
+  });
+});
+
+describe("getDayParameters", () => {
+  const dayParameterResponse = (
+    scene: string,
+    actor: string,
+    opacity: number,
+    progress: number
+  ) => ({ scene, actor, opacity, progress });
+
+  const PARAMETERS = {
+    "0": dayParameterResponse("dawn", "moon", 0, 0),
+    "16.67": dayParameterResponse("dawn", "moon", 0.33, 16.67),
+    "25": dayParameterResponse("sunrise", "sun", 0.5, 25),
+    "32.78": dayParameterResponse("sunrise", "sun", 0.66, 32.78),
+    "33.33": dayParameterResponse("sunrise", "sun", 0.67, 33.33),
+    "37.5": dayParameterResponse("sunrise", "sun", 0.75, 37.5),
+    "45.83": dayParameterResponse("sunrise", "sun", 0.92, 45.83),
+    "50": dayParameterResponse("sunset", "sun", 1, 50),
+    "60.83": dayParameterResponse("sunset", "sun", 0.78, 60.83),
+    "75": dayParameterResponse("dusk", "moon", 0.5, 75),
+    "79.17": dayParameterResponse("dusk", "moon", 0.42, 79.17),
+    "100": dayParameterResponse("dusk", "moon", 0, 100),
+  };
+
+  Object.entries(PROGRESS).forEach(([progress, date]) => {
+    test(`should return expected parameters for ${progress}%`, () => {
+      vi.useFakeTimers();
+      vi.setSystemTime(date);
+
+      expect(getDayParameters()).toEqual(
+        PARAMETERS[progress as keyof typeof PARAMETERS]
+      );
+    });
+
+    vi.useRealTimers();
+  });
+});
diff --git a/src/modules/dynamic.ts b/src/modules/dynamic.ts
new file mode 100644
index 000000000..61ce18962
--- /dev/null
+++ b/src/modules/dynamic.ts
@@ -0,0 +1,48 @@
+export function getDayProgress() {
+  const now = new Date();
+  const seconds =
+    now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
+  const progress = (seconds * 100) / 86400;
+
+  return parseFloat(progress.toFixed(2));
+}
+
+export function getDayParameters() {
+  const progress = getDayProgress();
+  const actor = progress < 25 ? "moon" : "sun";
+  let scene = "night";
+
+  if (progress >= 25 && progress < 50) {
+    scene = "sunrise";
+  } else if (progress >= 50 && progress < 75) {
+    scene = "sunset";
+  } else if (progress >= 75) {
+    scene = "dusk";
+  }
+
+  const opacity = parseFloat(
+    (progress <= 50 ? progress / 50 : 1 - (progress / 50 - 1)).toFixed(2)
+  );
+
+  const actorLeft =
+    progress <= 25 ? (progress * 100) / 25 : ((progress - 25) * 100) / 75;
+
+  return {
+    actor,
+    scene,
+    opacity,
+    progress,
+    actorLeft,
+  };
+}
+
+export function setDayParameters() {
+  const { opacity, actor, progress, scene, actorLeft } = getDayParameters();
+
+  const root = document.querySelector<HTMLElement>(":root");
+  root?.style.setProperty("--dynamic-opacity", opacity.toString());
+  root?.style.setProperty("--actor-left", actorLeft.toString());
+  root?.setAttribute("data-actor", actor);
+  root?.setAttribute("data-progress", progress.toString());
+  root?.setAttribute("data-scene", scene);
+}
diff --git a/src/modules/themes.ts b/src/modules/themes.ts
index b95b897cd..2e2f1a28b 100644
--- a/src/modules/themes.ts
+++ b/src/modules/themes.ts
@@ -5,6 +5,7 @@ import {
   updateURL,
 } from "../utils/settings";
 import { doFitQuote, fitQuote, loadFontIfNotExists } from "../utils/utils";
+import { setDayParameters } from "./dynamic";
 
 function getRandomThemeColor() {
   let colors = Array.from(
@@ -102,6 +103,10 @@ export function setTheme(doUpdateURL = true) {
       : "light";
   }
 
+  if (theme === "dynamic") {
+    setDayParameters();
+  }
+
   document.documentElement.dataset.theme = `${theme}-${variant}`;
   fitQuote();
 
diff --git a/src/strings/translations.json b/src/strings/translations.json
index 0018b5145..a84ea993c 100644
--- a/src/strings/translations.json
+++ b/src/strings/translations.json
@@ -38,6 +38,7 @@
     "frame": "Frame",
     "subtle": "Subtle",
     "poster": "Poster",
+    "dynamic": "Dynamic",
 
     "system": "System",
     "light": "Light",
@@ -93,6 +94,7 @@
     "frame": "Marco",
     "subtle": "Sutil",
     "poster": "Poster",
+    "dynamic": "Dinámico",
 
     "system": "Sistema",
     "light": "Claro",
@@ -147,6 +149,7 @@
     "frame": "Moldura",
     "subtle": "Sutil",
     "poster": "Pôster",
+    "dynamic": "Dinâmico",
 
     "system": "Sistema",
     "light": "Claro",
@@ -201,6 +204,7 @@
     "frame": "Bordure",
     "subtle": "Subtil",
     "poster": "Affiche",
+    "dynamic": "Dynamique",
 
     "system": "Système",
     "light": "Clair",
@@ -256,6 +260,7 @@
     "frame": "Cornice",
     "subtle": "Sottile",
     "poster": "Poster",
+    "dynamic": "Dinamico",
 
     "system": "Sistema",
     "light": "Chiaro",
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 9523ca0e4..d3697974a 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -1,9 +1,10 @@
 @import url(main.css);
 
-@import url(themes/base.css);
-@import url(themes/colors.css);
 @import url(themes/anaglyph.css);
+@import url(themes/base.css);
 @import url(themes/bohemian.css);
+@import url(themes/colors.css);
+@import url(themes/dynamic.css);
 @import url(themes/elegant.css);
 @import url(themes/festive.css);
 @import url(themes/frame.css);
diff --git a/src/styles/themes/dynamic.css b/src/styles/themes/dynamic.css
new file mode 100644
index 000000000..5e4e9653f
--- /dev/null
+++ b/src/styles/themes/dynamic.css
@@ -0,0 +1,40 @@
+[data-theme|="dynamic"] body {
+  position: relative;
+}
+
+[data-theme|="dynamic"] body:before {
+  content: "";
+  width: 10vw;
+  height: 10vw;
+  border-radius: 50%;
+  position: absolute;
+  left: calc(var(--actor-left) * 1%);
+  transition: left 60s;
+  transform: translateX(-50%);
+  top: 100px;
+}
+
+[data-theme|="dynamic"][data-actor="moon"] body:before {
+  background-color: rgb(189, 189, 189);
+}
+
+[data-theme|="dynamic"][data-scene="sunset"] {
+  --background-image: linear-gradient(
+    0deg,
+    rgba(173, 53, 25, 1) 0%,
+    rgba(250, 131, 73, 1) 9%,
+    rgba(170, 125, 131, 1) 21%,
+    rgba(50, 47, 76, 1) 65%,
+    rgba(28, 27, 43, 1) 86%
+  );
+  --accent-color: rgba(28, 27, 43, 1);
+}
+
+[data-theme|="dynamic"][data-scene="sunrise"] {
+  --background-image: linear-gradient(to right, #e0eafc, #cfdef3);
+}
+
+[data-theme|="dynamic"][data-scene="night"] {
+  --accent-color: rgb(189, 189, 189);
+  --background-image: linear-gradient(to bottom, #000120, #000000);
+}
diff --git a/src/utils/utils.test.ts b/src/utils/utils.test.ts
index ba516daef..d8fd0de78 100644
--- a/src/utils/utils.test.ts
+++ b/src/utils/utils.test.ts
@@ -1,20 +1,5 @@
-import { describe, expect, test, vi } from "vitest";
-import { getFaviconFileName, getDayProgress, getDayParameters } from "./utils";
-
-const PROGRESS = {
-  "0": new Date(2024, 5, 11, 0, 0, 0),
-  "16.67": new Date(2024, 5, 11, 4, 0, 0),
-  "25": new Date(2024, 5, 11, 6, 0, 0),
-  "32.78": new Date(2024, 5, 11, 7, 52, 6),
-  "33.33": new Date(2024, 5, 11, 8, 0, 0),
-  "37.5": new Date(2024, 5, 11, 9, 0, 0),
-  "45.83": new Date(2024, 5, 11, 11, 0, 0),
-  "50": new Date(2024, 5, 11, 12, 0, 0),
-  "60.83": new Date(2024, 5, 11, 14, 36, 0),
-  "75": new Date(2024, 5, 11, 18, 0, 0),
-  "79.17": new Date(2024, 5, 11, 19, 0, 0),
-  "100": new Date(2024, 5, 11, 23, 59, 59),
-};
+import { describe, expect, test } from "vitest";
+import { getFaviconFileName } from "./utils";
 
 describe("getFaviconFileName", () => {
   const TIMES = {
@@ -36,59 +21,3 @@ describe("getFaviconFileName", () => {
     });
   });
 });
-
-describe("getDayProgress", () => {
-  const formatDate = (date: Date) =>
-    `${date.getHours().toString().padStart(2, "0")}:${date
-      .getMinutes()
-      .toString()
-      .padStart(2, "0")}`;
-
-  Object.entries(PROGRESS).forEach(([progress, date]) => {
-    test(`should return ${progress}% for ${formatDate(date)}`, () => {
-      vi.useFakeTimers();
-      vi.setSystemTime(date);
-
-      expect(getDayProgress()).toEqual(parseFloat(progress));
-    });
-
-    vi.useRealTimers();
-  });
-});
-
-describe("getDayParameters", () => {
-  const dayParameterResponse = (
-    scene: string,
-    actor: string,
-    opacity: number,
-    progress: number
-  ) => ({ scene, actor, opacity, progress });
-
-  const PARAMETERS = {
-    "0": dayParameterResponse("dawn", "moon", 0, 0),
-    "16.67": dayParameterResponse("dawn", "moon", 0.33, 16.67),
-    "25": dayParameterResponse("sunrise", "sun", 0.5, 25),
-    "32.78": dayParameterResponse("sunrise", "sun", 0.66, 32.78),
-    "33.33": dayParameterResponse("sunrise", "sun", 0.67, 33.33),
-    "37.5": dayParameterResponse("sunrise", "sun", 0.75, 37.5),
-    "45.83": dayParameterResponse("sunrise", "sun", 0.92, 45.83),
-    "50": dayParameterResponse("sunset", "sun", 1, 50),
-    "60.83": dayParameterResponse("sunset", "sun", 0.78, 60.83),
-    "75": dayParameterResponse("dusk", "moon", 0.5, 75),
-    "79.17": dayParameterResponse("dusk", "moon", 0.42, 79.17),
-    "100": dayParameterResponse("dusk", "moon", 0, 100),
-  };
-
-  Object.entries(PROGRESS).forEach(([progress, date]) => {
-    test(`should return expected parameters for ${progress}%`, () => {
-      vi.useFakeTimers();
-      vi.setSystemTime(date);
-
-      expect(getDayParameters()).toEqual(
-        PARAMETERS[progress as keyof typeof PARAMETERS]
-      );
-    });
-
-    vi.useRealTimers();
-  });
-});
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 431468c4f..5b34ca2a5 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -22,46 +22,6 @@ export function getTime() {
   );
 }
 
-export function getDayProgress() {
-  const now = new Date();
-  const seconds =
-    now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
-  const progress = (seconds * 100) / 86400;
-
-  return parseFloat(progress.toFixed(2));
-}
-
-export function getDayParameters() {
-  const progress = getDayProgress();
-  const actor = progress >= 25 && progress < 75 ? "sun" : "moon";
-  let scene = "dawn";
-
-  if (progress >= 25 && progress < 50) {
-    scene = "sunrise";
-  } else if (progress >= 50 && progress < 75) {
-    scene = "sunset";
-  } else if (progress >= 75) {
-    scene = "dusk";
-  }
-
-  const opacity = parseFloat(
-    (progress <= 50 ? progress / 50 : 1 - (progress / 50 - 1)).toFixed(2)
-  );
-
-  // const root = document.querySelector<HTMLElement>(":root");
-  // root?.style.setProperty("--dynamic-opacity", opacity.toString());
-  // root?.setAttribute("data-actor", actor);
-  // root?.setAttribute("data-progress", progress.toString());
-  // root?.setAttribute("data-scene", scene);
-
-  return {
-    actor,
-    scene,
-    opacity,
-    progress,
-  };
-}
-
 export function updateGHLinks(time: string, quote: Quote, locale: Locale) {
   const quoteRaw = `${quote.quote_first}${quote.quote_time_case}${quote.quote_last}`;
 

From 41a436861bd60f8a9d0df7c85f56e2885ac32c65 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Mon, 13 May 2024 07:12:31 +0100
Subject: [PATCH 06/12] Sunrise improvements

---
 src/modules/dynamic.ts        |  3 ++-
 src/styles/themes/dynamic.css | 22 +++++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/modules/dynamic.ts b/src/modules/dynamic.ts
index 61ce18962..c1a9e8eda 100644
--- a/src/modules/dynamic.ts
+++ b/src/modules/dynamic.ts
@@ -40,8 +40,9 @@ export function setDayParameters() {
   const { opacity, actor, progress, scene, actorLeft } = getDayParameters();
 
   const root = document.querySelector<HTMLElement>(":root");
-  root?.style.setProperty("--dynamic-opacity", opacity.toString());
+  root?.style.setProperty("--day-opacity", opacity.toString());
   root?.style.setProperty("--actor-left", actorLeft.toString());
+  root?.style.setProperty("--day-progress", progress.toString());
   root?.setAttribute("data-actor", actor);
   root?.setAttribute("data-progress", progress.toString());
   root?.setAttribute("data-scene", scene);
diff --git a/src/styles/themes/dynamic.css b/src/styles/themes/dynamic.css
index 5e4e9653f..47f21f6ad 100644
--- a/src/styles/themes/dynamic.css
+++ b/src/styles/themes/dynamic.css
@@ -18,6 +18,24 @@
   background-color: rgb(189, 189, 189);
 }
 
+[data-theme|="dynamic"][data-scene="sunrise"][data-actor="sun"] body:before {
+  background-color: rgb(242, 242, 184);
+  box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
+  filter: blur(2px);
+  top: calc(100% - var(--day-progress) * 1%);
+}
+
+[data-theme|="dynamic"] blockquote:before,
+[data-theme|="dynamic"] blockquote:after {
+  content: none;
+}
+
+[data-theme|="dynamic"][data-scene="sunrise"] blockquote {
+  backdrop-filter: blur(10px);
+  padding: 1rem 2rem;
+  border-radius: 0.25rem;
+}
+
 [data-theme|="dynamic"][data-scene="sunset"] {
   --background-image: linear-gradient(
     0deg,
@@ -31,7 +49,9 @@
 }
 
 [data-theme|="dynamic"][data-scene="sunrise"] {
-  --background-image: linear-gradient(to right, #e0eafc, #cfdef3);
+  --background-image: linear-gradient(to top, rgb(246, 248, 98), #9dc6ff);
+  --quote-font-family: "Unna, sans-serif";
+  --font-color: #333;
 }
 
 [data-theme|="dynamic"][data-scene="night"] {

From a20efd678720de1fded43a57693c89e5cafa7142 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Mon, 13 May 2024 08:14:37 +0100
Subject: [PATCH 07/12] Add font sunrise

---
 src/modules/fonts.ts          |  1 +
 src/styles/themes/dynamic.css | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/modules/fonts.ts b/src/modules/fonts.ts
index 2f2fe157f..f86e2fc20 100644
--- a/src/modules/fonts.ts
+++ b/src/modules/fonts.ts
@@ -18,6 +18,7 @@ export const THEME_FONTS: Record<string, string[]> = {
   frame: ["Playfair Display"],
   subtle: ["Unna"],
   poster: ["Averia Serif Libre", "Allura"],
+  dynamic: ["Sunshiney"],
 };
 
 export const INITIAL_THEME_FONT_SIZE = {
diff --git a/src/styles/themes/dynamic.css b/src/styles/themes/dynamic.css
index 47f21f6ad..6c963cbd0 100644
--- a/src/styles/themes/dynamic.css
+++ b/src/styles/themes/dynamic.css
@@ -23,6 +23,7 @@
   box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
   filter: blur(2px);
   top: calc(100% - var(--day-progress) * 1%);
+  opacity: 0.5;
 }
 
 [data-theme|="dynamic"] blockquote:before,
@@ -30,8 +31,18 @@
   content: none;
 }
 
+[data-theme|="dynamic"][data-scene="sunrise"] {
+  --background-image: linear-gradient(
+    to top,
+    rgb(241, 114, 21),
+    rgb(246, 248, 98) 10%,
+    #9dc6ff 60%
+  );
+  --quote-font-family: "Sunshiney", cursive;
+  --font-color: #333;
+}
+
 [data-theme|="dynamic"][data-scene="sunrise"] blockquote {
-  backdrop-filter: blur(10px);
   padding: 1rem 2rem;
   border-radius: 0.25rem;
 }
@@ -48,12 +59,6 @@
   --accent-color: rgba(28, 27, 43, 1);
 }
 
-[data-theme|="dynamic"][data-scene="sunrise"] {
-  --background-image: linear-gradient(to top, rgb(246, 248, 98), #9dc6ff);
-  --quote-font-family: "Unna, sans-serif";
-  --font-color: #333;
-}
-
 [data-theme|="dynamic"][data-scene="night"] {
   --accent-color: rgb(189, 189, 189);
   --background-image: linear-gradient(to bottom, #000120, #000000);

From 793719540f7a07c92e7531f6163ca2678c1d2651 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Mon, 13 May 2024 08:22:25 +0100
Subject: [PATCH 08/12] Fix quotes

---
 public/times/es-ES/02_43.json | 2 +-
 public/times/es-ES/04_23.json | 2 +-
 public/times/es-ES/06_27.json | 2 +-
 public/times/es-ES/07_02.json | 2 +-
 quotes/quotes.es-ES.csv       | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/times/es-ES/02_43.json b/public/times/es-ES/02_43.json
index 1f4804c7f..da0707434 100644
--- a/public/times/es-ES/02_43.json
+++ b/public/times/es-ES/02_43.json
@@ -5,7 +5,7 @@
         "quote_time_case": "2:43",
         "quote_first": "Ella se recostó a su lado. \"Son las ",
         "quote_last": ":12 am, Case. Tengo una lectura insertada en mi nervio óptico\".",
-        "title": "neuromante",
+        "title": "Neuromante",
         "author": "William Gibson",
         "sfw": "unknown"
     },
diff --git a/public/times/es-ES/04_23.json b/public/times/es-ES/04_23.json
index c10e94734..abc3f0528 100644
--- a/public/times/es-ES/04_23.json
+++ b/public/times/es-ES/04_23.json
@@ -15,7 +15,7 @@
         "quote_time_case": "04:23",
         "quote_first": "Su chip marcaba la hora. ",
         "quote_last": ":04. Había sido un día largo.",
-        "title": "neuromante",
+        "title": "Neuromante",
         "author": "William Gibson",
         "sfw": "unknown"
     }
diff --git a/public/times/es-ES/06_27.json b/public/times/es-ES/06_27.json
index 609c87480..4d61242c7 100644
--- a/public/times/es-ES/06_27.json
+++ b/public/times/es-ES/06_27.json
@@ -25,7 +25,7 @@
         "quote_time_case": "06:27",
         "quote_first": "",
         "quote_last": ":52 por el chip en su nervio óptico; Case había estado siguiendo su progreso a través de Villa Straylight durante más de una hora, dejando que el análogo de endorfinas que había tomado borrara su resaca.",
-        "title": "neuromante",
+        "title": "Neuromante",
         "author": "William Gibson",
         "sfw": "unknown"
     },
diff --git a/public/times/es-ES/07_02.json b/public/times/es-ES/07_02.json
index ab1ab316a..24fe0bfce 100644
--- a/public/times/es-ES/07_02.json
+++ b/public/times/es-ES/07_02.json
@@ -5,7 +5,7 @@
         "quote_time_case": "07:02",
         "quote_first": "",
         "quote_last": ":18 Una hora y media. \"Caso\", dijo, \"quiero favorecer\".",
-        "title": "neuromante",
+        "title": "Neuromante",
         "author": "William Gibson",
         "sfw": "sfw"
     }
diff --git a/quotes/quotes.es-ES.csv b/quotes/quotes.es-ES.csv
index 0f077dd0e..95f66e087 100644
--- a/quotes/quotes.es-ES.csv
+++ b/quotes/quotes.es-ES.csv
@@ -370,7 +370,7 @@ Time,Quote time,Quote,Title,Author,SFW
 02:40,* 2:40 am,"La señorita Conover dijo a los investigadores que a las 2:40 a. m., el oficial Martin Willis entró al restaurante y pidió café y donas.",La cepa de Andrómeda,Michael Crichton,unknown
 02:41,02.41,"Sus ayudantes querían un anuncio largo y florido lleno de frases conmovedoras y elogios exagerados para sus distintos generales. Eisenhower desechó sus sugerencias y escribió: ¡Ah! ahí está: ""La misión de esta fuerza aliada se cumplió a las 02.41 hora local del 7 de mayo de 1945"".",Guerra lunar,Ben Bova,sfw
 02:42,02.42,"Esta vez era un pájaro, un cuervo, el que llevaba gafas. Patterson había descifrado el telegrama y ahora lo leyó rápidamente. DIOSA 4 informa que GENIUS salió del salón a las 02.42 ZULU.",garza nocturna,Adam Brookes,sfw
-02:43,2:43,"Ella se recostó a su lado. ""Son las 2:43:12 am, Case. Tengo una lectura insertada en mi nervio óptico"".",neuromante,William Gibson,unknown
+02:43,2:43,"Ella se recostó a su lado. ""Son las 2:43:12 am, Case. Tengo una lectura insertada en mi nervio óptico"".",Neuromante,William Gibson,unknown
 02:43,02:43,"Max se despertó de la pesadilla con un grito ahogado, con los ojos abiertos de par en par en la habitación a oscuras. Parpadeó dos veces y ahogó un gemido cuando la marca de tiempo de las 02:43 apareció en su visión. ""Nunca has visto un oso de verdad"", murmuró.",Una luz pálida en la oscuridad,K.B. Wagers,sfw
 02:44,* dieciséis minutos para las tres,Llegaste aquí a las tres menos dieciséis minutos. Ron miró su reloj.,El hombre abominable,Maj Sjöwall,sfw
 02:45,* cuarto para las tres,Cuando despertó ya era de noche y la luna brillaba en la habitación. Miró su reloj: eran las tres menos cuarto. El sueño lo había abandonado; se sentó en la cama y pensó en el funeral de la vieja condesa.,reina de Espadas,Alexsander S. Pushkin,sfw
@@ -601,7 +601,7 @@ Time,Quote time,Quote,Title,Author,SFW
 04:22,4:22,El presidente marcó siete dígitos y pidió hablar con el oficial de turno. Miró su reloj mientras esperaba que lo pasaran. Eran las 4:22.,Honor entre ladrones,Jeffrey Archer,sfw
 04:22,4.22,Me lastimó hasta el punto de querer decirle algo. Mi reloj marcaba ahora las 4.22. Se había detenido. Fue destrozado.,El archivo Ipcress,Len Deighton,unknown
 04:23,4:23,"4:23, lunes por la mañana, Plaza Islandia. En los alrededores de Bjornsongatan, unos fuertes gritos despiertan a varias personas.",Deje que entre el correcto,John Ajvide Lindqvist,unknown
-04:23,04:23,Su chip marcaba la hora. 04:23:04. Había sido un día largo.,neuromante,William Gibson,unknown
+04:23,04:23,Su chip marcaba la hora. 04:23:04. Había sido un día largo.,Neuromante,William Gibson,unknown
 04:24,04:24,"A las 04:24 del 5 de enero de 2025, las estrellas se detuvieron en el cielo. En California, el terremoto comenzó con un estruendo de baja frecuencia. No fue un sonido sino una sensación que provocó una incomprensible debilidad en las piernas, una constricción de los intestinos y pánico.",Circulo perfecto,Carlos J. Cortes,sfw
 04:25,las cuatro y veinticinco minutos,"Mientras me vestía, miré mi reloj. No era de extrañar que nadie se moviera. Eran las cuatro y veinticinco minutos.",Las aventuras de Sherlock Holmes,Sir Arthur Conan Doyle,unknown
 04:26,las cuatro y veintiséis minutos,"A las cuatro y veintiséis minutos fue declarada muerta. La causa de la muerte, o más bien la forma de la muerte, era evidente. Tenía dos impactos de bala de entrada en el tórax.",Si realmente me amaras,Ann Rule,nsfw
@@ -845,7 +845,7 @@ Time,Quote time,Quote,Title,Author,SFW
 06:26,6:26 a.m.,"6:26 a.m.<br>""Está bien"", declaró Armont, ""haremos el inserto aquí"". Golpeó con el dedo el plano. ""Atacamos el centro neurálgico de Launch con granadas aturdidoras y gases lacrimógenos, y lo derribamos. Si tenemos suerte, Ramírez seguirá allí, y ese debería ser el final"".",Proyecto cíclope,Thomas Hoover,nsfw
 06:27,6:27 a.m.,"6:27 a.m.<br>Finalmente, Mark no pudo soportarlo más y a las 6:30 a.m. se levantó, se duchó y se puso una camisa limpia y un traje limpio.",¿Se lo contamos al presidente?,Jeffrey Archer,sfw
 06:27,6:27,"Eran las 6:27. En el piso de Frances Peverell sonó el teléfono. Tan pronto como James pronunció su nombre, supo que algo andaba mal.",El pecado original,P.D. James,sfw
-06:27,06:27,"06:27:52 por el chip en su nervio óptico; Case había estado siguiendo su progreso a través de Villa Straylight durante más de una hora, dejando que el análogo de endorfinas que había tomado borrara su resaca.",neuromante,William Gibson,unknown
+06:27,06:27,"06:27:52 por el chip en su nervio óptico; Case había estado siguiendo su progreso a través de Villa Straylight durante más de una hora, dejando que el análogo de endorfinas que había tomado borrara su resaca.",Neuromante,William Gibson,unknown
 06:27,* 0627 horas,"Temprano en la mañana, a finales de siglo, Cricklewood Broadway. A las 06.27 horas del 1 de enero de 1975, Alfred Archibald Jones estaba vestido de pana y sentado en un Cavalier Musketeer Estate lleno de humo, boca abajo sobre el volante, esperando que el juicio no fuera demasiado pesado para él.",Dientes blancos,Zadie Smith,unknown
 06:28,6:28 a.m.,Jueves 6:28 a.m.<br>El aire de la mañana era fuerte y deseó haber agarrado uno de los chales de punto negros de Adriana antes de salir. ¿Podría pasar por una de esas campesinas griegas encorvadas? Ella se preguntó. No es probable. Ella se estremeció y se envolvió en su fino abrigo.,Proyecto Dédalo,Thomas Hoover,sfw
 06:29,6:29,"Durante los siguientes quince minutos cargó las cajas de vino y cerveza escaleras arriba, deteniéndose constantemente para mirar su reloj, y a las 6:29 abrió la puerta trasera para encontrar al cabo alemán saltando arriba y abajo y golpeándose los costados en un esfuerzo. para mantener el calor.",Los pecados del padre,Jeffrey Archer,sfw
@@ -937,7 +937,7 @@ Time,Quote time,Quote,Title,Author,SFW
 07:00,* las siete en punto,"Se encerró, no respondió a mi bonjour a través de la puerta; A las siete se levantó y le llevaron el samovar desde la cocina.",Crimen y castigo,Fyodor Dostoyevsky,unknown
 07:00,siete de la mañana,"A las siete de la mañana, cuando el coronel Gerineldo Márquez fue a buscarlo en compañía de un grupo de oficiales rebeldes, lo encontró más taciturno que nunca, más pensativo y solitario.",100 años de soledad,Gabriel García Márquez,sfw
 07:01,las siete y un minuto,"Di el primer paso tentativo para descubrirlo a las siete y un minuto de la mañana siguiente, en la morgue de Fort Bird.",El enemigo,Lee Child,sfw
-07:02,07:02,"07:02:18 Una hora y media. ""Caso"", dijo, ""quiero favorecer"".",neuromante,William Gibson,sfw
+07:02,07:02,"07:02:18 Una hora y media. ""Caso"", dijo, ""quiero favorecer"".",Neuromante,William Gibson,sfw
 07:03,7:03 a.m.,7:03 a.m. Regreso a la cama enfurruñado por el peso. Estado de cabeza malo. Dormir o levantarse igualmente fuera de discusión. Piensa en Daniel.,El diario de Bridget Jones,Helen Fielding,sfw
 07:03,las siete y tres minutos,Hubo problemas con la pista. Nadie podría dar idea de cuándo se arreglaría. El tren que llegó a las siete y tres minutos había sido el último en llegar. ¿Estaban todos los dioses del viaje conspirando para frustrarlo?,La sala del asesinato,P.D. James,sfw
 07:03,* tres minutos después de las 7 am,Y hasta ahora había decretado que alguien debía empezar a lavarme y arreglarme exactamente tres minutos después de las 7 de la mañana.,El día de los trífidos,John Wyndham,sfw

From 586cf1c32b0b104e027dfb6cc2bbf7558727d21b Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Thu, 16 May 2024 22:47:20 +0000
Subject: [PATCH 09/12] Update dynamic theme

---
 src/modules/dynamic.ts        | 21 ++++++++++----
 src/modules/fonts.ts          |  2 +-
 src/styles/themes/dynamic.css | 52 +++++++++++++++++++++++++++--------
 3 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/modules/dynamic.ts b/src/modules/dynamic.ts
index c1a9e8eda..8fa7142ff 100644
--- a/src/modules/dynamic.ts
+++ b/src/modules/dynamic.ts
@@ -1,3 +1,6 @@
+const MOON_PHASES = ["new", "waxing-crescent", "first-quarter", "waxing-gibbous", "full-moon", "waning gibbous", "third-quarter", "waning crescent"];
+const moonPhase = MOON_PHASES[Math.floor(Math.random() * MOON_PHASES.length)];
+
 export function getDayProgress() {
   const now = new Date();
   const seconds =
@@ -9,7 +12,6 @@ export function getDayProgress() {
 
 export function getDayParameters() {
   const progress = getDayProgress();
-  const actor = progress < 25 ? "moon" : "sun";
   let scene = "night";
 
   if (progress >= 25 && progress < 50) {
@@ -24,11 +26,12 @@ export function getDayParameters() {
     (progress <= 50 ? progress / 50 : 1 - (progress / 50 - 1)).toFixed(2)
   );
 
-  const actorLeft =
-    progress <= 25 ? (progress * 100) / 25 : ((progress - 25) * 100) / 75;
+  // const actorLeft =
+    // progress <= 25 ? (progress * 100) / 25 : ((progress - 25) * 100) / 75;
+  const actorLeft = progress >= 25 && progress <=75 ? ((progress - 25) * 100) / 50 : progress > 75 ? ((progress-75) * 50) / 25 : ((progress + 25) * 100) / 50 ;
+  
 
   return {
-    actor,
     scene,
     opacity,
     progress,
@@ -37,13 +40,19 @@ export function getDayParameters() {
 }
 
 export function setDayParameters() {
-  const { opacity, actor, progress, scene, actorLeft } = getDayParameters();
+  const { opacity, progress, scene, actorLeft } = getDayParameters();
+
+  if (!document.querySelector(".actor")) {
+    const actor = document.createElement("div");
+    actor.classList.add("actor");
+    document.querySelector("main")?.appendChild(actor);
+  }
 
   const root = document.querySelector<HTMLElement>(":root");
   root?.style.setProperty("--day-opacity", opacity.toString());
   root?.style.setProperty("--actor-left", actorLeft.toString());
   root?.style.setProperty("--day-progress", progress.toString());
-  root?.setAttribute("data-actor", actor);
+  root?.style.setProperty("--moon-phase", moonPhase);
   root?.setAttribute("data-progress", progress.toString());
   root?.setAttribute("data-scene", scene);
 }
diff --git a/src/modules/fonts.ts b/src/modules/fonts.ts
index f86e2fc20..27a107c5e 100644
--- a/src/modules/fonts.ts
+++ b/src/modules/fonts.ts
@@ -18,7 +18,7 @@ export const THEME_FONTS: Record<string, string[]> = {
   frame: ["Playfair Display"],
   subtle: ["Unna"],
   poster: ["Averia Serif Libre", "Allura"],
-  dynamic: ["Sunshiney"],
+  dynamic: ["Sunshiney", "Yeseva One", "Rye", "Tilt Neon", "Jacquard 12"],
 };
 
 export const INITIAL_THEME_FONT_SIZE = {
diff --git a/src/styles/themes/dynamic.css b/src/styles/themes/dynamic.css
index 6c963cbd0..e03fa195c 100644
--- a/src/styles/themes/dynamic.css
+++ b/src/styles/themes/dynamic.css
@@ -2,7 +2,7 @@
   position: relative;
 }
 
-[data-theme|="dynamic"] body:before {
+[data-theme|="dynamic"] .actor {
   content: "";
   width: 10vw;
   height: 10vw;
@@ -14,11 +14,17 @@
   top: 100px;
 }
 
-[data-theme|="dynamic"][data-actor="moon"] body:before {
-  background-color: rgb(189, 189, 189);
+[data-theme|="dynamic"][data-scene="dusk"] .actor {
+  background-color: #000000;
+  box-shadow: 0 0 0 0 rgb(189, 189, 189) inset;
 }
 
-[data-theme|="dynamic"][data-scene="sunrise"][data-actor="sun"] body:before {
+[data-theme|="dynamic"][data-scene="night"] .actor {
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 0 rgb(189, 189, 189) inset, 0 0 40px 0px #FFF;
+}
+
+[data-theme|="dynamic"][data-scene="sunrise"] .actor {
   background-color: rgb(242, 242, 184);
   box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
   filter: blur(2px);
@@ -32,12 +38,7 @@
 }
 
 [data-theme|="dynamic"][data-scene="sunrise"] {
-  --background-image: linear-gradient(
-    to top,
-    rgb(241, 114, 21),
-    rgb(246, 248, 98) 10%,
-    #9dc6ff 60%
-  );
+  --background-image: linear-gradient(to top, rgb(230, 174, 41), rgb(246, 248, 98) 18.49%, #9dc6ff 57.98%);
   --quote-font-family: "Sunshiney", cursive;
   --font-color: #333;
 }
@@ -59,7 +60,34 @@
   --accent-color: rgba(28, 27, 43, 1);
 }
 
+[data-theme|="dynamic"][data-scene="dusk"] {
+  --background-image: linear-gradient(to top, rgba(173, 53, 25, 1), rgba(250, 131, 73, 1) 4.2%, rgba(170, 125, 131, 1) 10.5%, rgba(50, 47, 76, 1) 26.89%, rgb(7, 7, 21) 40.34%);
+  /* --accent-color: rgb(17, 0, 255); */
+  --quote-font-family: "Tilt Neon", serif;
+  --font-color: #fafafa;
+}
+
+[data-theme|="dynamic"][data-scene="dusk"] .time {
+  text-shadow:
+      0 0 4px #fff,
+      0 0 11px #fff,
+      0 0 19px #fff,
+      0 0 40px #f09,
+      0 0 80px #f09,
+      0 0 90px #f09,
+      0 0 100px #f09,
+      0 0 150px #f09;
+  color: #FFFFFF;
+}
+
 [data-theme|="dynamic"][data-scene="night"] {
-  --accent-color: rgb(189, 189, 189);
-  --background-image: linear-gradient(to bottom, #000120, #000000);
+  --accent-color: #FFF;
+  --bg-opacity: 1;
+  --background-image: linear-gradient(to bottom, rgba(0, 1, 32, var(--bg-opacity)), rgba(0, 0, 0, var(--bg-opacity))), linear-gradient(
+    to top,
+    rgb(241, 114, 21),
+    rgb(246, 248, 98) 10%,
+    #9dc6ff 60%
+  );
+  --quote-font-family: "Jacquard 12", serif;
 }

From afd9ca3470618d311768dd9511691a954fcb03e4 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Fri, 17 May 2024 02:15:22 +0100
Subject: [PATCH 10/12] Dynamic theme improvements

---
 src/modules/dynamic.ts        |  30 +++++++--
 src/modules/fonts.ts          |   2 +-
 src/styles/styles.css         |   2 +-
 src/styles/themes/dynamic.css | 117 ++++++++++++++++++++++++++--------
 4 files changed, 117 insertions(+), 34 deletions(-)

diff --git a/src/modules/dynamic.ts b/src/modules/dynamic.ts
index 8fa7142ff..ad9be5a29 100644
--- a/src/modules/dynamic.ts
+++ b/src/modules/dynamic.ts
@@ -1,5 +1,17 @@
-const MOON_PHASES = ["new", "waxing-crescent", "first-quarter", "waxing-gibbous", "full-moon", "waning gibbous", "third-quarter", "waning crescent"];
+const MOON_PHASES = [
+  "new",
+  "waxing-crescent",
+  "first-quarter",
+  "waxing-gibbous",
+  "full-moon",
+  "waning-gibbous",
+  "third-quarter",
+  "waning-crescent",
+];
 const moonPhase = MOON_PHASES[Math.floor(Math.random() * MOON_PHASES.length)];
+const urlParams = new URLSearchParams(window.location.search);
+const testScene = urlParams.get("scene");
+const testProgress = urlParams.get("progress");
 
 export function getDayProgress() {
   const now = new Date();
@@ -7,7 +19,7 @@ export function getDayProgress() {
     now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
   const progress = (seconds * 100) / 86400;
 
-  return parseFloat(progress.toFixed(2));
+  return parseFloat(testProgress || progress.toFixed(2));
 }
 
 export function getDayParameters() {
@@ -27,12 +39,16 @@ export function getDayParameters() {
   );
 
   // const actorLeft =
-    // progress <= 25 ? (progress * 100) / 25 : ((progress - 25) * 100) / 75;
-  const actorLeft = progress >= 25 && progress <=75 ? ((progress - 25) * 100) / 50 : progress > 75 ? ((progress-75) * 50) / 25 : ((progress + 25) * 100) / 50 ;
-  
+  // progress <= 25 ? (progress * 100) / 25 : ((progress - 25) * 100) / 75;
+  const actorLeft =
+    progress >= 25 && progress <= 75
+      ? ((progress - 25) * 100) / 50
+      : progress > 75
+      ? ((progress - 75) * 50) / 25
+      : ((progress + 25) * 100) / 50;
 
   return {
-    scene,
+    scene: testScene || scene,
     opacity,
     progress,
     actorLeft,
@@ -45,6 +61,7 @@ export function setDayParameters() {
   if (!document.querySelector(".actor")) {
     const actor = document.createElement("div");
     actor.classList.add("actor");
+    actor.classList.toggle(moonPhase, scene === "night");
     document.querySelector("main")?.appendChild(actor);
   }
 
@@ -52,7 +69,6 @@ export function setDayParameters() {
   root?.style.setProperty("--day-opacity", opacity.toString());
   root?.style.setProperty("--actor-left", actorLeft.toString());
   root?.style.setProperty("--day-progress", progress.toString());
-  root?.style.setProperty("--moon-phase", moonPhase);
   root?.setAttribute("data-progress", progress.toString());
   root?.setAttribute("data-scene", scene);
 }
diff --git a/src/modules/fonts.ts b/src/modules/fonts.ts
index 27a107c5e..f113ef8a0 100644
--- a/src/modules/fonts.ts
+++ b/src/modules/fonts.ts
@@ -18,7 +18,7 @@ export const THEME_FONTS: Record<string, string[]> = {
   frame: ["Playfair Display"],
   subtle: ["Unna"],
   poster: ["Averia Serif Libre", "Allura"],
-  dynamic: ["Sunshiney", "Yeseva One", "Rye", "Tilt Neon", "Jacquard 12"],
+  dynamic: ["Sunshiney", "Yeseva One", "Rye", "Megrim", "Jacquard 12"],
 };
 
 export const INITIAL_THEME_FONT_SIZE = {
diff --git a/src/styles/styles.css b/src/styles/styles.css
index d3697974a..060263b41 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -1,7 +1,7 @@
 @import url(main.css);
 
-@import url(themes/anaglyph.css);
 @import url(themes/base.css);
+@import url(themes/anaglyph.css);
 @import url(themes/bohemian.css);
 @import url(themes/colors.css);
 @import url(themes/dynamic.css);
diff --git a/src/styles/themes/dynamic.css b/src/styles/themes/dynamic.css
index e03fa195c..5a3064165 100644
--- a/src/styles/themes/dynamic.css
+++ b/src/styles/themes/dynamic.css
@@ -19,11 +19,6 @@
   box-shadow: 0 0 0 0 rgb(189, 189, 189) inset;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor {
-  background-color: #FFFFFF;
-  box-shadow: 0 0 0 0 rgb(189, 189, 189) inset, 0 0 40px 0px #FFF;
-}
-
 [data-theme|="dynamic"][data-scene="sunrise"] .actor {
   background-color: rgb(242, 242, 184);
   box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
@@ -38,7 +33,12 @@
 }
 
 [data-theme|="dynamic"][data-scene="sunrise"] {
-  --background-image: linear-gradient(to top, rgb(230, 174, 41), rgb(246, 248, 98) 18.49%, #9dc6ff 57.98%);
+  --background-image: linear-gradient(
+    to top,
+    rgb(230, 174, 41),
+    rgb(246, 248, 98) 18.49%,
+    #9dc6ff 57.98%
+  );
   --quote-font-family: "Sunshiney", cursive;
   --font-color: #333;
 }
@@ -61,33 +61,100 @@
 }
 
 [data-theme|="dynamic"][data-scene="dusk"] {
-  --background-image: linear-gradient(to top, rgba(173, 53, 25, 1), rgba(250, 131, 73, 1) 4.2%, rgba(170, 125, 131, 1) 10.5%, rgba(50, 47, 76, 1) 26.89%, rgb(7, 7, 21) 40.34%);
+  --background-image: linear-gradient(
+    to top,
+    rgba(173, 53, 25, 1),
+    rgba(250, 131, 73, 1) 4.2%,
+    rgba(170, 125, 131, 1) 10.5%,
+    rgba(50, 47, 76, 1) 26.89%,
+    rgb(7, 7, 21) 40.34%
+  );
   /* --accent-color: rgb(17, 0, 255); */
-  --quote-font-family: "Tilt Neon", serif;
+  --quote-font-family: "Megrim", serif;
   --font-color: #fafafa;
 }
 
 [data-theme|="dynamic"][data-scene="dusk"] .time {
-  text-shadow:
-      0 0 4px #fff,
-      0 0 11px #fff,
-      0 0 19px #fff,
-      0 0 40px #f09,
-      0 0 80px #f09,
-      0 0 90px #f09,
-      0 0 100px #f09,
-      0 0 150px #f09;
-  color: #FFFFFF;
+  text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #f09,
+    0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09, 0 0 150px #f09;
+  color: #ffffff;
 }
 
 [data-theme|="dynamic"][data-scene="night"] {
-  --accent-color: #FFF;
+  --accent-color: #fff;
   --bg-opacity: 1;
-  --background-image: linear-gradient(to bottom, rgba(0, 1, 32, var(--bg-opacity)), rgba(0, 0, 0, var(--bg-opacity))), linear-gradient(
-    to top,
-    rgb(241, 114, 21),
-    rgb(246, 248, 98) 10%,
-    #9dc6ff 60%
-  );
+  --background-image: linear-gradient(
+      to bottom,
+      rgba(0, 1, 32, var(--bg-opacity)),
+      rgba(0, 0, 0, var(--bg-opacity))
+    ),
+    linear-gradient(
+      to top,
+      rgb(241, 114, 21),
+      rgb(246, 248, 98) 10%,
+      #9dc6ff 60%
+    );
   --quote-font-family: "Jacquard 12", serif;
 }
+
+[data-theme|="dynamic"][data-scene="night"] .actor {
+  --glow-box-shadow: 0 0 40px 0px #fff;
+  background-color: #f0f0f0;
+  box-shadow: var(--glow-box-shadow);
+  overflow: hidden;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor:before {
+  content: "";
+  height: 2.5vw;
+  width: 2.5vw;
+  display: inline-block;
+  background-color: #c5cdd4;
+  border-radius: 50%;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+  box-shadow: 2vw 2vw 0 -0.3vw #c5cdd4, -0.7vw 2.9vw 0 -0.5vw #c5cdd4;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.new {
+  background: #262626;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.waxing-crescent:after,
+[data-theme|="dynamic"][data-scene="night"] .actor.first-quarter:after,
+[data-theme|="dynamic"][data-scene="night"] .actor.waning-crescent:after,
+[data-theme|="dynamic"][data-scene="night"] .actor.third-quarter:after {
+  height: 11vw;
+  content: "";
+  width: 10vw;
+  background: rgba(0, 0, 0, 0.8);
+  display: inline-block;
+  filter: blur(1px);
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.waxing-crescent:after {
+  transform: translateX(-25%) translateY(-5px);
+  border-radius: 50%;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.first-quarter:after {
+  transform: translateX(-50%) translateY(-3px);
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.waning-crescent:after {
+  transform: translateX(25%) translateY(-5px);
+  border-radius: 50%;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.waning-gibbous {
+  box-shadow: var(--glow-box-shadow), -38px 0 1px -15px rgba(0, 0, 0, 0.8) inset;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.waxing-gibbous {
+  box-shadow: var(--glow-box-shadow), 38px 0 1px -15px rgba(0, 0, 0, 0.8) inset;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .actor.third-quarter:after {
+  transform: translateX(50%) translateY(-3px);
+}

From 597ed61504015319571857e65a6111fd33153f81 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Sun, 19 May 2024 00:18:03 +0100
Subject: [PATCH 11/12] Dynamic night updates

---
 src/modules/dynamic.test.ts   |  28 ++---
 src/modules/dynamic.ts        |  22 ++--
 src/modules/fonts.ts          |   9 +-
 src/styles/themes/dynamic.css | 214 ++++++++++++++++++++++++++++------
 4 files changed, 216 insertions(+), 57 deletions(-)

diff --git a/src/modules/dynamic.test.ts b/src/modules/dynamic.test.ts
index 98b74a2ef..a26f6805a 100644
--- a/src/modules/dynamic.test.ts
+++ b/src/modules/dynamic.test.ts
@@ -38,24 +38,24 @@ describe("getDayProgress", () => {
 describe("getDayParameters", () => {
   const dayParameterResponse = (
     scene: string,
-    actor: string,
+    actorLeft: number,
     opacity: number,
     progress: number
-  ) => ({ scene, actor, opacity, progress });
+  ) => ({ scene, actorLeft, opacity, progress });
 
   const PARAMETERS = {
-    "0": dayParameterResponse("dawn", "moon", 0, 0),
-    "16.67": dayParameterResponse("dawn", "moon", 0.33, 16.67),
-    "25": dayParameterResponse("sunrise", "sun", 0.5, 25),
-    "32.78": dayParameterResponse("sunrise", "sun", 0.66, 32.78),
-    "33.33": dayParameterResponse("sunrise", "sun", 0.67, 33.33),
-    "37.5": dayParameterResponse("sunrise", "sun", 0.75, 37.5),
-    "45.83": dayParameterResponse("sunrise", "sun", 0.92, 45.83),
-    "50": dayParameterResponse("sunset", "sun", 1, 50),
-    "60.83": dayParameterResponse("sunset", "sun", 0.78, 60.83),
-    "75": dayParameterResponse("dusk", "moon", 0.5, 75),
-    "79.17": dayParameterResponse("dusk", "moon", 0.42, 79.17),
-    "100": dayParameterResponse("dusk", "moon", 0, 100),
+    "0": dayParameterResponse("night", 50, 0, 0),
+    "16.67": dayParameterResponse("night", 83.34, 0.33, 16.67),
+    "25": dayParameterResponse("morning", 0, 0.5, 25),
+    "32.78": dayParameterResponse("morning", 15.56, 0.66, 32.78),
+    "33.33": dayParameterResponse("morning", 16.66, 0.67, 33.33),
+    "37.5": dayParameterResponse("morning", 25, 0.75, 37.5),
+    "45.83": dayParameterResponse("morning", 41.66, 0.92, 45.83),
+    "50": dayParameterResponse("morning", 50, 1, 50),
+    "60.83": dayParameterResponse("afternoon", 71.66, 0.78, 60.83),
+    "75": dayParameterResponse("evening", 100, 0.5, 75),
+    "79.17": dayParameterResponse("evening", 8.34, 0.42, 79.17),
+    "100": dayParameterResponse("night", 50, 0, 100),
   };
 
   Object.entries(PROGRESS).forEach(([progress, date]) => {
diff --git a/src/modules/dynamic.ts b/src/modules/dynamic.ts
index ad9be5a29..0fb0850f3 100644
--- a/src/modules/dynamic.ts
+++ b/src/modules/dynamic.ts
@@ -24,14 +24,18 @@ export function getDayProgress() {
 
 export function getDayParameters() {
   const progress = getDayProgress();
+  // 9pm to 5am
   let scene = "night";
 
-  if (progress >= 25 && progress < 50) {
-    scene = "sunrise";
-  } else if (progress >= 50 && progress < 75) {
-    scene = "sunset";
-  } else if (progress >= 75) {
-    scene = "dusk";
+  // 5am to 12pm
+  if (progress >= 20.83 && progress <= 50) {
+    scene = "morning";
+  } // 12pm to 5pm
+  else if (progress > 50 && progress <= 70.83) {
+    scene = "afternoon";
+  } // 5pm to 9pm
+  else if (progress > 70.83 && progress <= 87.5) {
+    scene = "evening";
   }
 
   const opacity = parseFloat(
@@ -51,16 +55,16 @@ export function getDayParameters() {
     scene: testScene || scene,
     opacity,
     progress,
-    actorLeft,
+    actorLeft: parseFloat(actorLeft.toFixed(2)),
   };
 }
 
 export function setDayParameters() {
   const { opacity, progress, scene, actorLeft } = getDayParameters();
 
-  if (!document.querySelector(".actor")) {
+  if (!document.querySelector(".sun.moon")) {
     const actor = document.createElement("div");
-    actor.classList.add("actor");
+    actor.classList.add("sun", "moon");
     actor.classList.toggle(moonPhase, scene === "night");
     document.querySelector("main")?.appendChild(actor);
   }
diff --git a/src/modules/fonts.ts b/src/modules/fonts.ts
index f113ef8a0..025824e68 100644
--- a/src/modules/fonts.ts
+++ b/src/modules/fonts.ts
@@ -18,7 +18,14 @@ export const THEME_FONTS: Record<string, string[]> = {
   frame: ["Playfair Display"],
   subtle: ["Unna"],
   poster: ["Averia Serif Libre", "Allura"],
-  dynamic: ["Sunshiney", "Yeseva One", "Rye", "Megrim", "Jacquard 12"],
+  dynamic: [
+    "Sunshiney",
+    "Yeseva One",
+    "Rye",
+    "Megrim",
+    "Jacquard 12",
+    "Sacramento",
+  ],
 };
 
 export const INITIAL_THEME_FONT_SIZE = {
diff --git a/src/styles/themes/dynamic.css b/src/styles/themes/dynamic.css
index 5a3064165..64c9167b5 100644
--- a/src/styles/themes/dynamic.css
+++ b/src/styles/themes/dynamic.css
@@ -2,10 +2,12 @@
   position: relative;
 }
 
-[data-theme|="dynamic"] .actor {
+[data-theme|="dynamic"] .sun.moon {
   content: "";
   width: 10vw;
   height: 10vw;
+  min-width: 50px;
+  min-height: 50px;
   border-radius: 50%;
   position: absolute;
   left: calc(var(--actor-left) * 1%);
@@ -14,12 +16,12 @@
   top: 100px;
 }
 
-[data-theme|="dynamic"][data-scene="dusk"] .actor {
+[data-theme|="dynamic"][data-scene="evening"] .sun {
   background-color: #000000;
   box-shadow: 0 0 0 0 rgb(189, 189, 189) inset;
 }
 
-[data-theme|="dynamic"][data-scene="sunrise"] .actor {
+[data-theme|="dynamic"][data-scene="morning"] .sun {
   background-color: rgb(242, 242, 184);
   box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
   filter: blur(2px);
@@ -32,7 +34,7 @@
   content: none;
 }
 
-[data-theme|="dynamic"][data-scene="sunrise"] {
+[data-theme|="dynamic"][data-scene="morning"] {
   --background-image: linear-gradient(
     to top,
     rgb(230, 174, 41),
@@ -43,12 +45,12 @@
   --font-color: #333;
 }
 
-[data-theme|="dynamic"][data-scene="sunrise"] blockquote {
+[data-theme|="dynamic"][data-scene="morning"] blockquote {
   padding: 1rem 2rem;
   border-radius: 0.25rem;
 }
 
-[data-theme|="dynamic"][data-scene="sunset"] {
+[data-theme|="dynamic"][data-scene="afternoon"] {
   --background-image: linear-gradient(
     0deg,
     rgba(173, 53, 25, 1) 0%,
@@ -60,7 +62,7 @@
   --accent-color: rgba(28, 27, 43, 1);
 }
 
-[data-theme|="dynamic"][data-scene="dusk"] {
+[data-theme|="dynamic"][data-scene="evening"] {
   --background-image: linear-gradient(
     to top,
     rgba(173, 53, 25, 1),
@@ -69,20 +71,16 @@
     rgba(50, 47, 76, 1) 26.89%,
     rgb(7, 7, 21) 40.34%
   );
-  /* --accent-color: rgb(17, 0, 255); */
   --quote-font-family: "Megrim", serif;
   --font-color: #fafafa;
 }
 
-[data-theme|="dynamic"][data-scene="dusk"] .time {
-  text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #f09,
-    0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09, 0 0 150px #f09;
-  color: #ffffff;
-}
-
 [data-theme|="dynamic"][data-scene="night"] {
   --accent-color: #fff;
   --bg-opacity: 1;
+  --background: #000000;
+  --font-color: #ffffff;
+  --glow-box-shadow: 0 0 70px 10px #fff;
   --background-image: linear-gradient(
       to bottom,
       rgba(0, 1, 32, var(--bg-opacity)),
@@ -94,17 +92,150 @@
       rgb(246, 248, 98) 10%,
       #9dc6ff 60%
     );
-  --quote-font-family: "Jacquard 12", serif;
+  --quote-font-family: "Sacramento", serif;
+}
+
+[data-theme|="dynamic"][data-scene="night"] body::before {
+  content: "";
+  height: 3px;
+  width: 3px;
+  box-shadow: 1116px 214px #fff, 551px 1238px #fff, 1372px 1472px #fff,
+    554px 332px #fff, 799px 264px #fff, 688px 1107px #fff, 719px 232px #fff,
+    1604px 312px #fff, 950px 12px #fff, 471px 787px #fff, 1453px 1455px #fff,
+    653px 1028px #fff, 520px 1753px #fff, 1703px 1212px #fff, 455px 578px #fff,
+    645px 795px #fff, 1591px 1559px #fff, 1297px 296px #fff, 804px 1075px #fff,
+    1175px 147px #fff, 878px 1140px #fff, 898px 792px #fff, 1025px 1470px #fff,
+    1063px 1728px #fff, 621px 188px #fff, 1428px 704px #fff, 879px 288px #fff,
+    1080px 366px #fff, 1426px 168px #fff, 1152px 1384px #fff, 1107px 46px #fff,
+    56px 1099px #fff, 401px 1448px #fff, 671px 1192px #fff, 1423px 494px #fff,
+    1523px 478px #fff, 527px 1443px #fff, 1365px 248px #fff, 707px 1629px #fff,
+    1305px 520px #fff, 528px 1072px #fff, 29px 1125px #fff, 1716px 149px #fff,
+    222px 1361px #fff, 105px 71px #fff, 1252px 1763px #fff, 654px 698px #fff,
+    1647px 142px #fff, 1470px 388px #fff, 492px 810px #fff, 955px 1625px #fff,
+    349px 1446px #fff, 1709px 1204px #fff, 1694px 782px #fff, 1498px 1766px #fff,
+    1125px 1370px #fff, 1787px 697px #fff, 442px 1691px #fff, 219px 1593px #fff,
+    672px 699px #fff, 751px 1082px #fff, 1725px 1585px #fff, 844px 1597px #fff,
+    273px 506px #fff, 203px 852px #fff, 1567px 928px #fff, 1078px 574px #fff,
+    1441px 1262px #fff, 308px 882px #fff, 559px 1353px #fff, 1139px 1090px #fff,
+    525px 447px #fff, 1436px 1218px #fff, 1312px 992px #fff, 1702px 672px #fff,
+    1303px 619px #fff, 521px 171px #fff, 1697px 1587px #fff, 275px 948px #fff,
+    1602px 585px #fff, 1582px 1553px #fff, 449px 1757px #fff, 813px 303px #fff,
+    560px 1211px #fff, 929px 1299px #fff, 268px 758px #fff, 769px 758px #fff,
+    572px 864px #fff, 904px 1730px #fff, 1012px 240px #fff, 961px 1290px #fff,
+    894px 1088px #fff, 439px 969px #fff, 1025px 644px #fff, 614px 753px #fff,
+    800px 1158px #fff, 632px 165px #fff, 984px 1043px #fff, 497px 643px #fff,
+    1016px 747px #fff, 261px 487px #fff, 1327px 249px #fff, 1482px 1591px #fff,
+    1176px 41px #fff, 342px 643px #fff, 553px 78px #fff, 45px 750px #fff,
+    1709px 80px #fff, 182px 341px #fff, 818px 931px #fff, 511px 8px #fff,
+    1400px 723px #fff, 632px 787px #fff, 651px 1250px #fff, 1572px 1353px #fff,
+    1655px 1476px #fff, 893px 358px #fff, 1487px 259px #fff, 1520px 97px #fff,
+    839px 191px #fff, 960px 630px #fff, 373px 602px #fff, 102px 904px #fff,
+    1204px 1246px #fff, 1230px 915px #fff, 459px 90px #fff, 1052px 977px #fff,
+    451px 1524px #fff, 1598px 942px #fff, 545px 1468px #fff, 1018px 115px #fff,
+    1237px 303px #fff, 1149px 666px #fff, 707px 1500px #fff, 1360px 1248px #fff,
+    1764px 101px #fff, 372px 277px #fff, 1644px 870px #fff, 298px 1600px #fff,
+    1252px 87px #fff, 1512px 161px #fff, 1100px 1484px #fff, 1703px 964px #fff,
+    188px 1366px #fff, 1148px 303px #fff, 1483px 55px #fff, 1462px 688px #fff,
+    473px 1549px #fff, 1467px 1486px #fff, 1023px 1411px #fff,
+    1334px 1689px #fff, 682px 212px #fff, 1584px 1754px #fff, 1012px 1317px #fff,
+    1420px 538px #fff, 164px 163px #fff, 720px 1556px #fff, 220px 74px #fff,
+    706px 532px #fff, 238px 955px #fff, 1774px 435px #fff, 513px 1734px #fff,
+    200px 447px #fff, 304px 1514px #fff, 299px 31px #fff, 1214px 1404px #fff,
+    292px 1432px #fff, 974px 832px #fff, 1242px 648px #fff, 1720px 605px #fff,
+    1565px 1073px #fff, 438px 800px #fff, 1043px 1660px #fff, 7px 1658px #fff,
+    362px 1472px #fff, 572px 414px #fff, 1231px 53px #fff, 185px 253px #fff,
+    794px 1342px #fff, 1687px 1093px #fff, 903px 629px #fff, 564px 709px #fff,
+    773px 259px #fff, 759px 1416px #fff, 1039px 1117px #fff, 262px 1581px #fff,
+    702px 1433px #fff, 1244px 112px #fff, 805px 1038px #fff, 686px 431px #fff,
+    1140px 1060px #fff, 1628px 1528px #fff, 572px 139px #fff, 699px 405px #fff,
+    857px 995px #fff, 1356px 810px #fff, 1588px 1167px #fff, 1086px 1311px #fff,
+    1039px 1609px #fff, 876px 409px #fff, 1541px 391px #fff, 993px 1793px #fff,
+    1187px 1298px #fff, 1503px 1703px #fff, 537px 424px #fff, 1294px 1294px #fff,
+    406px 407px #fff, 635px 1390px #fff, 443px 904px #fff, 193px 351px #fff,
+    1325px 597px #fff, 1609px 736px #fff, 1100px 762px #fff, 1535px 168px #fff,
+    1389px 1100px #fff, 1318px 1010px #fff, 835px 550px #fff, 1393px 837px #fff,
+    130px 1318px #fff, 274px 226px #fff, 185px 1014px #fff, 346px 606px #fff,
+    611px 691px #fff, 1264px 1447px #fff, 1097px 466px #fff, 835px 798px #fff,
+    255px 279px #fff, 473px 899px #fff, 1044px 1405px #fff, 1382px 1080px #fff,
+    637px 1044px #fff, 1794px 1132px #fff, 28px 484px #fff, 1385px 1029px #fff,
+    1001px 1744px #fff, 1783px 1466px #fff, 624px 703px #fff, 114px 607px #fff,
+    274px 1603px #fff, 940px 1115px #fff, 667px 1553px #fff, 508px 1500px #fff,
+    1589px 268px #fff, 793px 262px #fff, 741px 1726px #fff, 1676px 1471px #fff,
+    1624px 558px #fff, 700px 334px #fff, 1418px 1369px #fff, 1114px 682px #fff,
+    1299px 735px #fff, 150px 1385px #fff, 198px 388px #fff, 1625px 1503px #fff,
+    780px 1002px #fff, 913px 484px #fff, 1563px 1266px #fff, 911px 897px #fff,
+    84px 120px #fff, 700px 1494px #fff, 557px 336px #fff, 1356px 424px #fff,
+    1490px 111px #fff, 707px 1512px #fff, 1537px 895px #fff, 186px 1378px #fff,
+    1567px 1422px #fff, 568px 1058px #fff, 136px 396px #fff, 1151px 239px #fff,
+    1114px 629px #fff, 475px 414px #fff, 1217px 1186px #fff, 1794px 686px #fff,
+    1024px 758px #fff, 366px 1647px #fff, 1295px 369px #fff, 951px 1213px #fff,
+    339px 1026px #fff, 838px 764px #fff, 1241px 720px #fff, 1px 238px #fff,
+    1188px 1500px #fff, 596px 1689px #fff, 994px 1243px #fff, 312px 1222px #fff,
+    935px 1772px #fff, 722px 1031px #fff, 1219px 1666px #fff, 1351px 178px #fff,
+    316px 1519px #fff, 167px 138px #fff, 861px 1763px #fff, 72px 13px #fff,
+    1548px 1800px #fff, 649px 1689px #fff, 1135px 1144px #fff, 1037px 765px #fff,
+    1041px 1064px #fff, 1507px 826px #fff, 1769px 89px #fff, 815px 571px #fff,
+    526px 887px #fff, 910px 1300px #fff, 901px 649px #fff, 1567px 919px #fff,
+    9px 1497px #fff, 1030px 332px #fff, 464px 124px #fff, 292px 327px #fff,
+    503px 1028px #fff, 705px 1086px #fff, 1099px 92px #fff, 402px 801px #fff,
+    995px 1040px #fff, 1151px 399px #fff, 600px 250px #fff, 1797px 758px #fff,
+    670px 1394px #fff, 1547px 350px #fff, 1134px 1128px #fff, 950px 602px #fff,
+    1572px 383px #fff, 1248px 1163px #fff, 1319px 817px #fff, 742px 90px #fff,
+    947px 523px #fff, 621px 1492px #fff, 1221px 205px #fff, 13px 173px #fff,
+    1603px 1122px #fff, 85px 999px #fff, 775px 810px #fff, 649px 976px #fff,
+    43px 923px #fff, 930px 1325px #fff, 1157px 1003px #fff, 1431px 1435px #fff,
+    657px 206px #fff, 837px 794px #fff, 887px 960px #fff, 396px 197px #fff,
+    1024px 295px #fff, 1428px 138px #fff, 1756px 1409px #fff, 1531px 1345px #fff,
+    1433px 944px #fff, 644px 520px #fff, 635px 30px #fff, 451px 1523px #fff,
+    1303px 1179px #fff, 269px 800px #fff, 387px 1621px #fff, 336px 503px #fff,
+    842px 1413px #fff, 1231px 133px #fff, 557px 1170px #fff, 490px 1541px #fff,
+    99px 1494px #fff, 128px 1273px #fff, 827px 1214px #fff, 182px 1055px #fff,
+    46px 609px #fff, 592px 1329px #fff, 1111px 304px #fff, 331px 1466px #fff,
+    1541px 309px #fff, 540px 376px #fff, 1571px 195px #fff, 361px 1543px #fff,
+    795px 443px #fff, 935px 1116px #fff, 972px 1162px #fff, 910px 1311px #fff,
+    892px 829px #fff, 652px 118px #fff, 1691px 1685px #fff, 1482px 785px #fff,
+    712px 570px #fff, 1421px 50px #fff, 1502px 18px #fff, 828px 1389px #fff,
+    1537px 662px #fff, 1571px 1293px #fff, 738px 1575px #fff, 880px 1492px #fff,
+    667px 1722px #fff, 76px 1634px #fff, 1201px 1222px #fff, 1797px 798px #fff,
+    1515px 886px #fff, 1663px 137px #fff, 1113px 502px #fff, 1589px 1723px #fff,
+    1479px 1609px #fff, 162px 542px #fff, 1372px 1064px #fff, 70px 793px #fff,
+    1594px 1650px #fff, 317px 967px #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  animation: star-glow 0.1s alternate ease-in-out infinite;
+}
+
+@keyframes star-glow {
+  from {
+    opacity: 0.8;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor {
-  --glow-box-shadow: 0 0 40px 0px #fff;
+[data-theme|="dynamic"][data-scene="night"] blockquote {
+  text-shadow: 0 0 2px #05021a, 0 0 4px #000;
+}
+
+[data-theme|="dynamic"][data-scene="night"] .moon {
   background-color: #f0f0f0;
-  box-shadow: var(--glow-box-shadow);
   overflow: hidden;
+  animation: glow 2s ease-in-out infinite alternate;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor:before {
+@keyframes glow {
+  from {
+    box-shadow: var(--glow-box-shadow);
+  }
+  to {
+    box-shadow: 0 0 70px 10px #ffffffd2;
+  }
+}
+
+[data-theme|="dynamic"][data-scene="night"] .moon:before {
   content: "";
   height: 2.5vw;
   width: 2.5vw;
@@ -117,44 +248,61 @@
   box-shadow: 2vw 2vw 0 -0.3vw #c5cdd4, -0.7vw 2.9vw 0 -0.5vw #c5cdd4;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor.new {
+[data-theme|="dynamic"][data-scene="night"] .moon.new {
   background: #262626;
 }
+[data-theme|="dynamic"][data-scene="night"] .moon.new:before {
+  opacity: 0.02;
+}
 
-[data-theme|="dynamic"][data-scene="night"] .actor.waxing-crescent:after,
-[data-theme|="dynamic"][data-scene="night"] .actor.first-quarter:after,
-[data-theme|="dynamic"][data-scene="night"] .actor.waning-crescent:after,
-[data-theme|="dynamic"][data-scene="night"] .actor.third-quarter:after {
+[data-theme|="dynamic"][data-scene="night"] .moon.waxing-crescent:after,
+[data-theme|="dynamic"][data-scene="night"] .moon.first-quarter:after,
+[data-theme|="dynamic"][data-scene="night"] .moon.waning-crescent:after,
+[data-theme|="dynamic"][data-scene="night"] .moon.third-quarter:after {
   height: 11vw;
   content: "";
   width: 10vw;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.85);
   display: inline-block;
   filter: blur(1px);
+  min-height: 60px;
+  min-width: 50px;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor.waxing-crescent:after {
+[data-theme|="dynamic"][data-scene="night"] .moon.waxing-crescent:after {
   transform: translateX(-25%) translateY(-5px);
   border-radius: 50%;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor.first-quarter:after {
+[data-theme|="dynamic"][data-scene="night"] .moon.first-quarter:after {
   transform: translateX(-50%) translateY(-3px);
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor.waning-crescent:after {
+[data-theme|="dynamic"][data-scene="night"] .moon.waning-crescent:after {
   transform: translateX(25%) translateY(-5px);
   border-radius: 50%;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor.waning-gibbous {
-  box-shadow: var(--glow-box-shadow), -38px 0 1px -15px rgba(0, 0, 0, 0.8) inset;
+[data-theme|="dynamic"][data-scene="night"] .moon.waning-gibbous {
+  box-shadow: var(--glow-box-shadow),
+    -3.5vw 0 1px -1.5vw rgba(0, 0, 0, 0.85) inset;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor.waxing-gibbous {
-  box-shadow: var(--glow-box-shadow), 38px 0 1px -15px rgba(0, 0, 0, 0.8) inset;
+[data-theme|="dynamic"][data-scene="night"] .moon.waxing-gibbous {
+  box-shadow: var(--glow-box-shadow), 38px 0 1px -15px rgba(0, 0, 0, 0.85) inset;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .actor.third-quarter:after {
+[data-theme|="dynamic"][data-scene="night"] .moon.third-quarter:after {
   transform: translateX(50%) translateY(-3px);
 }
+
+[data-theme|="dynamic"][data-scene="night"] .time {
+  text-shadow: 0 0 2px #05021a, 0 0 4px #000, 0 0 4px #fff, 0 0 11px #fff,
+    0 0 19px #fff, 0 0 40px #f09, 0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09,
+    0 0 150px #f09;
+  color: #ffffff;
+}
+
+[data-theme|="dynamic"][data-scene="night"] #time-progress-bar {
+  animation: glow 2s ease-in-out infinite alternate;
+}

From 6fce02b6b4eb012d057201047eb8f29f8e75f607 Mon Sep 17 00:00:00 2001
From: Carlos Bonadeo <carlosbonadeo@gmail.com>
Date: Mon, 20 May 2024 16:43:20 +0100
Subject: [PATCH 12/12] First version of dynamic theme

---
 index.html                    |   4 +-
 src/modules/dynamic.test.ts   |  30 ++++-----
 src/modules/dynamic.ts        |  30 +++------
 src/modules/fonts.ts          |   3 +-
 src/strings/translations.json |  10 +--
 src/styles/themes/dynamic.css | 111 +++++++++++++++++++++-------------
 6 files changed, 104 insertions(+), 84 deletions(-)

diff --git a/index.html b/index.html
index 9da06d5a0..11f7a0b54 100644
--- a/index.html
+++ b/index.html
@@ -198,7 +198,9 @@
               </select>
             </span>
             <select id="font-select" tabindex="7">
-              <option value="default" data-text="themeFont">Theme font</option>
+              <option value="default" data-text="default_font">
+                Theme font
+              </option>
             </select>
           </span>
         </div>
diff --git a/src/modules/dynamic.test.ts b/src/modules/dynamic.test.ts
index a26f6805a..ca550c1f2 100644
--- a/src/modules/dynamic.test.ts
+++ b/src/modules/dynamic.test.ts
@@ -38,24 +38,24 @@ describe("getDayProgress", () => {
 describe("getDayParameters", () => {
   const dayParameterResponse = (
     scene: string,
-    actorLeft: number,
-    opacity: number,
+    period: string,
+    segment: number,
     progress: number
-  ) => ({ scene, actorLeft, opacity, progress });
+  ) => ({ scene, period, segment, progress });
 
   const PARAMETERS = {
-    "0": dayParameterResponse("night", 50, 0, 0),
-    "16.67": dayParameterResponse("night", 83.34, 0.33, 16.67),
-    "25": dayParameterResponse("morning", 0, 0.5, 25),
-    "32.78": dayParameterResponse("morning", 15.56, 0.66, 32.78),
-    "33.33": dayParameterResponse("morning", 16.66, 0.67, 33.33),
-    "37.5": dayParameterResponse("morning", 25, 0.75, 37.5),
-    "45.83": dayParameterResponse("morning", 41.66, 0.92, 45.83),
-    "50": dayParameterResponse("morning", 50, 1, 50),
-    "60.83": dayParameterResponse("afternoon", 71.66, 0.78, 60.83),
-    "75": dayParameterResponse("evening", 100, 0.5, 75),
-    "79.17": dayParameterResponse("evening", 8.34, 0.42, 79.17),
-    "100": dayParameterResponse("night", 50, 0, 100),
+    "0": dayParameterResponse("night", "am", 0, 0),
+    "16.67": dayParameterResponse("night", "am", 1, 16.67),
+    "25": dayParameterResponse("morning", "am", 2, 25),
+    "32.78": dayParameterResponse("morning", "am", 3, 32.78),
+    "33.33": dayParameterResponse("morning", "am", 3, 33.33),
+    "37.5": dayParameterResponse("morning", "am", 3, 37.5),
+    "45.83": dayParameterResponse("morning", "am", 4, 45.83),
+    "50": dayParameterResponse("morning", "pm", 4, 50),
+    "60.83": dayParameterResponse("afternoon", "pm", 5, 60.83),
+    "75": dayParameterResponse("evening", "pm", 6, 75),
+    "79.17": dayParameterResponse("evening", "pm", 6, 79.17),
+    "100": dayParameterResponse("night", "pm", 8, 100),
   };
 
   Object.entries(PROGRESS).forEach(([progress, date]) => {
diff --git a/src/modules/dynamic.ts b/src/modules/dynamic.ts
index 0fb0850f3..b363c1f34 100644
--- a/src/modules/dynamic.ts
+++ b/src/modules/dynamic.ts
@@ -3,7 +3,7 @@ const MOON_PHASES = [
   "waxing-crescent",
   "first-quarter",
   "waxing-gibbous",
-  "full-moon",
+  "full",
   "waning-gibbous",
   "third-quarter",
   "waning-crescent",
@@ -26,7 +26,6 @@ export function getDayParameters() {
   const progress = getDayProgress();
   // 9pm to 5am
   let scene = "night";
-
   // 5am to 12pm
   if (progress >= 20.83 && progress <= 50) {
     scene = "morning";
@@ -38,41 +37,32 @@ export function getDayParameters() {
     scene = "evening";
   }
 
-  const opacity = parseFloat(
-    (progress <= 50 ? progress / 50 : 1 - (progress / 50 - 1)).toFixed(2)
-  );
+  const segment = Math.round((progress * 8) / 100);
 
-  // const actorLeft =
-  // progress <= 25 ? (progress * 100) / 25 : ((progress - 25) * 100) / 75;
-  const actorLeft =
-    progress >= 25 && progress <= 75
-      ? ((progress - 25) * 100) / 50
-      : progress > 75
-      ? ((progress - 75) * 50) / 25
-      : ((progress + 25) * 100) / 50;
+  const period = progress < 50 ? "am" : "pm";
 
   return {
     scene: testScene || scene,
-    opacity,
     progress,
-    actorLeft: parseFloat(actorLeft.toFixed(2)),
+    period,
+    segment,
   };
 }
 
 export function setDayParameters() {
-  const { opacity, progress, scene, actorLeft } = getDayParameters();
+  const { progress, scene, segment, period } = getDayParameters();
 
-  if (!document.querySelector(".sun.moon")) {
+  if (!document.querySelector(".sphere")) {
     const actor = document.createElement("div");
-    actor.classList.add("sun", "moon");
+    actor.classList.add("sphere");
     actor.classList.toggle(moonPhase, scene === "night");
     document.querySelector("main")?.appendChild(actor);
   }
 
   const root = document.querySelector<HTMLElement>(":root");
-  root?.style.setProperty("--day-opacity", opacity.toString());
-  root?.style.setProperty("--actor-left", actorLeft.toString());
   root?.style.setProperty("--day-progress", progress.toString());
   root?.setAttribute("data-progress", progress.toString());
   root?.setAttribute("data-scene", scene);
+  root?.setAttribute("data-period", period);
+  root?.setAttribute("data-segment", segment.toString());
 }
diff --git a/src/modules/fonts.ts b/src/modules/fonts.ts
index 025824e68..f27503a60 100644
--- a/src/modules/fonts.ts
+++ b/src/modules/fonts.ts
@@ -19,12 +19,13 @@ export const THEME_FONTS: Record<string, string[]> = {
   subtle: ["Unna"],
   poster: ["Averia Serif Libre", "Allura"],
   dynamic: [
-    "Sunshiney",
+    "Caveat",
     "Yeseva One",
     "Rye",
     "Megrim",
     "Jacquard 12",
     "Sacramento",
+    "Indie Flower",
   ],
 };
 
diff --git a/src/strings/translations.json b/src/strings/translations.json
index a84ea993c..ce19e5ca7 100644
--- a/src/strings/translations.json
+++ b/src/strings/translations.json
@@ -52,7 +52,7 @@
     "it-IT": "Italian",
     "random": "Random language",
 
-    "themeFont": "Theme font"
+    "default_font": "Default font"
   },
   "es-ES": {
     "document_title": "Reloj Literario",
@@ -107,7 +107,7 @@
     "it-IT": "Italiano",
     "random": "Lenguaje aleatorio",
 
-    "themeFont": "Fuente del tema"
+    "default_font": "Fuente por defecto"
   },
   "pt-BR": {
     "document_title": "Relógio da Literatura",
@@ -162,7 +162,7 @@
     "it-IT": "Italiano",
     "random": "Idioma aleatório",
 
-    "themeFont": "Fonte do tema"
+    "default_font": "Fonte padrão"
   },
   "fr-FR": {
     "document_title": "Horloge de la Littérature",
@@ -217,7 +217,7 @@
     "it-IT": "Italien",
     "random": "Langue aléatoire",
 
-    "themeFont": "Police du thème"
+    "default_font": "Police par défaut"
   },
   "it-IT": {
     "document_title": "Orologio della Letteratura",
@@ -273,6 +273,6 @@
     "it-IT": "Italiano",
     "random": "Lingua casuale",
 
-    "themeFont": "Font del tema "
+    "default_font": "Font predefinito "
   }
 }
diff --git a/src/styles/themes/dynamic.css b/src/styles/themes/dynamic.css
index 64c9167b5..f73efc671 100644
--- a/src/styles/themes/dynamic.css
+++ b/src/styles/themes/dynamic.css
@@ -1,8 +1,9 @@
 [data-theme|="dynamic"] body {
   position: relative;
+  transition: background 120s;
 }
 
-[data-theme|="dynamic"] .sun.moon {
+[data-theme|="dynamic"] .sphere {
   content: "";
   width: 10vw;
   height: 10vw;
@@ -10,69 +11,87 @@
   min-height: 50px;
   border-radius: 50%;
   position: absolute;
-  left: calc(var(--actor-left) * 1%);
-  transition: left 60s;
-  transform: translateX(-50%);
-  top: 100px;
+  left: calc(var(--day-progress) * 1%);
+  transition: left 60s, top 60s;
+  transform: translateX(-50%) translateY(-50%);
 }
 
-[data-theme|="dynamic"][data-scene="evening"] .sun {
+[data-theme|="dynamic"][data-scene="evening"] .sphere {
   background-color: #000000;
   box-shadow: 0 0 0 0 rgb(189, 189, 189) inset;
 }
 
-[data-theme|="dynamic"][data-scene="morning"] .sun {
-  background-color: rgb(242, 242, 184);
-  box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
-  filter: blur(2px);
-  top: calc(100% - var(--day-progress) * 1%);
-  opacity: 0.5;
-}
-
 [data-theme|="dynamic"] blockquote:before,
 [data-theme|="dynamic"] blockquote:after {
   content: none;
 }
 
 [data-theme|="dynamic"][data-scene="morning"] {
+  --background: transparent;
+  --font-color: #000;
   --background-image: linear-gradient(
     to top,
     rgb(230, 174, 41),
     rgb(246, 248, 98) 18.49%,
     #9dc6ff 57.98%
   );
-  --quote-font-family: "Sunshiney", cursive;
+  --quote-font-family: "Caveat", cursive;
   --font-color: #333;
 }
 
-[data-theme|="dynamic"][data-scene="morning"] blockquote {
-  padding: 1rem 2rem;
-  border-radius: 0.25rem;
+[data-theme|="dynamic"][data-scene="morning"] .sphere {
+  background-color: rgb(242, 242, 184);
+  box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
+  filter: blur(2px);
+  top: calc(100% - var(--day-progress) * 1%);
+  opacity: 0.5;
 }
 
 [data-theme|="dynamic"][data-scene="afternoon"] {
-  --background-image: linear-gradient(
-    0deg,
-    rgba(173, 53, 25, 1) 0%,
-    rgba(250, 131, 73, 1) 9%,
-    rgba(170, 125, 131, 1) 21%,
-    rgba(50, 47, 76, 1) 65%,
-    rgba(28, 27, 43, 1) 86%
-  );
-  --accent-color: rgba(28, 27, 43, 1);
+  --background: #c2e9fb;
+  --font-color: #000;
+  --background-image: linear-gradient(to top, #c2e9fb, #a1c4fd);
+  --quote-font-family: "Indie Flower", cursive;
+}
+
+[data-theme|="dynamic"][data-scene="afternoon"] .sphere {
+  background-color: rgb(242, 242, 184);
+  box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
+  filter: blur(2px);
+  top: calc(100% - var(--day-progress) * 1%);
+  opacity: 0.7;
 }
 
 [data-theme|="dynamic"][data-scene="evening"] {
+  --background: rgb(14, 14, 36);
+  --font-color: #fff;
   --background-image: linear-gradient(
     to top,
     rgba(173, 53, 25, 1),
     rgba(250, 131, 73, 1) 4.2%,
     rgba(170, 125, 131, 1) 10.5%,
     rgba(50, 47, 76, 1) 26.89%,
-    rgb(7, 7, 21) 40.34%
+    rgb(14, 14, 36) 60.34%
   );
   --quote-font-family: "Megrim", serif;
   --font-color: #fafafa;
+  --accent-color: #ffa700;
+}
+
+[data-theme|="dynamic"][data-scene="evening"] .sphere {
+  background-color: rgb(242, 242, 184);
+  box-shadow: 0 0 51px 18px rgb(238, 241, 21), 0 0 71px 58px rgb(241, 114, 21);
+  filter: blur(2px);
+  top: calc(var(--day-progress) * 1%);
+  opacity: 0.6;
+}
+
+[data-theme|="dynamic"][data-scene="evening"] blockquote {
+  text-shadow: 0 0 2px #05021a, 0 0 4px #000;
+}
+
+[data-theme|="dynamic"][data-scene="evening"] footer a {
+  color: #000000;
 }
 
 [data-theme|="dynamic"][data-scene="night"] {
@@ -220,12 +239,20 @@
   text-shadow: 0 0 2px #05021a, 0 0 4px #000;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon {
+[data-theme|="dynamic"][data-scene="night"] .sphere {
   background-color: #f0f0f0;
   overflow: hidden;
   animation: glow 2s ease-in-out infinite alternate;
 }
 
+[data-theme|="dynamic"][data-scene="night"][day-period="pm"] .sphere {
+  left: calc(100% - var(--day-progress) * 1%);
+}
+
+[data-theme|="dynamic"][data-scene="night"][day-period="am"] .sphere {
+  left: calc(var(--day-progress) * 1%);
+}
+
 @keyframes glow {
   from {
     box-shadow: var(--glow-box-shadow);
@@ -235,7 +262,7 @@
   }
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon:before {
+[data-theme|="dynamic"][data-scene="night"] .sphere:before {
   content: "";
   height: 2.5vw;
   width: 2.5vw;
@@ -248,17 +275,17 @@
   box-shadow: 2vw 2vw 0 -0.3vw #c5cdd4, -0.7vw 2.9vw 0 -0.5vw #c5cdd4;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.new {
+[data-theme|="dynamic"][data-scene="night"] .sphere.new {
   background: #262626;
 }
-[data-theme|="dynamic"][data-scene="night"] .moon.new:before {
+[data-theme|="dynamic"][data-scene="night"] .sphere.new:before {
   opacity: 0.02;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.waxing-crescent:after,
-[data-theme|="dynamic"][data-scene="night"] .moon.first-quarter:after,
-[data-theme|="dynamic"][data-scene="night"] .moon.waning-crescent:after,
-[data-theme|="dynamic"][data-scene="night"] .moon.third-quarter:after {
+[data-theme|="dynamic"][data-scene="night"] .sphere.waxing-crescent:after,
+[data-theme|="dynamic"][data-scene="night"] .sphere.first-quarter:after,
+[data-theme|="dynamic"][data-scene="night"] .sphere.waning-crescent:after,
+[data-theme|="dynamic"][data-scene="night"] .sphere.third-quarter:after {
   height: 11vw;
   content: "";
   width: 10vw;
@@ -269,30 +296,30 @@
   min-width: 50px;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.waxing-crescent:after {
+[data-theme|="dynamic"][data-scene="night"] .sphere.waxing-crescent:after {
   transform: translateX(-25%) translateY(-5px);
   border-radius: 50%;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.first-quarter:after {
+[data-theme|="dynamic"][data-scene="night"] .sphere.first-quarter:after {
   transform: translateX(-50%) translateY(-3px);
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.waning-crescent:after {
+[data-theme|="dynamic"][data-scene="night"] .sphere.waning-crescent:after {
   transform: translateX(25%) translateY(-5px);
   border-radius: 50%;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.waning-gibbous {
+[data-theme|="dynamic"][data-scene="night"] .sphere.waning-gibbous {
   box-shadow: var(--glow-box-shadow),
     -3.5vw 0 1px -1.5vw rgba(0, 0, 0, 0.85) inset;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.waxing-gibbous {
+[data-theme|="dynamic"][data-scene="night"] .sphere.waxing-gibbous {
   box-shadow: var(--glow-box-shadow), 38px 0 1px -15px rgba(0, 0, 0, 0.85) inset;
 }
 
-[data-theme|="dynamic"][data-scene="night"] .moon.third-quarter:after {
+[data-theme|="dynamic"][data-scene="night"] .sphere.third-quarter:after {
   transform: translateX(50%) translateY(-3px);
 }