Foreground color setting

4 files changed, 10 insertions, 2 deletions

diff --git a/extension/src/Settings.ts b/extension/src/Settings.ts
index 2bf490b..ce6c344 100644
--- a/extension/src/Settings.ts
+++ b/extension/src/Settings.ts
@@ -6,6 +6,7 @@ export interface ISettings {
     backgroundMode: "theme" | "color" | "image"
     backgroundColor: string
     backgroundImage: string
+    foregroundColor: string
     editMode: boolean
     rootFolder: string | null
 }
@@ -16,6 +17,7 @@ export let defaultSettings: ISettings = {
     backgroundMode: "theme",
     backgroundColor: "#000000",
     backgroundImage: "",
+    foregroundColor: "#FFFFFF",
     editMode: false,
     rootFolder: '0',
 }
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>
-)
+    )
 }
 
 /**
diff --git a/extension/src/index.css b/extension/src/index.css
index 33c176b..6b3ba69 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -53,7 +53,7 @@ body {
   border-style: solid;
   border-width: 2px;
   border-radius: 5px;
-  border-color: #393939;
+  border-color: rgba(0, 0, 0, 0.5);
   margin: 5px;
   padding: 10px;
   flex-wrap: wrap;