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);
                 }