Foreground color setting

2 files changed, 7 insertions, 1 deletions

diff --git a/extension/src/components/Body.tsx b/extension/src/components/Body.tsx
index 34492b4..6498a0a 100644
--- a/extension/src/components/Body.tsx
+++ b/extension/src/components/Body.tsx
@@ -50,6 +50,7 @@ function Body() {
                 case "color": return (<style>{"body {background-color: " + settings.backgroundColor + "; }"}</style>)
                 case "image": return (<style>{"body {background-image: url(\"" + settings.backgroundImage + "\"); }"}</style>)
             }})()}
+            <style>{"body > .folderBody, a {color: " + settings.foregroundColor + "; }"}</style>
             <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
                 <img alt="open settings" src={imageUrl}/>
             </button>
diff --git a/extension/src/components/SettingsEditor.tsx b/extension/src/components/SettingsEditor.tsx
index abf9888..edd99f9 100644
--- a/extension/src/components/SettingsEditor.tsx
+++ b/extension/src/components/SettingsEditor.tsx
@@ -66,6 +66,11 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean,  Rea
                 }
             })()}
 
+            <h3>Foreground Color</h3>
+            <input type={"color"}
+                   value={settings.foregroundColor}
+                   onChange={e => setSettings({...settings, foregroundColor: e.target.value})}/>
+
             <h3>Root folder</h3>
             <select value={settings.rootFolder!}
                     onChange={e => setSettings({...settings, rootFolder: e.target.value})}>
@@ -79,7 +84,7 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean,  Rea
             {/*<span>rootFolder: {settings.rootFolder}</span>*/}
             {/*<span>bgmode: {settings.backgroundMode}</span>*/}
         </div>
-)
+    )
 }
 
 /**