From ac5e5c92b8627b44333fbb257ef932b70ec35d29 Mon Sep 17 00:00:00 2001
From: Judah Sotomayor <judah.sotomayor@pm.me>
Date: Thu, 26 Jun 2025 19:44:45 -0400
Subject: [PATCH] Fix color themes related to notes.

Previously several colors related to notes would not switch
appropriately when themes changed.
This patch corrects that mistake.
Fix the notes main page colors.
Fix the note indicators in-text.
---
 src/lib/components/CardMenu.svelte            | 11 +++--
 src/lib/components/IconCard.svelte            |  9 ++++-
 src/lib/components/NoteDialog.svelte          | 40 +++++++++++++++----
 src/lib/components/ScriptureViewSofria.svelte |  7 ++--
 4 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/CardMenu.svelte b/src/lib/components/CardMenu.svelte
index 95095be03..a33234a0e 100644
--- a/src/lib/components/CardMenu.svelte
+++ b/src/lib/components/CardMenu.svelte
@@ -4,7 +4,7 @@ A drop-down menu for use in ColorCard, HistoryCard, and IconCard.
 Dispatches a menuaction event when an option is selected from the menu.
 -->
 <script lang="ts">
-    import { monoIconColor } from '$lib/data/stores';
+    import { monoIconColor, themeColors } from '$lib/data/stores';
     import MoreVertIcon from '$lib/icons/MoreVertIcon.svelte';
 
     let { menuaction, actions = [''] } = $props();
@@ -26,12 +26,17 @@ Dispatches a menuaction event when an option is selected from the menu.
         <MoreVertIcon color={$monoIconColor} />
     </div>
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <ul tabindex="0" class="dy-dropdown-content dy-menu shadow bg-base-100 z-10">
+    <ul
+        style:background={$themeColors['PopupBackgroundColor']}
+        tabindex="0"
+        color=""
+        class="dy-dropdown-content dy-menu shadow bg-base-100 z-10"
+    >
         {#each actions as a}
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <!-- svelte-ignore a11y_missing_attribute -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <li><a onclick={() => handleAction(a)}>{a}</a></li>
+            <li><a color={$monoIconColor} onclick={() => handleAction(a)}>{a}</a></li>
         {/each}
     </ul>
 </div>
diff --git a/src/lib/components/IconCard.svelte b/src/lib/components/IconCard.svelte
index a3d8a7a87..914268293 100644
--- a/src/lib/components/IconCard.svelte
+++ b/src/lib/components/IconCard.svelte
@@ -7,7 +7,7 @@ TODO:
 <script lang="ts">
     import { base } from '$app/paths';
     import config from '$lib/data/config';
-    import { direction, refs } from '$lib/data/stores';
+    import { direction, refs, themeColors } from '$lib/data/stores';
     import CardMenu from './CardMenu.svelte';
 
     let {
@@ -67,7 +67,12 @@ TODO:
             </a>
         </div>
 
-        <div class="annotation-item-date col-span-3 justify-self-end">{date}</div>
+        <div
+            style:color={$themeColors['TextColor']}
+            class="annotation-item-date col-span-3 justify-self-end"
+        >
+            {date}
+        </div>
     </div>
 </div>
 
diff --git a/src/lib/components/NoteDialog.svelte b/src/lib/components/NoteDialog.svelte
index 4fb3ec768..903052733 100644
--- a/src/lib/components/NoteDialog.svelte
+++ b/src/lib/components/NoteDialog.svelte
@@ -2,7 +2,14 @@
 
 <script lang="ts">
     import { addNote, editNote } from '$lib/data/notes';
-    import { bodyFontSize, currentFont, selectedVerses, t } from '$lib/data/stores';
+    import {
+        bodyFontSize,
+        currentFont,
+        monoIconColor,
+        selectedVerses,
+        t,
+        themeColors
+    } from '$lib/data/stores';
     import { EditIcon } from '$lib/icons';
     import Modal from './Modal.svelte';
 
@@ -56,7 +63,11 @@
 <Modal bind:this={modal} {id} onclose={reset}>
     <div class="flex flex-col justify-evenly">
         <div class="w-full flex justify-between">
-            <div class="w-full pb-3" style:font-weight={editing ? 'normal' : 'bold'}>
+            <div
+                style:color={$themeColors['TitlesColor']}
+                class="w-full pb-3"
+                style:font-weight={editing ? 'normal' : 'bold'}
+            >
                 {heading}
             </div>
             {#if !editing}
@@ -65,17 +76,26 @@
                         editing = true;
                     }}
                 >
-                    <EditIcon />
+                    <EditIcon color={$monoIconColor} />
                 </button>
             {/if}
         </div>
         <div style:word-wrap="break-word">
             {#if editing}
-                <textarea bind:value={text} class="dy-textarea w-full"></textarea>
+                <textarea
+                    style:color={$themeColors['TextColor']}
+                    style:background={$themeColors['PopupBackgroundColor']}
+                    bind:value={text}
+                    class="dy-textarea w-full"
+                ></textarea>
             {:else if text !== undefined}
                 {#each text.split(/\r?\n/) as line}
                     {#if line}
-                        <p style:font-family={$currentFont} style:font-size="{$bodyFontSize}px">
+                        <p
+                            style:color={$themeColors['TextColor']}
+                            style:font-family={$currentFont}
+                            style:font-size="{$bodyFontSize}px"
+                        >
                             {line}
                         </p>
                     {:else}
@@ -86,9 +106,13 @@
         </div>
         {#if editing}
             <div class="w-full flex mt-4 justify-between">
-                <button class="dy-btn dy-btn-sm dy-btn-ghost">{$t['Button_Cancel']}</button>
-                <button onclick={modifyNote} class="dy-btn dy-btn-sm dy-btn-ghost"
-                    >{$t['Button_OK']}</button
+                <button style:color={$monoIconColor} class="dy-btn dy-btn-sm dy-btn-ghost"
+                    >{$t['Button_Cancel']}</button
+                >
+                <button
+                    onclick={modifyNote}
+                    style:color={$monoIconColor}
+                    class="dy-btn dy-btn-sm dy-btn-ghost">{$t['Button_OK']}</button
                 >
             </div>
         {/if}
diff --git a/src/lib/components/ScriptureViewSofria.svelte b/src/lib/components/ScriptureViewSofria.svelte
index 6b66a34f2..0cc8c3567 100644
--- a/src/lib/components/ScriptureViewSofria.svelte
+++ b/src/lib/components/ScriptureViewSofria.svelte
@@ -31,6 +31,7 @@ LOGGING:
         logs,
         modal,
         MODAL_NOTE,
+        monoIconColor,
         plan,
         refs,
         t,
@@ -681,9 +682,7 @@ LOGGING:
         }
         el?.parentNode.insertBefore(notesSpan, el.nextSibling);
     }
-    const noteSvg = () => {
-        return '<svg fill="#000000" style="display:inline" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 96 96"><path d="M 21.07 74.80 L 8.76 87.35 Q 8.00 88.12 8.00 87.03 Q 8.00 52.12 8.00 18.00 Q 8.00 7.73 18.00 7.80 Q 48.00 8.00 78.00 8.00 Q 88.27 8.00 88.18 18.00 Q 88.00 40.13 88.09 62.25 Q 88.13 72.31 78.00 72.22 C 72.03 72.17 25.23 70.89 23.56 72.37 Q 22.78 73.07 21.07 74.80 Z M 72.00 21.60 A 0.60 0.60 0.0 0 0 71.40 21.00 L 24.60 21.00 A 0.60 0.60 0.0 0 0 24.00 21.60 L 24.00 28.40 A 0.60 0.60 0.0 0 0 24.60 29.00 L 71.40 29.00 A 0.60 0.60 0.0 0 0 72.00 28.40 L 72.00 21.60 Z M 72.00 35.60 A 0.60 0.60 0.0 0 0 71.40 35.00 L 24.60 35.00 A 0.60 0.60 0.0 0 0 24.00 35.60 L 24.00 42.40 A 0.60 0.60 0.0 0 0 24.60 43.00 L 71.40 43.00 A 0.60 0.60 0.0 0 0 72.00 42.40 L 72.00 35.60 Z M 60.00 49.60 A 0.60 0.60 0.0 0 0 59.40 49.00 L 24.60 49.00 A 0.60 0.60 0.0 0 0 24.00 49.60 L 24.00 56.40 A 0.60 0.60 0.0 0 0 24.60 57.00 L 59.40 57.00 A 0.60 0.60 0.0 0 0 60.00 56.40 L 60.00 49.60 Z"</path></svg>';
-    };
+    $: noteSvg = `<svg fill="${$monoIconColor}" style="display:inline" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 96 96"><path d="M 21.07 74.80 L 8.76 87.35 Q 8.00 88.12 8.00 87.03 Q 8.00 52.12 8.00 18.00 Q 8.00 7.73 18.00 7.80 Q 48.00 8.00 78.00 8.00 Q 88.27 8.00 88.18 18.00 Q 88.00 40.13 88.09 62.25 Q 88.13 72.31 78.00 72.22 C 72.03 72.17 25.23 70.89 23.56 72.37 Q 22.78 73.07 21.07 74.80 Z M 72.00 21.60 A 0.60 0.60 0.0 0 0 71.40 21.00 L 24.60 21.00 A 0.60 0.60 0.0 0 0 24.00 21.60 L 24.00 28.40 A 0.60 0.60 0.0 0 0 24.60 29.00 L 71.40 29.00 A 0.60 0.60 0.0 0 0 72.00 28.40 L 72.00 21.60 Z M 72.00 35.60 A 0.60 0.60 0.0 0 0 71.40 35.00 L 24.60 35.00 A 0.60 0.60 0.0 0 0 24.00 35.60 L 24.00 42.40 A 0.60 0.60 0.0 0 0 24.60 43.00 L 71.40 43.00 A 0.60 0.60 0.0 0 0 72.00 42.40 L 72.00 35.60 Z M 60.00 49.60 A 0.60 0.60 0.0 0 0 59.40 49.00 L 24.60 49.00 A 0.60 0.60 0.0 0 0 24.00 49.60 L 24.00 56.40 A 0.60 0.60 0.0 0 0 24.60 57.00 L 59.40 57.00 A 0.60 0.60 0.0 0 0 60.00 56.40 L 60.00 49.60 Z"</path></svg>`;
     function editNote(note) {
         modal.open(MODAL_NOTE, note);
     }
@@ -701,7 +700,7 @@ LOGGING:
                 if (!existingNoteSpan) {
                     let noteSpan = document.createElement('span');
                     noteSpan.id = 'note' + k;
-                    noteSpan.innerHTML = noteSvg();
+                    noteSpan.innerHTML = noteSvg;
                     noteSpan.onclick = (event) => editNote(note);
                     bookmarksSpan.appendChild(noteSpan);
                 }