From 0e0601642ac9aa353d0141f922c6c3e538f97088 Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Thu, 3 Aug 2023 08:58:36 +0900
Subject: [PATCH] [feat] add color scheme

---
 src/App.svelte                                |   4 +-
 src/lang/en.ts                                |   1 +
 src/lib/ChatScreens/AssetInput.svelte         |   2 +-
 src/lib/ChatScreens/Chat.svelte               |   8 +-
 src/lib/ChatScreens/CreatorQuote.svelte       |   2 +-
 src/lib/ChatScreens/DefaultChatScreen.svelte  |  22 +--
 src/lib/ChatScreens/ResizeBox.svelte          |   8 +-
 src/lib/ChatScreens/Suggestion.svelte         |  14 +-
 src/lib/Others/AlertComp.svelte               |   4 +-
 src/lib/Others/ChatList.svelte                |  16 +-
 src/lib/Others/GithubStars.svelte             |   4 +-
 src/lib/Others/GridCatalog.svelte             |   6 +-
 src/lib/Others/WelcomeRisu.svelte             |   4 +-
 src/lib/Setting/Pages/AdvancedSettings.svelte |  14 +-
 src/lib/Setting/Pages/BotSettings.svelte      | 186 +++++++++---------
 src/lib/Setting/Pages/DisplaySettings.svelte  |  50 +++--
 src/lib/Setting/Pages/GlobalRegex.svelte      |   2 +-
 src/lib/Setting/Pages/LanguageSettings.svelte |   4 +-
 src/lib/Setting/Pages/OtherBotSettings.svelte |  36 ++--
 src/lib/Setting/Pages/PersonaSettings.svelte  |  16 +-
 src/lib/Setting/Pages/PluginSettings.svelte   |   6 +-
 src/lib/Setting/Pages/UserSettings.svelte     |   2 +-
 src/lib/Setting/Settings.svelte               |  32 +--
 src/lib/Setting/botpreset.svelte              |  22 +--
 src/lib/Setting/lorepreset.svelte             |  12 +-
 src/lib/SideBars/CharConfig.svelte            | 122 ++++++------
 src/lib/SideBars/LoreBook/LoreBookData.svelte |  16 +-
 src/lib/SideBars/LoreBook/LoreBookList.svelte |   6 +-
 .../SideBars/LoreBook/LoreBookSetting.svelte  |  14 +-
 src/lib/SideBars/Scripts/RegexData.svelte     |  10 +-
 src/lib/SideBars/Scripts/RegexList.svelte     |   2 +-
 src/lib/SideBars/Scripts/TriggerData.svelte   |  46 ++---
 src/lib/SideBars/Scripts/TriggerList.svelte   |   2 +-
 src/lib/SideBars/SideChatList.svelte          |   8 +-
 src/lib/SideBars/Sidebar.svelte               |  18 +-
 src/lib/UI/BaseRoundedButton.svelte           |   2 +-
 src/lib/UI/GUI/Button.svelte                  |   2 +-
 src/lib/UI/GUI/CheckInput.svelte              |   4 +-
 src/lib/UI/GUI/NumberInput.svelte             |   2 +-
 src/lib/UI/GUI/SelectInput.svelte             |   2 +-
 src/lib/UI/GUI/SideBarArrow.svelte            |   4 +-
 src/lib/UI/GUI/SliderInput.svelte             |   4 +-
 src/lib/UI/GUI/TextAreaInput.svelte           |   4 +-
 src/lib/UI/GUI/TextAreaResizable.svelte       |   2 +-
 src/lib/UI/GUI/TextInput.svelte               |   2 +-
 src/lib/UI/MainMenu.svelte                    |  18 +-
 src/lib/UI/ModelList.svelte                   |   2 +-
 src/lib/UI/Realm/RealmHubIcon.svelte          |  10 +-
 src/lib/UI/Realm/RealmLicense.svelte          |   2 +-
 src/lib/UI/Realm/RealmMain.svelte             |   2 +-
 src/lib/UI/Realm/RealmPopUp.svelte            |  18 +-
 src/lib/UI/Realm/RealmUpload.svelte           |  22 +--
 src/styles.css                                |  20 +-
 src/ts/gui/colorscheme.ts                     | 160 +++++++++++++++
 src/ts/storage/database.ts                    |  36 +---
 src/ts/storage/globalApi.ts                   |  22 ++-
 tailwind.config.js                            |  14 +-
 57 files changed, 622 insertions(+), 453 deletions(-)
 create mode 100644 src/ts/gui/colorscheme.ts

diff --git a/src/App.svelte b/src/App.svelte
index 62bed479..fa68739e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -23,9 +23,9 @@
 
 </script>
 
-<main class="flex bg-bg w-full h-full max-w-100vw">
+<main class="flex bg-bg w-full h-full max-w-100vw text-textcolor">
     {#if !$loadedStore}
-        <div class="w-full h-full flex justify-center items-center text-gray-200 text-xl">
+        <div class="w-full h-full flex justify-center items-center text-textcolor text-xl">
             <span>Loading...</span>
         </div>
     {:else if !didFirstSetup}
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 95428fac..d5326aab 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -399,4 +399,5 @@ export const languageEnglish = {
     ifRandom: "If random",
     hideRealm: "Hide RisuRealm",
     popularityLevel: "{} Popularity",
+    colorScheme: "Color Scheme",
 }
\ No newline at end of file
diff --git a/src/lib/ChatScreens/AssetInput.svelte b/src/lib/ChatScreens/AssetInput.svelte
index 0bf4d097..7158c06b 100644
--- a/src/lib/ChatScreens/AssetInput.svelte
+++ b/src/lib/ChatScreens/AssetInput.svelte
@@ -28,7 +28,7 @@
     }
 </script>
 {#if currentCharacter.type ==='character'}
-    <button class="hover:text-green-500 bg-gray-500 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
+    <button class="hover:text-green-500 bg-textcolor2 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
         if(currentCharacter.type === 'character'){
             const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
             currentCharacter.additionalAssets = currentCharacter.additionalAssets ?? []
diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index d59b6a18..45773df1 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -75,18 +75,18 @@
     $: displaya(message)
 </script>
 <div class="flex max-w-full justify-center risu-chat" class:bgc={isLastMemory}>
-    <div class="text-neutral-200 mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
+    <div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
         {#await img}
-            <div class="shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
+            <div class="shadow-lg bg-textcolor2 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
             class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
         {:then m}
-            <div class="shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
+            <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
             class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}  />
         {/await}
         <span class="flex flex-col ml-4 w-full max-w-full min-w-0">
             <div class="flexium items-center chat">
                 <span class="chat text-xl unmargin">{name}</span>
-                <div class="flex-grow flex items-center justify-end text-gray-500">
+                <div class="flex-grow flex items-center justify-end text-textcolor2">
                     <span class="text-xs">{statusMessage}</span>
                     {#if $DataBase.useChatCopy}
                         <button class="ml-2 hover:text-green-500 transition-colors" on:click={()=>{
diff --git a/src/lib/ChatScreens/CreatorQuote.svelte b/src/lib/ChatScreens/CreatorQuote.svelte
index ea4023a0..5d6ab518 100644
--- a/src/lib/ChatScreens/CreatorQuote.svelte
+++ b/src/lib/ChatScreens/CreatorQuote.svelte
@@ -1,5 +1,5 @@
 <div class="flex w-full justify-center mt-4 max-w-100vw">
-    <div class="w-5/6 max-w-80vw bg-darkbg rounded-md p-3 text-white text-sm">
+    <div class="w-5/6 max-w-80vw bg-darkbg rounded-md p-3 text-textcolor text-sm">
         <h1 class="font-bold mb-2">{language.creatorNotes}
             <button class="float-right" on:click={onRemove}>
                 <XIcon />
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index bb175fce..231087ff 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -270,7 +270,7 @@
                 mergedCanvas.height = totalHeight;
             }
 
-            mergedCtx.fillStyle = '#282a36'
+            mergedCtx.fillStyle = 'var(--risu-theme-bgcolor)'
             mergedCtx.fillRect(0, 0, maxWidth, totalHeight);
             let indh = 0
             for(let i = 0; i < canvases.length; i++) {
@@ -313,11 +313,11 @@
             <div class="flex items-end mt-2 mb-2 w-full">
                 {#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
                     <div on:click={()=>{toggleStickers = !toggleStickers}}
-                            class={"ml-4 bg-gray-500 flex justify-center items-center  w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-white')}>
+                            class={"ml-4 bg-textcolor2 flex justify-center items-center  w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-textcolor')}>
                             <Laugh/>
                     </div>    
                 {/if}
-                <textarea class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
+                <textarea class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
                     bind:value={messageInput}
                     bind:this={inputEle}
                     on:keydown={(e) => {
@@ -339,28 +339,28 @@
                 
                 {#if $doingChat || doingChatInputTranslate}
                     <div
-                        class="mr-2 bg-selected flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}>
+                        class="mr-2 bg-selected flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}>
                         <div class="loadmove" class:autoload={autoMode}>
                         </div>
                     </div>
                 {:else}
                     <div on:click={send}
-                        class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
+                        class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
                     </div>
                 {/if}
                     <div on:click={(e) => {
                         openMenu = !openMenu
                         e.stopPropagation()
                     }}
-                    class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
+                    class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
                     </div>
             </div>
             {#if $DataBase.useAutoTranslateInput}
                 <div class="flex items-center mt-2 mb-2 w-full">
-                    <label for='messageInputTranslate' class="text-neutral-200 ml-4">
+                    <label for='messageInputTranslate' class="text-textcolor ml-4">
                         <LanguagesIcon />
                     </label>
-                    <textarea id = 'messageInputTranslate' class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
+                    <textarea id = 'messageInputTranslate' class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
                         bind:value={messageInputTranslate}
                         bind:this={inputTranslateEle}
                         on:keydown={(e) => {
@@ -491,7 +491,7 @@
             {/if}
 
             {#if openMenu}
-                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
+                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor" on:click={(e) => {
                     e.stopPropagation()
                 }}>
                     {#if $DataBase.characters[$selectedCharID].type === 'group'}
@@ -569,8 +569,8 @@
         border: 0.4rem solid rgba(0,0,0,0);
         width: 1rem;
         height: 1rem;
-        border-top: 0.4rem solid #6272a4;
-        border-left: 0.4rem solid #6272a4;
+        border-top: 0.4rem solid var(--risu-theme-borderc);
+        border-left: 0.4rem solid var(--risu-theme-borderc);
     }
 
     .autoload{
diff --git a/src/lib/ChatScreens/ResizeBox.svelte b/src/lib/ChatScreens/ResizeBox.svelte
index ba29e916..495e7830 100644
--- a/src/lib/ChatScreens/ResizeBox.svelte
+++ b/src/lib/ChatScreens/ResizeBox.svelte
@@ -63,8 +63,8 @@
         position: absolute;
         right: 0px;
         top: 0px;
-        border-bottom: 1px solid #6272a4;
-        border-left: 1px solid #6272a4;
+        border-bottom: 1px solid var(--risu-theme-borderc);
+        border-left: 1px solid var(--risu-theme-borderc);
         width: 12rem;
         height: 12rem;
         z-index: 5;
@@ -74,8 +74,8 @@
         position: absolute;
         width: 16px;
         height: 16px;
-        border-top: 1px solid #6272a4;
-        border-right: 1px solid #6272a4;
+        border-top: 1px solid var(--risu-theme-borderc);
+        border-right: 1px solid var(--risu-theme-borderc);
         cursor: sw-resize;
         bottom: 0;
         left: 0;
diff --git a/src/lib/ChatScreens/Suggestion.svelte b/src/lib/ChatScreens/Suggestion.svelte
index fab8ffdf..c6aa0b4b 100644
--- a/src/lib/ChatScreens/Suggestion.svelte
+++ b/src/lib/ChatScreens/Suggestion.svelte
@@ -128,14 +128,14 @@
 
 <div class="ml-4 flex flex-wrap">
     {#if progress}
-        <div class="flex bg-gray-500 p-2 rounded-lg items-center">
+        <div class="flex bg-textcolor2 p-2 rounded-lg items-center">
             <div class="loadmove mx-2"/>
             <div>{language.creatingSuggestions}</div>
         </div>        
     {:else if !$doingChat}
         {#if $DataBase.translator !== ''}
             <div class="flex mr-2 mb-2">
-                <button class={"bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 rounded " + (toggleTranslate ? 'text-green-500' : 'text-white')}
+                <button class={"bg-textcolor2 hover:bg-darkbutton font-bold py-2 px-4 rounded " + (toggleTranslate ? 'text-green-500' : 'text-textcolor')}
                     on:click={() => {
                         toggleTranslate = !toggleTranslate
                     }}
@@ -147,7 +147,7 @@
         
 
         <div class="flex mr-2 mb-2">
-            <button class="bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 rounded text-white"
+            <button class="bg-textcolor2 hover:bg-darkbutton font-bold py-2 px-4 rounded text-textcolor"
                 on:click={() => {
                     alertConfirm(language.askReRollAutoSuggestions).then((result) => {
                         if(result) {
@@ -163,7 +163,7 @@
         </div>
         {#each suggestMessages??[] as suggest, i}
             <div class="flex mr-2 mb-2">
-                <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded" on:click={() => {
+                <button class="bg-textcolor2 hover:bg-darkbutton text-textcolor font-bold py-2 px-4 rounded" on:click={() => {
                     suggestMessages = []
                     messageInput(suggest)
                     send()
@@ -172,7 +172,7 @@
                     {@html md}
                 {/await}
                 </button>
-                <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded ml-1" on:click={() => {
+                <button class="bg-textcolor2 hover:bg-darkbutton text-textcolor font-bold py-2 px-4 rounded ml-1" on:click={() => {
                     messageInput(suggest)
                 }}>
                     <CopyIcon/>
@@ -191,8 +191,8 @@
         border: 0.4rem solid rgba(0,0,0,0);
         width: 1rem;
         height: 1rem;
-        border-top: 0.4rem solid white;
-        border-left: 0.4rem solid white;
+        border-top: 0.4rem solid var(--risu-theme-textcolor);
+        border-left: 0.4rem solid var(--risu-theme-textcolor);
     }
 
     @keyframes spin {
diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index ed78f202..863a8099 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -61,7 +61,7 @@
             {:else if $alertStore.type === 'tos'}
                 <!-- svelte-ignore a11y-missing-attribute -->
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class="text-white">You should accept RisuRealm's <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
+                <div class="text-textcolor">You should accept RisuRealm's <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
                     openURL('https://sv.risuai.xyz/hub/tos')
                 }}>Terms of Service</a> to continue</div>
             {:else if $alertStore.type !== 'select'}
@@ -161,7 +161,7 @@
         </div>
     </div>
 {:else if $alertStore.type === 'toast'}
-    <div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl  max-h-11/12 overflow-y-auto z-50 text-neutral-200"
+    <div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl  max-h-11/12 overflow-y-auto z-50 text-textcolor"
         on:animationend={() => {
             alertStore.set({
                 type: 'none',
diff --git a/src/lib/Others/ChatList.svelte b/src/lib/Others/ChatList.svelte
index 1d151433..007ba81a 100644
--- a/src/lib/Others/ChatList.svelte
+++ b/src/lib/Others/ChatList.svelte
@@ -14,10 +14,10 @@
 
 <div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
     <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-72 max-h-full overflow-y-auto">
-        <div class="flex items-center text-neutral-200 mb-4">
+        <div class="flex items-center text-textcolor mb-4">
             <h2 class="mt-0 mb-0">{language.chatList}</h2>
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
                     <XIcon size={24}/>
                 </button>
             </div>
@@ -28,20 +28,20 @@
                     $DataBase.characters[$selectedCharID].chatPage = i
                      close()
                 }
-            }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
                 {#if editMode}
                     <TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
                 {:else}
                     <span>{chat.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         exportChat(i)
                     }}>
                         <DownloadIcon size={18}/>
                     </button>
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.characters[$selectedCharID].chats.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -61,7 +61,7 @@
             </button>
         {/each}
         <div class="flex mt-2 items-center">
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
                 const cha = $DataBase.characters[$selectedCharID]
                 const len = $DataBase.characters[$selectedCharID].chats.length
                 let chats = $DataBase.characters[$selectedCharID].chats
@@ -83,12 +83,12 @@
             }}>
                 <PlusIcon/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
                 importChat()
             }}>
                 <FolderUpIcon size={18}/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
                 editMode = !editMode
             }}>
                 <EditIcon size={18}/>
diff --git a/src/lib/Others/GithubStars.svelte b/src/lib/Others/GithubStars.svelte
index 9130ded3..c50def08 100644
--- a/src/lib/Others/GithubStars.svelte
+++ b/src/lib/Others/GithubStars.svelte
@@ -17,12 +17,12 @@
       <img src="/icon/github-mark-white.svg" width="24" alt="github" />
     </button>
   {/if}
-  <button class="text-white" on:click={() => {
+  <button class="text-textcolor" on:click={() => {
     openURL("https://www.patreon.com/RisuAI")
   }}>
     <WalletIcon size={24} />
   </button>
-  <button class="text-white" on:click={() => {
+  <button class="text-textcolor" on:click={() => {
     openURL("mailto:amasio1234@proton.me")
   }}>
     <MailIcon size={24} />
diff --git a/src/lib/Others/GridCatalog.svelte b/src/lib/Others/GridCatalog.svelte
index 8e09c7a6..eed5cd57 100644
--- a/src/lib/Others/GridCatalog.svelte
+++ b/src/lib/Others/GridCatalog.svelte
@@ -38,16 +38,16 @@
 
 <div class="h-full w-full flex justify-center">
     <div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
-        <h1 class="text-neutral-200 text-2xl font-bold mt-2">Catalog</h1>
+        <h1 class="text-textcolor text-2xl font-bold mt-2">Catalog</h1>
         <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
         <div class="w-full flex justify-center">
             <div class="flex flex-wrap gap-2 mx-auto container">
                 {#each formatChars(search) as char}
-                    <div class="flex items-center text-neutral-200">
+                    <div class="flex items-center text-textcolor">
                         {#if char.image}
                             <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
                         {:else}
-                            <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:#44475a' : ''}>
+                            <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:var(--risu-theme-selected)' : ''}>
                                 {#if char.type === 'group'}
                                     <Users />
                                 {:else}
diff --git a/src/lib/Others/WelcomeRisu.svelte b/src/lib/Others/WelcomeRisu.svelte
index 508e61f8..ac4b7f9b 100644
--- a/src/lib/Others/WelcomeRisu.svelte
+++ b/src/lib/Others/WelcomeRisu.svelte
@@ -12,7 +12,7 @@
     let provider = 0
 </script>
 
-<div class="w-full h-full flex justify-center welcome-bg text-neutral-200">
+<div class="w-full h-full flex justify-center welcome-bg text-textcolor">
     <article class="w-full overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-auto">
         <div class="w-full justify-center flex mt-8">
             <img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm  mb-0">
@@ -64,7 +64,7 @@
                         <span class="mb-2">API key</span>
                         <TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
                     </div>
-                    <span class="text-gray-400">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
+                    <span class="text-textcolor2">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
                     <div class="flex flex-col items-start ml-2 mt-6">
                         <button class="hover:text-green-500 transition-colors" on:click={() => {
                             provider = 1
diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte
index 6f8ec2c9..d10c88d1 100644
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -12,24 +12,24 @@
 </script>
 <h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
 <span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
-<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
+<span class="text-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
 <NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.loreBookDepth}/>
-<span class="text-neutral-200">{language.loreBookToken}</span>
+<span class="text-textcolor">{language.loreBookToken}</span>
 <NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={$DataBase.loreBookToken}/>
 
-<span class="text-neutral-200">{language.additionalPrompt}</span>
+<span class="text-textcolor">{language.additionalPrompt}</span>
 <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.additionalPrompt}/>
 
-<span class="text-neutral-200">{language.descriptionPrefix}</span>
+<span class="text-textcolor">{language.descriptionPrefix}</span>
 <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.descriptionPrefix}/>
 
-<span class="text-neutral-200">{language.emotionPrompt}</span>
+<span class="text-textcolor">{language.emotionPrompt}</span>
 <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default"/>
 
-<span class="text-neutral-200">{language.requestretrys}</span>
+<span class="text-textcolor">{language.requestretrys}</span>
 <NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.requestRetrys}/>
 
-<span class="text-neutral-200">Request Lib</span>
+<span class="text-textcolor">Request Lib</span>
 <SelectInput bind:value={$DataBase.requester}>
     <OptionInput value="new">Reqwest</OptionInput>
     <OptionInput value="old">Tauri</OptionInput>
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 1d271556..f437b066 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -74,13 +74,13 @@
     </button>
 </div>
 {#if advancedBotSettings}
-    <span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
+    <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
     <ModelList bind:value={$DataBase.aiModel}/>
 
-    <span class="text-neutral-200 mt-2">{language.submodel} <Help key="submodel"/></span>
+    <span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span>
     <ModelList bind:value={$DataBase.subModel}/>
 {:else}
-    <span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
+    <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
     <ModelList bind:value={$DataBase.aiModel} onChange={(v) => {
         $DataBase.subModel = v
         if(v.startsWith('gpt') || v.startsWith('palm2')){
@@ -112,24 +112,24 @@
     </div>
 {/if}
 {#if $DataBase.aiModel === 'palm2' || $DataBase.subModel === 'palm2'}
-    <span class="text-neutral-200">Palm2 {language.apiKey}</span>
+    <span class="text-textcolor">Palm2 {language.apiKey}</span>
     <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.palmAPI}/>
 {/if}
 {#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
-    <span class="text-neutral-200">NovelList {language.apiKey}</span>
+    <span class="text-textcolor">NovelList {language.apiKey}</span>
     <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
 {/if}
 
 {#if $DataBase.aiModel.startsWith('claude') || $DataBase.subModel.startsWith('claude')}
-    <span class="text-neutral-200">Claude {language.apiKey}</span>
+    <span class="text-textcolor">Claude {language.apiKey}</span>
     <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
 {/if}
 {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
-    <span class="text-neutral-200 mt-2">{language.forceReplaceUrl} URL <Help key="forceUrl"/></span>
+    <span class="text-textcolor mt-2">{language.forceReplaceUrl} URL <Help key="forceUrl"/></span>
     <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
-    <span class="text-neutral-200 mt-4"> {language.proxyAPIKey}</span>
+    <span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
     <TextInput marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
-    <span class="text-neutral-200 mt-4"> {language.proxyRequestModel}</span>
+    <span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
     <SelectInput className="mt-2 mb-4" bind:value={$DataBase.proxyRequestModel}>
         <OptionInput value="">None</OptionInput>
         <OptionInput value="gpt35">GPT 3.5</OptionInput>
@@ -147,10 +147,10 @@
     </SelectInput>
 {/if}
 {#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
-    <span class="text-neutral-200 mt-4">Openrouter Key</span>
+    <span class="text-textcolor mt-4">Openrouter Key</span>
     <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
 
-    <span class="text-neutral-200 mt-4">Openrouter Model</span>
+    <span class="text-textcolor mt-4">Openrouter Model</span>
     {#await openRouterModels()}
         <SelectInput className="mt-2 mb-4" value="">
             <OptionInput value="">Loading..</OptionInput>
@@ -177,7 +177,7 @@
     {/await}
 {/if}
 {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')}
-    <span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
+    <span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
     <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
 
 {/if}
@@ -188,7 +188,7 @@
 {/if}
 
 {#if $DataBase.aiModel === 'custom'}
-    <span class="text-neutral-200 mt-2">{language.plugin}</span>
+    <span class="text-textcolor mt-2">{language.plugin}</span>
     <SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
         <OptionInput value="">None</OptionInput>
         {#each $customProviderStore as plugin}
@@ -198,7 +198,7 @@
 {/if}
 {#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'}
 
-    <span class="text-neutral-200">NovelAI Bearer Token</span>
+    <span class="text-textcolor">NovelAI Bearer Token</span>
     <TextInput marginBottom={true} bind:value={$DataBase.novelai.token}/>
 
     {#if !($DataBase.novelai.token)}
@@ -209,70 +209,70 @@
 {/if}
 
 {#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
-    <span class="text-neutral-200">Kobold URL</span>
+    <span class="text-textcolor">Kobold URL</span>
     <TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
 
 {/if}
 
 
 {#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
-    <span class="text-neutral-200">Horde {language.apiKey}</span>
+    <span class="text-textcolor">Horde {language.apiKey}</span>
     <TextInput marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
 
 {/if}
 {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'}
-    <span class="text-neutral-200 mt-2">Oobabooga Blocking {language.providerURL}</span>
+    <span class="text-textcolor mt-2">Oobabooga Blocking {language.providerURL}</span>
     <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
     <span class="text-draculared text-xs mb-2">You must use textgen webui with --public-api</span>
-    <span class="text-neutral-200 mt-2">Oobabooga Stream {language.providerURL}</span>
+    <span class="text-textcolor mt-2">Oobabooga Stream {language.providerURL}</span>
     <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
     {#if !isTauri}
         <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
     {/if}
 {/if}
 {#if advancedBotSettings}
-    <span class="text-neutral-200">{language.mainPrompt} <Help key="mainprompt"/></span>
+    <span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
     <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
-    <span class="text-neutral-200">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
+    <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
+    <span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
     <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
-    <span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
+    <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
+    <span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
     <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>    
+    <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>    
 
-    <span class="text-neutral-200">{language.maxContextSize}</span>
+    <span class="text-textcolor">{language.maxContextSize}</span>
     <NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
 
 
-    <span class="text-neutral-200">{language.maxResponseSize}</span>
+    <span class="text-textcolor">{language.maxResponseSize}</span>
     <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
 
-<span class="text-neutral-200">{language.temperature} <Help key="tempature"/></span>
+<span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
 <SliderInput min={0} max={200} bind:value={$DataBase.temperature}/>
-<span class="text-gray-400 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
+<span class="text-textcolor2 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
 {#if $DataBase.aiModel === 'textgen_webui'}
-    <span class="text-neutral-200">Repetition Penalty</span>
+    <span class="text-textcolor">Repetition Penalty</span>
     <SliderInput min={1} max={1.5} step={0.01} bind:value={$DataBase.ooba.repetition_penalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.repetition_penalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Length Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.repetition_penalty).toFixed(2)}</span>
+    <span class="text-textcolor">Length Penalty</span>
     <SliderInput min={-5} max={5} step={0.05} bind:value={$DataBase.ooba.length_penalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Top K</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
+    <span class="text-textcolor">Top K</span>
     <SliderInput min={0} max={100} step={1} bind:value={$DataBase.ooba.top_k} />
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(0)}</span>
-    <span class="text-neutral-200">Top P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(0)}</span>
+    <span class="text-textcolor">Top P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
-    <span class="text-neutral-200">Typical P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
+    <span class="text-textcolor">Typical P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.typical_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
-    <span class="text-neutral-200">Top A</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
+    <span class="text-textcolor">Top A</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_a}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_a).toFixed(2)}</span>
-    <span class="text-neutral-200">No Repeat n-gram Size</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_a).toFixed(2)}</span>
+    <span class="text-textcolor">No Repeat n-gram Size</span>
     <SliderInput min={0} max={20} step={1} bind:value={$DataBase.ooba.no_repeat_ngram_size}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.no_repeat_ngram_size).toFixed(0)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.no_repeat_ngram_size).toFixed(0)}</span>
     <div class="flex items-center mt-4">
         <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
     </div>
@@ -286,98 +286,98 @@
         <Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
     </div>
     <div class="flex flex-col p-3 bg-darkbg mt-4">
-        <span class="text-neutral-200">Header</span>
+        <span class="text-textcolor">Header</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.header} />
-        <span class="text-neutral-200">System Prefix</span>
+        <span class="text-textcolor">System Prefix</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.systemPrefix} />
-        <span class="text-neutral-200">User Prefix</span>
+        <span class="text-textcolor">User Prefix</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.userPrefix} />
-        <span class="text-neutral-200">Assistant Prefix</span>
+        <span class="text-textcolor">Assistant Prefix</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.assistantPrefix} />
-        <span class="text-neutral-200">Seperator</span>
+        <span class="text-textcolor">Seperator</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.seperator} />
     </div>
 
-    <span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
+    <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
     <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.autoSuggestPrompt} />
-    <span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 
-    <span class="text-neutral-200">{language.autoSuggest} Prefix</span>
+    <span class="text-textcolor">{language.autoSuggest} Prefix</span>
     <TextInput marginBottom={true} bind:value={$DataBase.autoSuggestPrefix} />
 {:else if $DataBase.aiModel.startsWith('novelai')}
-    <span class="text-neutral-200">Top P</span>
+    <span class="text-textcolor">Top P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topP}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
-    <span class="text-neutral-200">Top K</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
+    <span class="text-textcolor">Top K</span>
     <SliderInput min={0} max={100} step={1} bind:value={$DataBase.NAIsettings.topK}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topK).toFixed(0)}</span>
-    <span class="text-neutral-200">Top A</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topK).toFixed(0)}</span>
+    <span class="text-textcolor">Top A</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topA}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topA).toFixed(2)}</span>
-    <span class="text-neutral-200">Tailfree Sampling</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topA).toFixed(2)}</span>
+    <span class="text-textcolor">Tailfree Sampling</span>
     <SliderInput min={0} max={1} step={0.001} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(3)}</span>
-    <span class="text-neutral-200">Typical P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(3)}</span>
+    <span class="text-textcolor">Typical P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.typicalp}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(2)}</span>
-    <span class="text-neutral-200">Repetition Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(2)}</span>
+    <span class="text-textcolor">Repetition Penalty</span>
     <SliderInput min={0} max={3} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Repetition Penalty Range</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenalty).toFixed(2)}</span>
+    <span class="text-textcolor">Repetition Penalty Range</span>
     <SliderInput min={0} max={2048} step={1} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltyRange).toFixed(0)}</span>
-    <span class="text-neutral-200">Repetition Penalty Slope</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltyRange).toFixed(0)}</span>
+    <span class="text-textcolor">Repetition Penalty Slope</span>
     <SliderInput min={0} max={10} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltySlope).toFixed(2)}</span>
-    <span class="text-neutral-200">Frequency Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltySlope).toFixed(2)}</span>
+    <span class="text-textcolor">Frequency Penalty</span>
     <SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.frequencyPenalty).toFixed(2)}</span>
-    <span class="text-neutral-200">Presence Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.frequencyPenalty).toFixed(2)}</span>
+    <span class="text-textcolor">Presence Penalty</span>
     <SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.presencePenalty}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.presencePenalty).toFixed(2)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.presencePenalty).toFixed(2)}</span>
 
 {:else if $DataBase.aiModel.startsWith('novellist')}
-    <span class="text-neutral-200">Top P</span>
+    <span class="text-textcolor">Top P</span>
     <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.top_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
-    <span class="text-neutral-200">Reputation Penalty</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
+    <span class="text-textcolor">Reputation Penalty</span>
     <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.rep_pen}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
-    <span class="text-neutral-200">Reputation Penalty Range</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
+    <span class="text-textcolor">Reputation Penalty Range</span>
     <SliderInput min={0} max={2048} step={1} bind:value={$DataBase.ainconfig.rep_pen_range}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
-    <span class="text-neutral-200">Reputation Penalty Slope</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
+    <span class="text-textcolor">Reputation Penalty Slope</span>
     <SliderInput min={0} max={10} step={0.1} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
-    <span class="text-neutral-200">Top K</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
+    <span class="text-textcolor">Top K</span>
     <SliderInput min={1} max={500} step={1} bind:value={$DataBase.ainconfig.top_k}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
-    <span class="text-neutral-200">Top A</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
+    <span class="text-textcolor">Top A</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.top_a}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
-    <span class="text-neutral-200">Typical P</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
+    <span class="text-textcolor">Typical P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.typical_p}/>
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.typical_p).toFixed(2)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.typical_p).toFixed(2)}</span>
 {:else}
-    <span class="text-neutral-200">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
+    <span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
     <SliderInput min={0} max={100} bind:value={$DataBase.frequencyPenalty} />
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
-    <span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
+    <span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
     <SliderInput min={0} max={100} bind:value={$DataBase.PresensePenalty} />
-    <span class="text-gray-400 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
 
-    <span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
+    <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
     <TextAreaInput height="20" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
-    <span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
+    <span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 {/if}
 {/if}
 
 
 
 {#if advancedBotSettings}
-    <span class="text-neutral-200 mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
+    <span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
     <DropList bind:list={$DataBase.formatingOrder} />
-    <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
+    <span class="text-textcolor mt-2">Bias <Help key="bias"/></span>
     <table class="contain w-full max-w-full tabler mt-2">
         <tr>
             <th class="font-medium w-1/2">Bias</th>
@@ -392,7 +392,7 @@
         </tr>
         {#if $DataBase.bias.length === 0}
             <tr>
-                <div class="text-gray-500">{language.noBias}</div>
+                <div class="text-textcolor2">{language.noBias}</div>
             </tr>
         {/if}
         {#each $DataBase.bias as bias, i}
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index f7562397..8bc24df7 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -1,18 +1,23 @@
 <script lang="ts">
     import { language } from "src/lang";
-    import { DataBase, saveImage, updateTextTheme } from "src/ts/storage/database";
+    import { DataBase, saveImage } from "src/ts/storage/database";
     import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import Help from "src/lib/Others/Help.svelte";
-  import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
-  import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
-  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
-  import { updateAnimationSpeed } from "src/ts/gui/animation";
+    import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
+    import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+    import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+    import { updateAnimationSpeed } from "src/ts/gui/animation";
+    import { changeColorScheme, colorSchemeList, updateTextTheme } from "src/ts/gui/colorscheme";
+
+    const onSchemeInputChange = (e:Event) => {
+        changeColorScheme((e.target as HTMLInputElement).value)
+    }
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
 
-<span class="text-neutral-200 mt-4">{language.theme}</span>
+<span class="text-textcolor mt-4">{language.theme}</span>
 <SelectInput className="mt-2" bind:value={$DataBase.theme}>
     <OptionInput value="" >Standard Risu</OptionInput>
     <OptionInput value="waifu" >Waifulike</OptionInput>
@@ -21,16 +26,23 @@
 
 
 {#if $DataBase.theme === "waifu"}
-    <span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
+    <span class="text-textcolor mt-4">{language.waifuWidth}</span>
     <SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
-    <span class="text-gray-400 text-sm">{($DataBase.waifuWidth)}%</span>
+    <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
 
-    <span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
+    <span class="text-textcolor mt-4">{language.waifuWidth2}</span>
     <SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
-    <span class="text-gray-400 text-sm">{($DataBase.waifuWidth2)}%</span>
+    <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
 {/if}
 
-<span class="text-neutral-200 mt-4">{language.textColor}</span>
+<span class="text-textcolor mt-4">{language.colorScheme}</span>
+<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
+    {#each colorSchemeList as scheme}
+        <OptionInput value={scheme} >{scheme}</OptionInput>
+    {/each}
+</SelectInput>
+
+<span class="text-textcolor mt-4">{language.textColor}</span>
 <SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
     <OptionInput value="standard" >{language.classicRisu}</OptionInput>
     <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
@@ -56,25 +68,25 @@
     </div>
 {/if}
 
-<span class="text-neutral-200">{language.UISize}</span>
+<span class="text-textcolor">{language.UISize}</span>
 <SliderInput  min={50} max={200} bind:value={$DataBase.zoomsize} />
-<span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
+<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
 
-<span class="text-neutral-200">{language.iconSize}</span>
+<span class="text-textcolor">{language.iconSize}</span>
 <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
-<span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
+<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
 
 
-<span class="text-neutral-200">{language.assetWidth}</span>
+<span class="text-textcolor">{language.assetWidth}</span>
 <SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
-<span class="text-gray-400 mb-6 text-sm">{
+<span class="text-textcolor2 mb-6 text-sm">{
     ($DataBase.assetWidth === -1) ? "Unlimited" : 
     ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
 
 
-<span class="text-neutral-200">{language.animationSpeed}</span>
+<span class="text-textcolor">{language.animationSpeed}</span>
 <SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} />
-<span class="text-gray-400 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
+<span class="text-textcolor2 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
 
 <div class="flex items-center mt-2">
     <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
diff --git a/src/lib/Setting/Pages/GlobalRegex.svelte b/src/lib/Setting/Pages/GlobalRegex.svelte
index 8bddd46e..2b88c70c 100644
--- a/src/lib/Setting/Pages/GlobalRegex.svelte
+++ b/src/lib/Setting/Pages/GlobalRegex.svelte
@@ -8,7 +8,7 @@
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.globalRegexScript} <Help key="regexScript" /></h2>
 <RegexList bind:value={$DataBase.globalscript} />
-<div class="text-gray-500 mt-2 flex gap-2">
+<div class="text-textcolor2 mt-2 flex gap-2">
     <button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
         let script = $DataBase.globalscript
         script.push({
diff --git a/src/lib/Setting/Pages/LanguageSettings.svelte b/src/lib/Setting/Pages/LanguageSettings.svelte
index aefac210..91b5807f 100644
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -13,7 +13,7 @@
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
 
-<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
+<span class="text-textcolor mt-4">{language.UiLanguage}</span>
 <SelectInput className="mt-2" bind:value={$DataBase.language} on:change={async () => {
     if($DataBase.language === 'translang'){
         downloadFile('lang.json', new TextEncoder().encode(JSON.stringify(languageEnglish, null, 4)))
@@ -32,7 +32,7 @@
 {#if langChanged}
     <span class="bg-red-500 text-sm">Close the settings to take effect</span>
 {/if}
-<span class="text-neutral-200 mt-4">{language.translator}</span>
+<span class="text-textcolor mt-4">{language.translator}</span>
 <SelectInput className="mt-2 mb-4" bind:value={$DataBase.translator}>
     <OptionInput value="" >{language.disabled}</OptionInput>
     <OptionInput value="ko" >Korean</OptionInput>
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index 82fd292e..870645e8 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -12,9 +12,9 @@
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
 
-<span class="text-neutral-200 mt-4 text-lg font-bold">{language.imageGeneration}</span>
+<span class="text-textcolor mt-4 text-lg font-bold">{language.imageGeneration}</span>
 
-<span class="text-neutral-200 mt-2">{language.provider} <Help key="sdProvider"/></span>
+<span class="text-textcolor mt-2">{language.provider} <Help key="sdProvider"/></span>
 <SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
     <OptionInput value="" >None</OptionInput>
     <OptionInput value="webui" >Stable Diffusion WebUI</OptionInput>
@@ -28,44 +28,44 @@
     {#if !isTauri}
         <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
     {/if}
-    <span class="text-neutral-200 mt-2">WebUI {language.providerURL}</span>
+    <span class="text-textcolor mt-2">WebUI {language.providerURL}</span>
     <TextInput size="sm" marginBottom placeholder="https://..." bind:value={$DataBase.webUiUrl}/>
-    <span class="text-neutral-200">Steps</span>
+    <span class="text-textcolor">Steps</span>
     <NumberInput size="sm" marginBottom min={0} max={100} bind:value={$DataBase.sdSteps}/>
     
-    <span class="text-neutral-200">CFG Scale</span>
+    <span class="text-textcolor">CFG Scale</span>
     <NumberInput size="sm" marginBottom min={0} max={20} bind:value={$DataBase.sdCFG}/>
 
-    <span class="text-neutral-200">Width</span>
+    <span class="text-textcolor">Width</span>
     <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.width}/>
-    <span class="text-neutral-200">Height</span>
+    <span class="text-textcolor">Height</span>
     <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.height}/>
-    <span class="text-neutral-200">Sampler</span>
+    <span class="text-textcolor">Sampler</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.sampler_name}/>
     
     <div class="flex items-center mt-2">
         <Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/>
     </div>
     {#if $DataBase.sdConfig.enable_hr === true}
-        <span class="text-neutral-200">denoising_strength</span>
+        <span class="text-textcolor">denoising_strength</span>
         <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.denoising_strength}/>
-        <span class="text-neutral-200">hr_scale</span>
+        <span class="text-textcolor">hr_scale</span>
         <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.hr_scale}/>
-        <span class="text-neutral-200">Upscaler</span>
+        <span class="text-textcolor">Upscaler</span>
         <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.hr_upscaler}/>
     {/if}
 {/if}
 
 
-<span class="text-neutral-200 mt-4 text-lg font-bold">TTS</span>
-<span class="text-neutral-200 mt-2">ElevenLabs API key</span>
+<span class="text-textcolor mt-4 text-lg font-bold">TTS</span>
+<span class="text-textcolor mt-2">ElevenLabs API key</span>
 <TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
 
-<span class="text-neutral-200 mt-2">VOICEVOX URL</span>
+<span class="text-textcolor mt-2">VOICEVOX URL</span>
 <TextInput size="sm" marginBottom bind:value={$DataBase.voicevoxUrl}/>
 
-<span class="text-neutral-200 mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
-<span class="text-neutral-200 mt-4">{language.SuperMemory} {language.model}</span>
+<span class="text-textcolor mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
+<span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
 <SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}>
     <OptionInput value="none" >None</OptionInput>
     <OptionInput value="davinci" >OpenAI Davinci</OptionInput>
@@ -73,11 +73,11 @@
     <OptionInput value="subModel" >{language.submodel} ({language.unrecommended})</OptionInput>
 </SelectInput>
 {#if $DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie'}
-    <span class="text-neutral-200">{language.SuperMemory} OpenAI Key</span>
+    <span class="text-textcolor">{language.SuperMemory} OpenAI Key</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
 {/if}
 {#if $DataBase.supaMemoryType !== 'none'}
-    <span class="text-neutral-200">{language.SuperMemory} Prompt</span>
+    <span class="text-textcolor">{language.SuperMemory} Prompt</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryPrompt} placeholder="recommended to leave it blank to use default"/>
 {/if}
 {#if ($DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie') && $DataBase.useExperimental}
diff --git a/src/lib/Setting/Pages/PersonaSettings.svelte b/src/lib/Setting/Pages/PersonaSettings.svelte
index c17d58db..8ee99460 100644
--- a/src/lib/Setting/Pages/PersonaSettings.svelte
+++ b/src/lib/Setting/Pages/PersonaSettings.svelte
@@ -17,12 +17,12 @@
             changeUserPersona(i)
         }}>
             {#if persona.icon === ''}
-                <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona} />
+                <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona} />
             {:else}
                 {#await getCharImage(persona.icon, 'css')}
-                    <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}/>
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}/>
                 {:then im} 
-                    <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona} />                
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona} />                
                 {/await}
             {/if}
         </button>
@@ -61,20 +61,20 @@
     <div class="flex flex-col mt-4">
         <button on:click={() => {selectUserImg()}}>
             {#if $DataBase.userIcon === ''}
-                <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+                <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
             {:else}
                 {#await getCharImage($DataBase.userIcon, 'css')}
-                    <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+                    <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
                 {:then im} 
-                    <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+                    <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />                
                 {/await}
             {/if}
         </button>
     </div>
     <div class="flex flex-grow flex-col p-2 ml-4">
-        <span class="text-sm text-gray-500">{language.name}</span>
+        <span class="text-sm text-textcolor2">{language.name}</span>
         <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
-        <span class="text-sm text-gray-500">{language.description}</span>
+        <span class="text-sm text-textcolor2">{language.description}</span>
         <TextAreaInput height="32" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
         <div>
             <button class="float-right rounded-md border border-red-700 p-2 hover:bg-red-700 transition-colors mt-4 text-sm" on:click={async () => {
diff --git a/src/lib/Setting/Pages/PluginSettings.svelte b/src/lib/Setting/Pages/PluginSettings.svelte
index 9a3ca7da..caca3157 100644
--- a/src/lib/Setting/Pages/PluginSettings.svelte
+++ b/src/lib/Setting/Pages/PluginSettings.svelte
@@ -27,7 +27,7 @@
         <div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
         <div class="flex">
             <span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span>
-            <button class="gray-500 hover:gray-200 cursor-pointer" on:click={async () => {
+            <button class="textcolor2 hover:gray-200 cursor-pointer" on:click={async () => {
                 const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
                 if(v){
                     if($DataBase.currentPluginProvider === plugin.name){
@@ -61,10 +61,10 @@
         {/if}
     {/each}
 </div>
-<div class="text-gray-500 mt-2 flex">
+<div class="text-textcolor2 mt-2 flex">
     <button on:click={() => {
         importPlugin()  
-    }} class="hover:text-neutral-200 cursor-pointer">
+    }} class="hover:text-textcolor cursor-pointer">
         <PlusIcon />
     </button>
 </div>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/UserSettings.svelte b/src/lib/Setting/Pages/UserSettings.svelte
index 8c5e16ea..55b42db5 100644
--- a/src/lib/Setting/Pages/UserSettings.svelte
+++ b/src/lib/Setting/Pages/UserSettings.svelte
@@ -82,7 +82,7 @@
         {/if}</h1>
     </div>
     {#if $DataBase.account}
-        <span class="mb-4 text-gray-400">ID: {$DataBase.account.id}</span>
+        <span class="mb-4 text-textcolor2">ID: {$DataBase.account.id}</span>
         {#if !isTauri}
             <div class="flex items-center mt-2">
                 {#if $DataBase.account.useSync || forageStorage.isAccount}
diff --git a/src/lib/Setting/Settings.svelte b/src/lib/Setting/Settings.svelte
index e0d9330a..0e63555e 100644
--- a/src/lib/Setting/Settings.svelte
+++ b/src/lib/Setting/Settings.svelte
@@ -30,87 +30,87 @@
         {#if window.innerWidth >= 700 || selected === -1}
             <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
                 class:w-full={window.innerWidth < 700}>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 1} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 1} on:click={() => {
                     selected = 1
                 }}>
                     <BotIcon />
                     <span>{language.chatBot}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 12} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 12} on:click={() => {
                     selected = 12
                 }}>
                     <ContactIcon />
                     <span>{language.persona}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 2} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 2} on:click={() => {
                     selected = 2
                 }}>
                     <Sailboat />
                     <span>{language.otherBots}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 3} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 3} on:click={() => {
                     selected = 3
                 }}>
                     <MonitorIcon />
                     <span>{language.display}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 10} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 10} on:click={() => {
                     selected = 10
                 }}>
                     <LanguagesIcon />
                     <span>{language.language}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 11} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 11} on:click={() => {
                     selected = 11
                 }}>
                     <AccessibilityIcon />
                     <span>{language.accessibility}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 8} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 8} on:click={() => {
                     selected = 8
                 }}>
                     <BookIcon />
                     <span>{language.globalLoreBook}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 9} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 9} on:click={() => {
                     selected = 9
                 }}>
                     <AlignLeft />
                     <span>{language.globalRegexScript}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 4} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 4} on:click={() => {
                     selected = 4
                 }}>
                     <CodeIcon />
                     <span>{language.plugin}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 0} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 0} on:click={() => {
                     selected = 0
                 }}>
                     <UserIcon />
                     <span>{language.account} & {language.files}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 6} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 6} on:click={() => {
                     selected = 6
                 }}>
                     <ActivityIcon />
                     <span>{language.advancedSettings}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 7} on:click={() => {
+                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 7} on:click={() => {
                     selected = 7
                 }}>
                     <BoxIcon />
                     <span>{language.community}</span>
                 </button>
                 {#if window.innerWidth < 700}
-                    <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
+                    <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
                         settingsOpen.set(false)
                     }}> <XCircleIcon /> </button>
                 {/if}
             </div>
         {/if}
         {#if window.innerWidth >= 700 || selected !== -1}
-            <div class="flex-grow p-4 bg-bgcolor flex flex-col text-white overflow-y-auto relative">
+            <div class="flex-grow p-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
                 {#if selected === 0}
                     <UserSettings />
                 {:else if selected === 1}
@@ -139,7 +139,7 @@
                     <PersonaSettings/>
                 {/if}
             </div>
-            <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
+            <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
                 if(window.innerWidth >= 700){
                     settingsOpen.set(false)
                 }
@@ -160,7 +160,7 @@
 {/if}
 <style>
     .setting-bg{
-        background: linear-gradient(to right, #21222C 50%, #282a36 50%);
+        background: linear-gradient(to right, var(--risu-theme-darkbg) 50%, var(--risu-theme-bgcolor) 50%);
 
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte
index 0a2fdbc7..f42fe9e0 100644
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -13,10 +13,10 @@
 
 <div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
     <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96 max-h-full overflow-y-auto">
-        <div class="flex items-center text-neutral-200 mb-4">
+        <div class="flex items-center text-textcolor mb-4">
             <h2 class="mt-0 mb-0">{language.presets}</h2>
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
                     <XIcon size={24}/>
                 </button>
             </div>
@@ -27,30 +27,30 @@
                     changeToPreset(i)
                     close()
                 }
-            }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
                 {#if editMode}
                     <TextInput bind:value={$DataBase.botPresets[i].name} placeholder="string" padding={false}/>
                 {:else}
                     {#if i < 9}
-                    <span class="w-2 text-center mr-2 text-gray-400">{i + 1}</span>
+                    <span class="w-2 text-center mr-2 text-textcolor2">{i + 1}</span>
                     {/if}
                     <span>{presets.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
                         e.stopPropagation()
                         copyPreset(i)
                     }}>
                         <CopyIcon size={18}/>
                     </button>
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
                         e.stopPropagation()
                         downloadPreset(i)
                     }}>
 
                         <DownloadIcon size={18} />
                     </button>
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.botPresets.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -72,7 +72,7 @@
             </button>
         {/each}
         <div class="flex mt-2 items-center">
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
                 let botPresets = $DataBase.botPresets
                 let newPreset = cloneDeep(presetTemplate)
                 newPreset.name = `New Preset`
@@ -82,18 +82,18 @@
             }}>
                 <PlusIcon/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
                 importPreset()
             }}>
                 <FolderUpIcon size={18}/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
                 editMode = !editMode
             }}>
                 <EditIcon size={18}/>
             </button>
         </div>
-        <span class="text-gray-400 text-sm">{language.quickPreset}</span>
+        <span class="text-textcolor2 text-sm">{language.quickPreset}</span>
     </div>
 </div>
 
diff --git a/src/lib/Setting/lorepreset.svelte b/src/lib/Setting/lorepreset.svelte
index 34b1f956..cdfda2e8 100644
--- a/src/lib/Setting/lorepreset.svelte
+++ b/src/lib/Setting/lorepreset.svelte
@@ -10,10 +10,10 @@
 
 <div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
     <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96 max-h-full overflow-y-auto">
-        <div class="flex items-center text-neutral-200 mb-4">
+        <div class="flex items-center text-textcolor mb-4">
             <h2 class="mt-0 mb-0">{language.loreBook}</h2>
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
                     <XIcon size={24}/>
                 </button>
             </div>
@@ -23,14 +23,14 @@
                 if(!editMode){
                     $DataBase.loreBookPage = ind
                 }
-            }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
                 {#if editMode}
                     <TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/>
                 {:else}
                     <span>{lore.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.loreBook.length === 1){
                             return
@@ -49,7 +49,7 @@
             </button>
         {/each}
         <div class="flex mt-2 items-center">
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
                 let loreBooks = $DataBase.loreBook
                 let newLoreBook = {
                     name: `New LoreBook`,
@@ -61,7 +61,7 @@
             }}>
                 <PlusIcon/>
             </button>
-            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
+            <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
                 editMode = !editMode
             }}>
                 <EditIcon size={18}/>
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index c9bbc6e6..043344f6 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -140,24 +140,24 @@
 
 {#if licensed !== 'private'}
     <div class="flex gap-2 mb-2">
-        <button class={subMenu === 0 ? 'text-gray-200 ' : 'text-gray-500'} on:click={() => {subMenu = 0}}>
+        <button class={subMenu === 0 ? 'text-textcolor ' : 'text-textcolor2'} on:click={() => {subMenu = 0}}>
             <UserIcon />
         </button>
-        <button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 1}}>
+        <button class={subMenu === 1 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 1}}>
             <SmileIcon />
         </button>
-        <button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 3}}>
+        <button class={subMenu === 3 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 3}}>
             <BookIcon />
         </button>
         {#if currentChar.type === 'character'}
-            <button class={subMenu === 5 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 5}}>
+            <button class={subMenu === 5 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 5}}>
                 <Volume2Icon />
             </button>
-            <button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 4}}>
+            <button class={subMenu === 4 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 4}}>
                 <CurlyBraces />
             </button>
         {/if}
-        <button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 2}}>
+        <button class={subMenu === 2 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 2}}>
             <ActivityIcon />
         </button>
     </div>
@@ -167,19 +167,19 @@
 {#if subMenu === 0}
     {#if currentChar.type !== 'group' && licensed !== 'private'}
         <TextInput size="xl" marginBottom placeholder="Character Name" bind:value={currentChar.data.name} />
-        <span class="text-neutral-200">{language.description} <Help key="charDesc"/></span>
+        <span class="text-textcolor">{language.description} <Help key="charDesc"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.desc}></TextAreaInput>
-        <span class="text-gray-400 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
-        <span class="text-neutral-200">{language.firstMessage} <Help key="charFirstMessage"/></span>
+        <span class="text-textcolor2 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
+        <span class="text-textcolor">{language.firstMessage} <Help key="charFirstMessage"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.firstMessage}></TextAreaInput>
-        <span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
+        <span class="text-textcolor2 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
 
     {:else if licensed !== 'private' && currentChar.type === 'group'}
         <TextInput size="xl" marginBottom placeholder="Group Name" bind:value={currentChar.data.name} />
-        <span class="text-neutral-200">{language.character}</span>
+        <span class="text-textcolor">{language.character}</span>
         <div class="p-4 gap-2 bg-bgcolor rounded-lg char-grid">
             {#if currentChar.data.characters.length === 0}
-                <span class="text-gray-500">No Character</span>
+                <span class="text-textcolor2">No Character</span>
             {:else}
                 <div></div>
                 <div class="text-center">{language.talkness}</div>
@@ -217,16 +217,16 @@
                 {/each}
             {/if}
         </div>
-        <div class="text-gray-500 mt-1 flex mb-6">
-            <button on:click={addGroupChar} class="hover:text-neutral-200 cursor-pointer">
+        <div class="text-textcolor2 mt-1 flex mb-6">
+            <button on:click={addGroupChar} class="hover:text-textcolor cursor-pointer">
                 <PlusIcon />
             </button>
         </div>
 
     {/if}
-    <span class="text-neutral-200">{language.authorNote} <Help key="chatNote"/></span>
+    <span class="text-textcolor">{language.authorNote} <Help key="chatNote"/></span>
     <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></TextAreaInput>
-    <span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>     
+    <span class="text-textcolor2 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>     
     <div class="flex mt-6 items-center">
         <Check bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
     </div>
@@ -267,15 +267,15 @@
     })()}
 {:else if subMenu === 1}
     <h2 class="mb-2 text-2xl font-bold mt-2">{language.characterDisplay}</h2>
-    <span class="text-neutral-200 mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
+    <span class="text-textcolor mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
     <button on:click={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
         {#if currentChar.data.image === ''}
-            <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+            <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
         {:else}
             {#await getCharImage(currentChar.data.image, 'css')}
-                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500"></div>
+                <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
             {:then im}
-                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+                <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />                
             {/await}
         {/if}
     </button>
@@ -289,7 +289,7 @@
     {/if}
 
 
-    <span class="text-neutral-200 mt-6 mb-2">{language.viewScreen}</span>
+    <span class="text-textcolor mt-6 mb-2">{language.viewScreen}</span>
     <!-- svelte-ignore empty-block -->
 
     {#if currentChar.type !== 'group'}
@@ -309,8 +309,8 @@
     {/if}
 
     {#if currentChar.data.viewScreen === 'emotion'}
-        <span class="text-neutral-200 mt-6">{language.emotionImage} <Help key="emotion"/></span>
-        <span class="text-gray-400 text-xs">{language.emotionWarn}</span>
+        <span class="text-textcolor mt-6">{language.emotionImage} <Help key="emotion"/></span>
+        <span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
 
         <div class="w-full max-w-full border border-selected p-2 rounded-md">
 
@@ -322,7 +322,7 @@
                 </tr>
                 {#if currentChar.data.emotionImages.length === 0}
                     <tr>
-                        <div class="text-gray-500">{language.noImages}</div>
+                        <div class="text-textcolor2">{language.noImages}</div>
                     </tr>
                 {:else}
                     {#each emos as emo, i}
@@ -345,7 +345,7 @@
 
         </div>
 
-        <div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
+        <div class="text-textcolor2 hover:text-textcolor mt-2 flex">
             {#if !$addingEmotion}
                 <button class="cursor-pointer hover:text-green-500" on:click={() => {addCharEmotion($selectedCharID)}}>
                     <PlusIcon />
@@ -356,8 +356,8 @@
         </div>
     {/if}
     {#if currentChar.data.viewScreen === 'imggen'}
-        <span class="text-neutral-200 mt-6">{language.imageGeneration} <Help key="imggen"/></span>
-        <span class="text-gray-400 text-xs">{language.emotionWarn}</span>
+        <span class="text-textcolor mt-6">{language.imageGeneration} <Help key="imggen"/></span>
+        <span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
         
         <div class="w-full max-w-full border border-selected rounded-md p-2">
             <table class="w-full max-w-full tabler">
@@ -368,7 +368,7 @@
                 </tr>
                 {#if currentChar.data.sdData.length === 0}
                     <tr>
-                        <div class="text-gray-500">{language.noData}</div>
+                        <div class="text-textcolor2">{language.noData}</div>
                     </tr>
                 {/if}
                 {#each currentChar.data.sdData as emo, i}
@@ -397,7 +397,7 @@
                 {/each}
             </table>
         </div>
-        <div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
+        <div class="text-textcolor2 hover:text-textcolor mt-2 flex">
             {#if !$addingEmotion}
                 <button class="cursor-pointer hover:text-green-500" on:click={() => {
                     let db = ($DataBase)
@@ -415,11 +415,11 @@
                 <span>Loading...</span>
             {/if}
         </div>
-        <span class="text-neutral-200 mt-6">{language.currentImageGeneration}</span>
+        <span class="text-textcolor mt-6">{language.currentImageGeneration}</span>
         {#if currentChar.data.chats[currentChar.data.chatPage].sdData}
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].sdData}></TextAreaInput>
         {:else}
-            <span><div class="text-gray-500">{language.noData}</div></span>
+            <span><div class="text-textcolor2">{language.noData}</div></span>
         {/if}
     {/if}
 {:else if subMenu === 3}
@@ -429,7 +429,7 @@
     {#if currentChar.type === 'character'}
         <h2 class="mb-2 text-2xl font-bold mt-2">{language.scripts}</h2>
 
-        <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
+        <span class="text-textcolor mt-2">Bias <Help key="bias"/></span>
         <div class="w-full max-w-full border border-selected rounded-md p-2">
 
         <table class="w-full max-w-full tabler mt-2">
@@ -448,7 +448,7 @@
             </tr>
             {#if currentChar.data.bias.length === 0}
                 <tr>
-                    <div class="text-gray-500"> {language.noBias}</div>
+                    <div class="text-textcolor2"> {language.noBias}</div>
                 </tr>
             {/if}
             {#each currentChar.data.bias as bias, i}
@@ -475,7 +475,7 @@
 
         </div>
 
-        <span class="text-neutral-200 mt-4">{language.regexScript} <Help key="regexScript"/></span>
+        <span class="text-textcolor mt-4">{language.regexScript} <Help key="regexScript"/></span>
         <RegexList bind:value={currentChar.data.customscript} />
         <button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
             if(currentChar.type === 'character'){
@@ -490,7 +490,7 @@
             }
         }}><PlusIcon /></button>
 
-        <span class="text-neutral-200 mt-4">{language.triggerScript} <Help key="regexScript"/></span>
+        <span class="text-textcolor mt-4">{language.triggerScript} <Help key="regexScript"/></span>
         <TriggerList bind:value={currentChar.data.triggerscript} />
         <button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
             if(currentChar.type === 'character'){
@@ -508,7 +508,7 @@
 {:else if subMenu === 5}
     {#if currentChar.type === 'character'}
         <h2 class="mb-2 text-2xl font-bold mt-2">TTS</h2>
-        <span class="text-neutral-200">{language.provider}</span>
+        <span class="text-textcolor">{language.provider}</span>
         <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsMode} on:change={() => {
             if(currentChar.type === 'character'){
                 currentChar.data.ttsSpeech = ''
@@ -523,9 +523,9 @@
 
         {#if currentChar.data.ttsMode === 'webspeech'}
             {#if !speechSynthesis}
-                <span class="text-neutral-200">Web Speech isn't supported in your browser or OS</span>
+                <span class="text-textcolor">Web Speech isn't supported in your browser or OS</span>
             {:else}
-                <span class="text-neutral-200">{language.Speech}</span>
+                <span class="text-textcolor">{language.Speech}</span>
                 <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
                     <OptionInput value="">Auto</OptionInput>
                     {#each getWebSpeechTTSVoices() as voice}
@@ -537,9 +537,9 @@
                 {/if}
             {/if}
         {:else if currentChar.data.ttsMode === 'elevenlab'}
-            <span class="text-sm mb-2 text-gray-400">Please set the ElevenLabs API key in "global Settings → Bot Settings → Others → ElevenLabs API key"</span>
+            <span class="text-sm mb-2 text-textcolor2">Please set the ElevenLabs API key in "global Settings → Bot Settings → Others → ElevenLabs API key"</span>
             {#await getElevenTTSVoices() then voices}
-                <span class="text-neutral-200">{language.Speech}</span>
+                <span class="text-textcolor">{language.Speech}</span>
                 <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
                     <OptionInput value="">Unset</OptionInput>
                         {#each voices as voice}
@@ -548,7 +548,7 @@
                 </SelectInput>
             {/await}
          {:else if currentChar.data.ttsMode === 'VOICEVOX'}
-                <span class="text-neutral-200">Speaker</span>
+                <span class="text-textcolor">Speaker</span>
                 <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.voicevoxConfig.speaker}>
                     {#await getVOICEVOXVoices() then voices}
                         {#each voices as voice}
@@ -564,18 +564,18 @@
                 {/each}
                 </SelectInput>
                 {/if}
-                <span class="text-neutral-200">Speed scale</span>
+                <span class="text-textcolor">Speed scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
 
-                <span class="text-neutral-200">Pitch scale</span>
+                <span class="text-textcolor">Pitch scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.PITCH_SCALE}/>
 
-                <span class="text-neutral-200">Volume scale</span>
+                <span class="text-textcolor">Volume scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.VOLUME_SCALE}/>
 
-                <span class="text-neutral-200">Intonation scale</span>
+                <span class="text-textcolor">Intonation scale</span>
                 <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.INTONATION_SCALE}/>
-                <span class="text-sm mb-2 text-gray-400">To use VOICEVOX, you need to run a colab and put the localtunnel URL in "Settings → Other Bots". https://colab.research.google.com/drive/1tyeXJSklNfjW-aZJAib1JfgOMFarAwze</span>
+                <span class="text-sm mb-2 text-textcolor2">To use VOICEVOX, you need to run a colab and put the localtunnel URL in "Settings → Other Bots". https://colab.research.google.com/drive/1tyeXJSklNfjW-aZJAib1JfgOMFarAwze</span>
         {/if}
         {#if currentChar.data.ttsMode === 'webspeech' || currentChar.data.ttsMode === 'elevenlab' || currentChar.data.ttsMode === 'VOICEVOX'}
             <div class="flex items-center mt-2">
@@ -586,44 +586,44 @@
 {:else if subMenu === 2}
     <h2 class="mb-2 text-2xl font-bold mt-2">{language.advancedSettings}</h2>
     {#if currentChar.type !== 'group'}
-        <span class="text-neutral-200">{language.exampleMessage} <Help key="exampleMessage"/></span>
+        <span class="text-textcolor">{language.exampleMessage} <Help key="exampleMessage"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.exampleMessage}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.creatorNotes} <Help key="creatorQuotes"/></span>
+        <span class="text-textcolor">{language.creatorNotes} <Help key="creatorQuotes"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.creatorNotes} on:input={() => {
             currentChar.data.removedQuotes = false
         }}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.systemPrompt} <Help key="systemPrompt"/></span>
+        <span class="text-textcolor">{language.systemPrompt} <Help key="systemPrompt"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.systemPrompt}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></span>
+        <span class="text-textcolor">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.replaceGlobalNote}></TextAreaInput>
 
 
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
-            <span class="text-neutral-200">{language.SuperMemory}</span>
+            <span class="text-textcolor">{language.SuperMemory}</span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
         {/if}
         {#if $DataBase.showUnrecommended || currentChar.data.personality.length > 3}
-            <span class="text-neutral-200">{language.personality} <Help key="personality" unrecommended/></span>
+            <span class="text-textcolor">{language.personality} <Help key="personality" unrecommended/></span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.personality}></TextAreaInput>
         {/if}
         {#if $DataBase.showUnrecommended || currentChar.data.scenario.length > 3}
-            <span class="text-neutral-200">{language.scenario} <Help key="scenario" unrecommended/></span>
+            <span class="text-textcolor">{language.scenario} <Help key="scenario" unrecommended/></span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.scenario}></TextAreaInput>
         {/if}
 
-        <span class="text-neutral-200 mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></span>
+        <span class="text-textcolor mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></span>
         <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></TextAreaInput>
 
-        <span class="text-neutral-200">{language.creator}</span>
+        <span class="text-textcolor">{language.creator}</span>
         <TextInput size="sm" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
 
-        <span class="text-neutral-200">{language.CharVersion}</span>
+        <span class="text-textcolor">{language.CharVersion}</span>
         <TextInput size="sm" bind:value={currentChar.data.additionalData.character_version}/>
 
-        <span class="text-neutral-200 mt-2">{language.altGreet}</span>
+        <span class="text-textcolor mt-2">{language.altGreet}</span>
         <div class="w-full max-w-full border border-selected rounded-md p-2">
             <table class="contain w-full max-w-full tabler mt-2">
                 <tr>
@@ -642,7 +642,7 @@
                 </tr>
                 {#if currentChar.data.alternateGreetings.length === 0}
                     <tr>
-                        <div class="text-gray-500"> No Messages</div>
+                        <div class="text-textcolor2"> No Messages</div>
                     </tr>
                 {/if}
                 {#each currentChar.data.alternateGreetings as bias, i}
@@ -667,7 +667,7 @@
             </table>
         </div>
       
-        <span class="text-neutral-200 mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
+        <span class="text-textcolor mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
         <div class="w-full max-w-full border border-selected rounded-md p-2">
             <table class="contain w-full max-w-full tabler mt-2">
                 <tr>
@@ -697,7 +697,7 @@
                 </tr>
                 {#if (!currentChar.data.additionalAssets) || currentChar.data.additionalAssets.length === 0}
                     <tr>
-                        <div class="text-gray-500"> No Assets</div>
+                        <div class="text-textcolor2"> No Assets</div>
                     </tr>
                 {:else}
                     {#each currentChar.data.additionalAssets as assets, i}
@@ -770,7 +770,7 @@
         {/if}
     {:else}
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
-            <span class="text-neutral-200">{language.SuperMemory}</span>
+            <span class="text-textcolor">{language.SuperMemory}</span>
             <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
         {/if}
         {#if $DataBase.useExperimental}
diff --git a/src/lib/SideBars/LoreBook/LoreBookData.svelte b/src/lib/SideBars/LoreBook/LoreBookData.svelte
index fa438c38..1c34437d 100644
--- a/src/lib/SideBars/LoreBook/LoreBookData.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookData.svelte
@@ -45,21 +45,21 @@
     </div>
     {#if open}
         <div class="border-0 outline-none w-full mt-2 flex flex-col mb-2">
-            <span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
+            <span class="text-textcolor mt-6">{language.name} <Help key="loreName"/></span>
             <TextInput size="sm" bind:value={value.comment}/>
             {#if !value.alwaysActive}
-                <span class="text-neutral-200 mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
-                <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
+                <span class="text-textcolor mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
+                <span class="text-xs text-textcolor2">{language.activationKeysInfo}</span>
                 <TextInput size="sm" bind:value={value.key}/>
 
                 {#if value.selective}
-                    <span class="text-neutral-200 mt-6">{language.SecondaryKeys}</span>
-                    <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
+                    <span class="text-textcolor mt-6">{language.SecondaryKeys}</span>
+                    <span class="text-xs text-textcolor2">{language.activationKeysInfo}</span>
                     <TextInput size="sm" bind:value={value.secondkey}/>
                 {/if}
             {/if}
             {#if !(value.activationPercent === undefined || value.activationPercent === null)}
-                <span class="text-neutral-200 mt-6">{language.activationProbability}</span>
+                <span class="text-textcolor mt-6">{language.activationProbability}</span>
                 <NumberInput size="sm" bind:value={value.activationPercent} onChange={() => {
                     if(isNaN(value.activationPercent) || !value.activationPercent || value.activationPercent < 0){
                         value.activationPercent = 0
@@ -69,9 +69,9 @@
                     }
                 }} />
             {/if}
-            <span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
+            <span class="text-textcolor mt-4">{language.insertOrder} <Help key="loreorder"/></span>
             <NumberInput size="sm" bind:value={value.insertorder} min={0} max={1000}/>
-            <span class="text-neutral-200 mt-4 mb-2">{language.prompt}</span>
+            <span class="text-textcolor mt-4 mb-2">{language.prompt}</span>
             <TextAreaInput autocomplete="off" bind:value={value.content} />
             <div class="flex items-center mt-4">
                 <Check bind:check={value.alwaysActive} name={language.alwaysActive}/>
diff --git a/src/lib/SideBars/LoreBook/LoreBookList.svelte b/src/lib/SideBars/LoreBook/LoreBookList.svelte
index 8946d6e8..537e2539 100644
--- a/src/lib/SideBars/LoreBook/LoreBookList.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookList.svelte
@@ -75,7 +75,7 @@
     {#key sorted}
         {#if globalMode}
             {#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
+                <span class="text-textcolor2">No Lorebook</span>
             {:else}
                 {#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
                     <LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={i} onRemove={() => {
@@ -87,7 +87,7 @@
             {/if}
         {:else if submenu === 0}
             {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
+                <span class="text-textcolor2">No Lorebook</span>
             {:else}
                 {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
                     <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => {
@@ -99,7 +99,7 @@
             {/if}
         {:else if submenu === 1}
             {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
-                <span class="text-gray-500">No Lorebook</span>
+                <span class="text-textcolor2">No Lorebook</span>
             {:else}
                 {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
                     <LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} idx={i} onRemove={() => {
diff --git a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
index 08829bf4..610e7295 100644
--- a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
@@ -33,7 +33,7 @@
 {/if}
 {#if submenu !== 2}
     {#if !globalMode}
-        <span class="text-gray-500 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
+        <span class="text-textcolor2 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
     {/if}
     <LoreBookList bind:globalMode bind:submenu />
 {:else}
@@ -51,9 +51,9 @@
         <div class="flex items-center mt-4">
             <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.fullWordMatching} name={language.fullWordMatching}/>
         </div>
-        <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
+        <span class="text-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
         <NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
-        <span class="text-neutral-200">{language.loreBookToken}</span>
+        <span class="text-textcolor">{language.loreBookToken}</span>
         <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
     {:else}
         <div class="flex items-center mt-4">
@@ -71,18 +71,18 @@
 {/if}
 {#if submenu !== 2}
 
-<div class="text-gray-500 mt-2 flex">
-    <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-neutral-200 cursor-pointer">
+<div class="text-textcolor2 mt-2 flex">
+    <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-textcolor cursor-pointer">
         <PlusIcon />
     </button>
     <button on:click={() => {
         exportLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
-    }} class="hover:text-neutral-200 ml-1  cursor-pointer">
+    }} class="hover:text-textcolor ml-1  cursor-pointer">
         <DownloadIcon />
     </button>
     <button on:click={() => {
         importLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
-    }} class="hover:text-neutral-200 ml-2  cursor-pointer">
+    }} class="hover:text-textcolor ml-2  cursor-pointer">
         <FolderUpIcon />
     </button>
 </div>
diff --git a/src/lib/SideBars/Scripts/RegexData.svelte b/src/lib/SideBars/Scripts/RegexData.svelte
index c3dff92b..a9ba689a 100644
--- a/src/lib/SideBars/Scripts/RegexData.svelte
+++ b/src/lib/SideBars/Scripts/RegexData.svelte
@@ -44,21 +44,21 @@
     </div>
     {#if open}
         <div class="seperator p-2">
-            <span class="text-neutral-200 mt-6">{language.name}</span>
+            <span class="text-textcolor mt-6">{language.name}</span>
             <TextInput size="sm" bind:value={value.comment} />
-            <span class="text-neutral-200 mt-4">Modification Type</span>
+            <span class="text-textcolor mt-4">Modification Type</span>
             <SelectInput bind:value={value.type}>
                 <OptionInput value="editinput">{language.editInput}</OptionInput>
                 <OptionInput value="editoutput">{language.editOutput}</OptionInput>
                 <OptionInput value="editprocess">{language.editProcess}</OptionInput>
                 <OptionInput value="editdisplay">{language.editDisplay}</OptionInput>
             </SelectInput>
-            <span class="text-neutral-200 mt-6">IN:</span>
+            <span class="text-textcolor mt-6">IN:</span>
             <TextInput size="sm" bind:value={value.in} />
-            <span class="text-neutral-200 mt-6">OUT:</span>
+            <span class="text-textcolor mt-6">OUT:</span>
             <TextInput size="sm" bind:value={value.out} />
             {#if value.ableFlag}
-                <span class="text-neutral-200 mt-6">FLAG:</span>
+                <span class="text-textcolor mt-6">FLAG:</span>
                 <TextInput size="sm" bind:value={value.flag} />
             {/if}
             <div class="flex items-center mt-4">
diff --git a/src/lib/SideBars/Scripts/RegexList.svelte b/src/lib/SideBars/Scripts/RegexList.svelte
index 2c16f9a8..6915dcea 100644
--- a/src/lib/SideBars/Scripts/RegexList.svelte
+++ b/src/lib/SideBars/Scripts/RegexList.svelte
@@ -53,7 +53,7 @@
 
 <div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
     {#if value.length === 0}
-            <div class="text-gray-500">No Scripts</div>
+            <div class="text-textcolor2">No Scripts</div>
     {/if}
     {#key sorted}
         {#each value as customscript, i}
diff --git a/src/lib/SideBars/Scripts/TriggerData.svelte b/src/lib/SideBars/Scripts/TriggerData.svelte
index 7de6a265..ec379e85 100644
--- a/src/lib/SideBars/Scripts/TriggerData.svelte
+++ b/src/lib/SideBars/Scripts/TriggerData.svelte
@@ -46,9 +46,9 @@
     </div>
     {#if open}
         <div class="seperator p-2">
-            <span class="text-neutral-200 mt-6">{language.name}</span>
+            <span class="text-textcolor mt-6">{language.name}</span>
             <TextInput size="sm" bind:value={value.comment} />
-            <span class="text-neutral-200 mt-4">{language.type}</span>
+            <span class="text-textcolor mt-4">{language.type}</span>
             <SelectInput bind:value={value.type}>
                 <OptionInput value="start">{language.triggerStart}</OptionInput>
                 <OptionInput value="output">{language.triggerOutput}</OptionInput>
@@ -56,8 +56,8 @@
                 <OptionInput value="manual">{language.triggerManual}</OptionInput>
             </SelectInput>
             
-            <span class="text-neutral-200 mt-4">Conditions
-                <button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+            <span class="text-textcolor mt-4">Conditions
+                <button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                     value.conditions.push({
                         type: 'exists',
                         value: '',
@@ -70,14 +70,14 @@
             </span>
             <div class="flex flex-col px-2 py-4 border border-selected rounded-md">
                 {#if value.conditions.length === 0}
-                    <span class="text-gray-500 text-sm">{language.always}</span>
+                    <span class="text-textcolor2 text-sm">{language.always}</span>
                 {/if}
                 {#each value.conditions as cond,i}
                     {#if i > 0}
                         <hr class="border-selected my-4" />
                     {/if}
-                    <span class="text-gray-400 text-sm">{language.type}
-                        <button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+                    <span class="text-textcolor2 text-sm">{language.type}
+                        <button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                             value.conditions.splice(i, 1)
                             value.conditions = value.conditions
         
@@ -121,18 +121,18 @@
                             <OptionInput value="strict">{language.triggerMatchStrict}</OptionInput>
                             <OptionInput value="regex">{language.triggerMatchRegex}</OptionInput>
                         </SelectInput>
-                        <span  class="text-gray-400 text-sm">{language.value}</span>
+                        <span  class="text-textcolor2 text-sm">{language.value}</span>
                         <TextInput size="sm" bind:value={cond.value} />
 
-                        <span  class="text-gray-400 text-sm">{language.searchDepth}</span>
+                        <span  class="text-textcolor2 text-sm">{language.searchDepth}</span>
                         <NumberInput size="sm" bind:value={cond.depth} />
                     {/if}
                     {#if cond.type === 'var' || cond.type === 'chatindex'}
                         {#if cond.type === 'var'}
-                            <span class="text-gray-400 text-sm">{language.varableName}</span>
+                            <span class="text-textcolor2 text-sm">{language.varableName}</span>
                             <TextInput size="sm" bind:value={cond.var} />
                         {/if}
-                        <span  class="text-gray-400 text-sm">{language.value}</span>
+                        <span  class="text-textcolor2 text-sm">{language.value}</span>
                         <SelectInput bind:value={cond.operator} size="sm">
                             <OptionInput value="=">{language.equal}</OptionInput>
                             <OptionInput value="!=">{language.notEqual}</OptionInput>
@@ -150,8 +150,8 @@
                 {/each}
             </div>
 
-            <span class="text-neutral-200 mt-4">Effects
-                <button aria-labelledby="Add Effects" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+            <span class="text-textcolor mt-4">Effects
+                <button aria-labelledby="Add Effects" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                     if(value.type === 'start'){
                         value.effect.push({
                             type: 'systemprompt',
@@ -174,14 +174,14 @@
 
             <div class="flex flex-col px-2 py-4 border border-selected rounded-md">
                 {#if value.effect.length === 0}
-                    <span class="text-gray-500 text-sm">{language.noEffect}</span>
+                    <span class="text-textcolor2 text-sm">{language.noEffect}</span>
                 {/if}
                 {#each value.effect as effect,i}
                     {#if i > 0}
                         <hr class="border-selected my-4" />
                     {/if}
-                    <span class="text-gray-400 text-sm">{language.type}
-                        <button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
+                    <span class="text-textcolor2 text-sm">{language.type}
+                        <button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
                             value.effect.splice(i, 1)
                             value.effect = value.effect
         
@@ -222,19 +222,19 @@
                         {#if value.type !== 'start'}
                             <span class="text-red-400 text-sm">{language.invaildTriggerEffect}</span>
                         {/if}
-                        <span class="text-gray-400 text-sm">{language.location}</span>
+                        <span class="text-textcolor2 text-sm">{language.location}</span>
                         <SelectInput bind:value={effect.location} size="sm">
                             <OptionInput value="start">{language.promptstart}</OptionInput>
                             <OptionInput value="historyend">{language.historyend}</OptionInput>
                             <OptionInput value="promptend">{language.promptend}</OptionInput>
                         </SelectInput>
-                        <span class="text-gray-400 text-sm">{language.value}</span>
+                        <span class="text-textcolor2 text-sm">{language.value}</span>
                         <TextAreaInput size="sm" bind:value={effect.value} />
                     {/if}
                     {#if effect.type === 'setvar'}
-                        <span class="text-gray-400 text-sm">{language.varableName}</span>
+                        <span class="text-textcolor2 text-sm">{language.varableName}</span>
                         <TextInput size="sm" bind:value={effect.var} />
-                        <span class="text-gray-400 text-sm">{language.operator}</span>
+                        <span class="text-textcolor2 text-sm">{language.operator}</span>
                         <SelectInput bind:value={effect.operator} size="sm">
                             <OptionInput value="=">{language.TriggerSetToVar}</OptionInput>
                             <OptionInput value="+=">{language.TriggerAddToVar}</OptionInput>
@@ -242,16 +242,16 @@
                             <OptionInput value="*=">{language.TriggerMulToVar}</OptionInput>
                             <OptionInput value="/=">{language.TriggerDivToVar}</OptionInput>
                         </SelectInput>
-                        <span class="text-gray-400 text-sm">{language.value}</span>
+                        <span class="text-textcolor2 text-sm">{language.value}</span>
                         <TextInput size="sm" bind:value={effect.value} />
                     {/if}
                     {#if effect.type === 'impersonate'}
-                        <span class="text-gray-400 text-sm">{language.role}</span>
+                        <span class="text-textcolor2 text-sm">{language.role}</span>
                         <SelectInput bind:value={effect.role} size="sm">
                             <OptionInput value="user">{language.user}</OptionInput>
                             <OptionInput value="char">{language.character}</OptionInput>
                         </SelectInput>
-                        <span class="text-gray-400 text-sm">{language.value}</span>
+                        <span class="text-textcolor2 text-sm">{language.value}</span>
                         <TextAreaInput size="sm" bind:value={effect.value} />
                     {/if}
                 {/each}
diff --git a/src/lib/SideBars/Scripts/TriggerList.svelte b/src/lib/SideBars/Scripts/TriggerList.svelte
index 8cba7fd8..4a82ec09 100644
--- a/src/lib/SideBars/Scripts/TriggerList.svelte
+++ b/src/lib/SideBars/Scripts/TriggerList.svelte
@@ -9,7 +9,7 @@
 
 <div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
     {#if value.length === 0}
-            <div class="text-gray-500">No Scripts</div>
+            <div class="text-textcolor2">No Scripts</div>
     {/if}
     {#key sorted}
         {#each value as triggerscript, i}
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index ebcb71bf..c0b191db 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -40,25 +40,25 @@
             if(!editMode){
                 chara.chatPage = i
             }
-        }} class="flex items-center text-neutral-200  border-solid border-0 border-gray-600 p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
+        }} class="flex items-center text-textcolor  border-solid border-0 border-darkborderc p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
             {#if editMode}
                 <TextInput bind:value={chara.chats[i].name} additionalClass="flex-grow min-w-0" padding={false}/>
             {:else}
                 <span>{chat.name}</span>
             {/if}
             <div class="flex-grow flex justify-end">
-                <button class="text-gray-500 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
+                <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
                     editMode = !editMode
                 }}>
                     <EditIcon size={18}/>
                 </button>
-                <button class="text-gray-500 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
+                <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
                     e.stopPropagation()
                     exportChat(i)
                 }}>
                     <DownloadIcon size={18}/>
                 </button>
-                <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                     e.stopPropagation()
                     if(chara.chats.length === 1){
                         alertError(language.errors.onlyOneChat)
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index c7c16328..6b83656d 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -328,7 +328,7 @@
 </script>
 
 <div
-  class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg relative"
+  class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative"
   class:editMode
   class:risu-sub-sidebar={$sideBarClosing}
   class:risu-sub-sidebar-close={$sideBarClosing}
@@ -336,12 +336,12 @@
   class:flex={!hidden}
 >
   <button
-    class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer mt-2 items-center justify-center rounded-md bg-gray-500 transition-colors hover:bg-green-500"
+    class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer text-white mt-2 items-center justify-center rounded-md bg-textcolor2 transition-colors hover:bg-green-500"
     on:click={() => {
       menuMode = 1 - menuMode;
     }}><ListIcon />
   </button>
-  <div class="mt-2 border-b border-b-selected w-full relative">
+  <div class="mt-2 border-b border-b-selected w-full relative text-white ">
     {#if menuMode === 1}
       <div class="absolute w-20 min-w-20 flex border-b-selected border-b bg-bgcolor flex-col items-center pt-2 rounded-b-md z-20 pb-2">
         <BarIcon
@@ -585,7 +585,7 @@
   </div>
 </div>
 <div
-  class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-gray-200 max-h-full"
+  class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-textcolor max-h-full"
   class:risu-sidebar={!$sideBarClosing}
   class:risu-sidebar-close={$sideBarClosing}
   class:minw96={!$DynamicGUI}
@@ -602,7 +602,7 @@
   }}
 >
   <button
-    class="flex w-full justify-end text-gray-200"
+    class="flex w-full justify-end text-textcolor"
     on:click={async () => {
       if($sideBarClosing){
         return
@@ -610,18 +610,18 @@
       $sideBarClosing = true;
     }}
   >
-    <!-- <button class="border-none bg-transparent p-0 text-gray-200"><X /></button> -->
+    <!-- <button class="border-none bg-transparent p-0 text-textcolor"><X /></button> -->
   </button>
   {#if sideBarMode === 0}
     {#if $selectedCharID < 0 || $settingsOpen}
       <div>
         <h1 class="text-xl">Welcome to RisuAI!</h1>
-        <span class="text-xs text-gray-400">Select a bot to start chating</span>
+        <span class="text-xs text-textcolor2">Select a bot to start chating</span>
       </div>
     {:else}
       <div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
-        <button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-gray-500={$botMakerMode}>{language.Chat}</button>
-        <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-gray-500={!$botMakerMode}>{language.character}</button>
+        <button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>
+        <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
       </div>
       {#if $botMakerMode}
         <CharConfig />
diff --git a/src/lib/UI/BaseRoundedButton.svelte b/src/lib/UI/BaseRoundedButton.svelte
index f0e4712b..d9746b2d 100644
--- a/src/lib/UI/BaseRoundedButton.svelte
+++ b/src/lib/UI/BaseRoundedButton.svelte
@@ -8,7 +8,7 @@
   on:click={onClick}
   class="flex h-[56px] w-[56px] cursor-pointer select-none items-center justify-center
    transition-colors rounded-full
-   border border-gray-500 text-gray-300
+   border border-textcolor2 text-gray-300
    hover:border-gray-300 
    {isDisabled ? '!cursor-not-allowed' : ''}"
 >
diff --git a/src/lib/UI/GUI/Button.svelte b/src/lib/UI/GUI/Button.svelte
index 92efc544..c233fde0 100644
--- a/src/lib/UI/GUI/Button.svelte
+++ b/src/lib/UI/GUI/Button.svelte
@@ -1,6 +1,6 @@
 <button
     on:click
-    class="{selected ? 'bg-borderc' : 'bg-gray-700'} border border-gray-600 text-white rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
+    class="{selected ? 'bg-borderc' : 'bg-darkbutton'} border border-darkborderc text-textcolor rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
     class:px-4 = {size == "md"}
     class:px-2 = {size == "sm"}
     class:px-6 = {size == "lg"}
diff --git a/src/lib/UI/GUI/CheckInput.svelte b/src/lib/UI/GUI/CheckInput.svelte
index 7a14c062..9162c69e 100644
--- a/src/lib/UI/GUI/CheckInput.svelte
+++ b/src/lib/UI/GUI/CheckInput.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <label 
-    class="flex items-center space-x-2 cursor-pointer text-white"
+    class="flex items-center space-x-2 cursor-pointer text-textcolor"
     class:mr-2={margin}
     aria-describedby="{name} {check ? 'abled' : 'disabled'}"
 >
@@ -23,7 +23,7 @@
         }}
     />
     <span 
-        class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-gray-600 flex justify-center items-center {check ? 'bg-borderc' : 'bg-gray-700'} transition-colors duration-200"
+        class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-darkborderc flex justify-center items-center {check ? 'bg-borderc' : 'bg-darkbutton'} transition-colors duration-200"
         aria-hidden="true"
     >
         {#if check}
diff --git a/src/lib/UI/GUI/NumberInput.svelte b/src/lib/UI/GUI/NumberInput.svelte
index 3a53085e..f6fdac43 100644
--- a/src/lib/UI/GUI/NumberInput.svelte
+++ b/src/lib/UI/GUI/NumberInput.svelte
@@ -1,5 +1,5 @@
 <input 
-    class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+    class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
diff --git a/src/lib/UI/GUI/SelectInput.svelte b/src/lib/UI/GUI/SelectInput.svelte
index 20f25f0d..32aac48b 100644
--- a/src/lib/UI/GUI/SelectInput.svelte
+++ b/src/lib/UI/GUI/SelectInput.svelte
@@ -1,5 +1,5 @@
 <select
-    class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
+    class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
diff --git a/src/lib/UI/GUI/SideBarArrow.svelte b/src/lib/UI/GUI/SideBarArrow.svelte
index eaec7adc..76664ead 100644
--- a/src/lib/UI/GUI/SideBarArrow.svelte
+++ b/src/lib/UI/GUI/SideBarArrow.svelte
@@ -5,14 +5,14 @@
 </script>
 
 {#if $sideBarStore && !$DynamicGUI}
-    <button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent  rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 z-20">
+    <button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent  rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor z-20">
         <ArrowLeft />
     </button>
 {:else}
     <button on:click={() => {
         sideBarClosing.set(false);
         sideBarStore.set(true)}
-    } class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 opacity-50 hover:opacity-90 z-20">
+    } class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor opacity-50 hover:opacity-90 z-20">
         <ArrowRight />
     </button>
 {/if}
\ No newline at end of file
diff --git a/src/lib/UI/GUI/SliderInput.svelte b/src/lib/UI/GUI/SliderInput.svelte
index d23e8a7d..ea23ded0 100644
--- a/src/lib/UI/GUI/SliderInput.svelte
+++ b/src/lib/UI/GUI/SliderInput.svelte
@@ -1,5 +1,5 @@
 <input
-    class="text-neutral-200 bg-transparent input-text"
+    class="text-textcolor bg-transparent input-text"
     class:mb-4={marginBottom}
     type="range"
     min={min}
@@ -11,7 +11,7 @@
 
 <!-- <div class="p-6 max-w-sm mx-auto bg-gray-800 rounded-xl shadow-md flex items-center space-x-4 w-full" class:mb-4={marginBottom}>
     <div 
-      class="relative w-full h-2 bg-gray-700 rounded-full cursor-pointer"
+      class="relative w-full h-2 bg-darkbutton rounded-full cursor-pointer"
       on:click={changeValue}
     >
       <div 
diff --git a/src/lib/UI/GUI/TextAreaInput.svelte b/src/lib/UI/GUI/TextAreaInput.svelte
index 81c6901e..380d8159 100644
--- a/src/lib/UI/GUI/TextAreaInput.svelte
+++ b/src/lib/UI/GUI/TextAreaInput.svelte
@@ -1,6 +1,6 @@
 {#if optimaizedInput}
     <textarea 
-        class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+        class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
         class:text-sm={size === 'sm'}
         class:text-md={size === 'md'}
         class:text-lg={size === 'lg'}
@@ -36,7 +36,7 @@
     />
 {:else}
     <textarea 
-        class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+        class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
         class:text-sm={size === 'sm'}
         class:text-md={size === 'md'}
         class:text-lg={size === 'lg'}
diff --git a/src/lib/UI/GUI/TextAreaResizable.svelte b/src/lib/UI/GUI/TextAreaResizable.svelte
index e7ef5098..10a31894 100644
--- a/src/lib/UI/GUI/TextAreaResizable.svelte
+++ b/src/lib/UI/GUI/TextAreaResizable.svelte
@@ -29,7 +29,7 @@
         resize: none;
         box-sizing: border-box;
         background: transparent;
-        color: white;
+        color: var(--risu-theme-textcolor);
         border: 1px solid rgba(98, 114, 164, 0.5);
         max-width: calc(95% - 2rem);
         padding: 1rem;
diff --git a/src/lib/UI/GUI/TextInput.svelte b/src/lib/UI/GUI/TextInput.svelte
index 5b8bb160..4aa66957 100644
--- a/src/lib/UI/GUI/TextInput.svelte
+++ b/src/lib/UI/GUI/TextInput.svelte
@@ -1,5 +1,5 @@
 <input 
-    class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+    class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
diff --git a/src/lib/UI/MainMenu.svelte b/src/lib/UI/MainMenu.svelte
index 11809fea..548bbc13 100644
--- a/src/lib/UI/MainMenu.svelte
+++ b/src/lib/UI/MainMenu.svelte
@@ -12,26 +12,26 @@
 </script>
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
     {#if !openHub}
-      <h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
+      <h2 class="text-4xl text-textcolor mb-0 mt-6 font-black">RisuAI</h2>
       {#if (!isTauri) && (!isNodeServer)}
-        <h3 class="text-gray-500 mt-1">Version {appVer}{webAppSubVer}</h3>
+        <h3 class="text-textcolor2 mt-1">Version {appVer}{webAppSubVer}</h3>
       {:else}
-        <h3 class="text-gray-500 mt-1">Version {appVer}</h3>
+        <h3 class="text-textcolor2 mt-1">Version {appVer}</h3>
       {/if}
       <GithubStars />
     {/if}
-    <div class="w-full flex p-4 flex-col text-white max-w-4xl">
+    <div class="w-full flex p-4 flex-col text-textcolor max-w-4xl">
       {#if !openHub}
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
           openURL("https://github.com/kwaroran/RisuAI/wiki")
         }}>
           <h1 class="text-2xl font-bold text-start">{language.officialWiki}</h1>
-          <span class="mt-2 text-gray-400 text-start">{language.officialWikiDesc}</span>
+          <span class="mt-2 text-textcolor2 text-start">{language.officialWikiDesc}</span>
         </button>
         <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
           <h1 class="text-2xl font-bold text-start">{language.officialDiscord}</h1>
-          <span class="mt-2 text-gray-400 text-start">{language.officialDiscordDesc}</span>
+          <span class="mt-2 text-textcolor2 text-start">{language.officialDiscordDesc}</span>
         </button>
       </div>
       <div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
@@ -52,15 +52,15 @@
                   {/each}
               </div>
             {:else}
-              <div class="text-gray-500">Failed to load {language.hub}...</div>
+              <div class="text-textcolor2">Failed to load {language.hub}...</div>
             {/if}
           {/await}
         {:else}
-          <div class="text-gray-500">{language.hideRealm}</div>
+          <div class="text-textcolor2">{language.hideRealm}</div>
         {/if}
       {:else}
         <div class="flex items-center mt-4">
-          <button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>
+          <button class="mr-2 text-textcolor2 hover:text-green-500" on:click={() => (openHub = false)}>
             <ArrowLeft/>
           </button>
         </div>
diff --git a/src/lib/UI/ModelList.svelte b/src/lib/UI/ModelList.svelte
index 1d22099f..0fd23eb1 100644
--- a/src/lib/UI/ModelList.svelte
+++ b/src/lib/UI/ModelList.svelte
@@ -74,7 +74,7 @@
     }}>
         <div class="w-96 max-w-full max-h-full overflow-y-auto overflow-x-hidden bg-bgcolor p-4 flex flex-col" on:click|stopPropagation>
             <h1 class="font-bold text-xl">{language.model}
-                <!-- <button class="float-right text-sm font-light text-gray-500 hover:text-green-300"
+                <!-- <button class="float-right text-sm font-light text-textcolor2 hover:text-green-300"
                 class:text-green-500={openAdv} on:click={() => {
                     openAdv = !openAdv
                 }}>
diff --git a/src/lib/UI/Realm/RealmHubIcon.svelte b/src/lib/UI/Realm/RealmHubIcon.svelte
index cb998e2e..980364c7 100644
--- a/src/lib/UI/Realm/RealmHubIcon.svelte
+++ b/src/lib/UI/Realm/RealmHubIcon.svelte
@@ -12,8 +12,8 @@
 <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={onClick}>                <div class="flex gap-2 w-full">
     <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
     <div class="flex flex-col flex-grow min-w-0">
-        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
-        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+        <span class="text-textcolor text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
+        <span class="text-textcolor2 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
         <div class="flex flex-wrap">
             {#each chara.tags as tag, i}
                 {#if i < 4}
@@ -26,13 +26,13 @@
         <div class="flex-grow"></div>
         <div class="flex flex-wrap w-full flex-row-reverse gap-1">
             {#if chara.hasEmotion}
-                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
             {/if}
             {#if chara.hasAsset}
-                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
             {/if}
             {#if chara.hasLore}
-                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
             {/if}
         </div>
     </div>
diff --git a/src/lib/UI/Realm/RealmLicense.svelte b/src/lib/UI/Realm/RealmLicense.svelte
index 175e557c..3a03e3a0 100644
--- a/src/lib/UI/Realm/RealmLicense.svelte
+++ b/src/lib/UI/Realm/RealmLicense.svelte
@@ -13,7 +13,7 @@
             openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
         }}>
             <img alt="creative commons" class="cc" src="https://i.creativecommons.org/l/{CCLicenseData[license][0]}/4.0/88x31.png" />
-            <span class="text-gray-500">
+            <span class="text-textcolor2">
                 Licensed with {CCLicenseData[license][2]}
             </span>
     
diff --git a/src/lib/UI/Realm/RealmMain.svelte b/src/lib/UI/Realm/RealmMain.svelte
index 601904be..783c13cd 100644
--- a/src/lib/UI/Realm/RealmMain.svelte
+++ b/src/lib/UI/Realm/RealmMain.svelte
@@ -120,7 +120,7 @@
                 <span>
                     Menu
                 </span>
-                <button class="float-right text-gray-400 hover:text-green-500" on:click={() => {menuOpen = false}}>
+                <button class="float-right text-textcolor2 hover:text-green-500" on:click={() => {menuOpen = false}}>
                     <XIcon />
                 </button>
             </h1>
diff --git a/src/lib/UI/Realm/RealmPopUp.svelte b/src/lib/UI/Realm/RealmPopUp.svelte
index 32316ee1..dd429591 100644
--- a/src/lib/UI/Realm/RealmPopUp.svelte
+++ b/src/lib/UI/Realm/RealmPopUp.svelte
@@ -14,7 +14,7 @@
 
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-white" on:click={() => {
+<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" on:click={() => {
     openedData = null
 }}>
     <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
@@ -25,7 +25,7 @@
             {/if}
             <div class="flex justify-start gap-4 mt-4">
                 <img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
-                <span class="text-gray-400 break-words text-base chattext prose prose-invert">
+                <span class="text-textcolor2 break-words text-base chattext prose prose-invert">
                     {@html parseMarkdownSafe(openedData.desc)}
                 </span>
             </div>
@@ -37,24 +37,24 @@
                 {/each}
             </div>
             <div class="flex flex-wrap w-full flex-row gap-1 mt-2">
-                <span class="text-gray-500">
+                <span class="text-textcolor2">
                     {language.popularityLevel.replace('{}', openedData.download.toString())}
                 </span>
                 <div class="border-l-selected border-l ml-1 mr-1"></div>
                 {#if openedData.hasEmotion}
-                    <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
                 {/if}
                 {#if openedData.hasAsset}
-                    <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
                 {/if}
                 {#if openedData.hasLore}
-                    <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
                 {/if}
             </div>
 
         </div>
         <div class="flex flex-row-reverse gap-2">
-            <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
+            <button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
                 const conf = await alertConfirm('Report this character?')
                 if(conf){
                     const report = await alertInput('Write a report text that would be sent to the admin')
@@ -71,7 +71,7 @@
                 <FlagIcon />
             </button>
             {#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
-                <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
+                <button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
                     const conf = await alertConfirm('Do you want to remove this character from Realm?')
                     if(conf){
                         const da = await fetch(hubURL + '/hub/remove', {
@@ -87,7 +87,7 @@
                     <TrashIcon />
                 </button>
             {/if}
-            <button class="text-gray-400 hover:text-green-500" on:click|stopPropagation={async () => {
+            <button class="text-textcolor2 hover:text-green-500" on:click|stopPropagation={async () => {
                 await navigator.clipboard.writeText(`https://risuai.xyz/?realm=${openedData.id}`)
                 alertNormal("Copied to clipboard")
             }}>
diff --git a/src/lib/UI/Realm/RealmUpload.svelte b/src/lib/UI/Realm/RealmUpload.svelte
index 700f60f7..83dc9673 100644
--- a/src/lib/UI/Realm/RealmUpload.svelte
+++ b/src/lib/UI/Realm/RealmUpload.svelte
@@ -4,35 +4,35 @@
         
         {#if !$DataBase.account}
             <span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
-            <span class="text-gray-500">You can login in app settings 🡲 account</span>
+            <span class="text-textcolor2">You can login in app settings 🡲 account</span>
             <button on:click={async () => {
                 close()
-            }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
+            }} class="text-textcolor mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
             
         {:else}
         <h1 class="font-bold text-2xl w-full">
             <span>
                 Share {char.name} to {language.hub}
             </span>
-            <button class="float-right text-gray-400 hover:text-green-500" on:click={close}>
+            <button class="float-right text-textcolor2 hover:text-green-500" on:click={close}>
                 <XIcon />
             </button>
         </h1>
         <div class="mb-2 mt-2 w-full border-t-2 border-t-bgcolor"></div>
-        <span class="text-neutral-200">{language.creatorNotes}</span>
-        <span class="text-gray-400 text-sm">A description that displays when you search and when you first open a bot.</span>
-        <span class="text-gray-400 text-sm">More than 20 characters.</span>
+        <span class="text-textcolor">{language.creatorNotes}</span>
+        <span class="text-textcolor2 text-sm">A description that displays when you search and when you first open a bot.</span>
+        <span class="text-textcolor2 text-sm">More than 20 characters.</span>
         <TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} />
-        <span class="text-neutral-200">{language.tags}</span>
-        <span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
+        <span class="text-textcolor">{language.tags}</span>
+        <span class="text-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
         <TextInput placeholder="" bind:value={tags} on:input={() => {
             tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
         }} />
 
         {#if char.license !== 'CC BY-NC-SA 4.0' && char.license !== 'CC BY-SA 4.0'}
 
-        <span class="text-neutral-200 mt-4">License</span>
-        <span class="text-gray-400 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
+        <span class="text-textcolor mt-4">License</span>
+        <span class="text-textcolor2 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
         <SelectInput bind:value={license}>
             <OptionInput value="">None</OptionInput>
             {#each Object.keys(CCLicenseData) as ccl}
@@ -50,7 +50,7 @@
             <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
         </div>
         {#if nsfwMode}
-            <span class="text-gray-400 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
+            <span class="text-textcolor2 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
         {/if}
         <Button on:click={async () => {
             if(char.creatorNotes.length < 20){
diff --git a/src/styles.css b/src/styles.css
index 30e195fa..f4d37b5e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,17 +6,27 @@ body{
   margin: 0;
   padding: 0;
   margin-top: 0px;
-  background-color: #282a36;
+  background-color: var(--risu-theme-bgcolor);
   overflow-y: hidden;
   overflow-x: hidden;
 }
 
 :root{
   --FontColorStandard: #fafafa;
-  --FontColorBold : #fafafa;
+  --FontColorBold : ##e5e5e5;
   --FontColorItalic : #8C8D93;
   --FontColorItalicBold : #8C8D93;
-  --risu-animation-speed: 0.2s
+  --risu-animation-speed: 0.2s;
+  --risu-theme-bgcolor: #282a36;
+  --risu-theme-darkbg:  #21222c;
+  --risu-theme-borderc: #6272a4;
+  --risu-theme-selected: #44475a;
+  --risu-theme-draculared: #ff5555;
+  --risu-theme-textcolor: #f5f5f5;
+  --risu-theme-textcolor2: #64748b;
+  --risu-theme-darkborderc: #4b5563;
+  --risu-theme-darkbutton: #374151;
+
 }
 
 html, body{
@@ -28,7 +38,7 @@ html, body{
 }
 
 .chattext2 pre{
-  background-color: #282a36;
+  background-color: var(--risu-theme-bgcolor);
   padding: 0.5rem;
   overflow-x: auto;
 }
@@ -126,7 +136,7 @@ html, body{
 .input-text{
   border: none;
   outline: 0;
-  border-bottom: 1px solid #6272a4;
+  border-bottom: 1px solid var(--risu-theme-borderc);
 }
 
 .bgc{
diff --git a/src/ts/gui/colorscheme.ts b/src/ts/gui/colorscheme.ts
new file mode 100644
index 00000000..431b09e5
--- /dev/null
+++ b/src/ts/gui/colorscheme.ts
@@ -0,0 +1,160 @@
+import { get } from "svelte/store";
+import { DataBase, setDatabase } from "../storage/database";
+import { cloneDeep } from "lodash";
+
+export interface ColorScheme{
+    bgcolor: string;
+    darkbg: string;
+    borderc: string;
+    selected: string;
+    draculared: string;
+    textcolor: string;
+    textcolor2: string;
+    darkBorderc: string;
+    darkbutton: string;
+    type:'light'|'dark';
+}
+
+
+export const defaultColorScheme: ColorScheme = {
+    bgcolor: "#282a36",
+    darkbg: "#21222c",
+    borderc: "#6272a4",
+    selected: "#44475a",
+    draculared: "#ff5555",
+    textcolor: "#f8f8f2",
+    textcolor2: "#64748b",
+    darkBorderc: "#4b5563",
+    darkbutton: "#374151",
+    type:'dark'
+}
+
+const colorShemes = {
+    "default": defaultColorScheme,
+    "light": {
+        bgcolor: "#f0f0f0",
+        darkbg: "#ffffff",
+        borderc: "#0f172a",
+        selected: "#e0e0e0",
+        draculared: "#ff5555",
+        textcolor: "#0f172a",
+        textcolor2: "#64748b",
+        darkBorderc: "#d1d5db",
+        darkbutton: "#e5e7eb",
+        type:'light'
+    },
+    "cherry": {
+        bgcolor: "#450a0a",
+        darkbg: "#7f1d1d",
+        borderc: "#ea580c",
+        selected: "#d97706",
+        draculared: "#ff5555",
+        textcolor: "#f8f8f2",
+        textcolor2: "#fca5a5",
+        darkBorderc: "#92400e",
+        darkbutton: "#b45309",
+        type:'dark'
+    },
+    "galaxy": {
+        bgcolor: "#0f172a",
+        darkbg: "#1f2a48",
+        borderc: "#8be9fd",
+        selected: "#457b9d",
+        draculared: "#ff5555",
+        textcolor: "#f8f8f2",
+        textcolor2: "#8be9fd",
+        darkBorderc: "#457b9d",
+        darkbutton: "#1f2a48",
+        type:'dark'
+    },
+    "nature": {
+        bgcolor: "#1b4332",
+        darkbg: "#2d6a4f",
+        borderc: "#a8dadc",
+        selected: "#4d908e",
+        draculared: "#ff5555",
+        textcolor: "#f8f8f2",
+        textcolor2: "#4d908e",
+        darkBorderc: "#457b9d",
+        darkbutton: "#2d6a4f",
+        type:'dark'
+    }
+
+} as const
+
+export const colorSchemeList = Object.keys(colorShemes) as (keyof typeof colorShemes)[]
+
+export function changeColorScheme(colorScheme: string){
+    let db = get(DataBase)
+    db.colorScheme = cloneDeep(colorShemes[colorScheme])
+    db.colorSchemeName = colorScheme
+    setDatabase(db)
+    updateColorScheme()
+}
+
+export function updateColorScheme(){
+    let db = get(DataBase)
+
+    let colorScheme = db.colorScheme
+
+    if(colorScheme == null){
+        colorScheme = defaultColorScheme
+    }
+
+    //set css variables
+    document.documentElement.style.setProperty("--risu-theme-bgcolor", colorScheme.bgcolor);
+    document.documentElement.style.setProperty("--risu-theme-darkbg", colorScheme.darkbg);
+    document.documentElement.style.setProperty("--risu-theme-borderc", colorScheme.borderc);
+    document.documentElement.style.setProperty("--risu-theme-selected", colorScheme.selected);
+    document.documentElement.style.setProperty("--risu-theme-draculared", colorScheme.draculared);
+    document.documentElement.style.setProperty("--risu-theme-textcolor", colorScheme.textcolor);
+    document.documentElement.style.setProperty("--risu-theme-textcolor2", colorScheme.textcolor2);
+    document.documentElement.style.setProperty("--risu-theme-darkborderc", colorScheme.darkBorderc);
+    document.documentElement.style.setProperty("--risu-theme-darkbutton", colorScheme.darkbutton);
+}
+
+export function updateTextTheme(){
+    let db = get(DataBase)
+    const root = document.querySelector(':root') as HTMLElement;
+    if(!root){
+        return
+    }
+    switch(db.textTheme){
+        case "standard":{
+            if(db.colorScheme.type === 'dark'){
+                root.style.setProperty('--FontColorStandard', '#fafafa');
+                root.style.setProperty('--FontColorItalic', '#8C8D93');
+                root.style.setProperty('--FontColorBold', '#fafafa');
+                root.style.setProperty('--FontColorItalicBold', '#8C8D93');
+            }else{
+                root.style.setProperty('--FontColorStandard', '#0f172a');
+                root.style.setProperty('--FontColorItalic', '#8C8D93');
+                root.style.setProperty('--FontColorBold', '#0f172a');
+                root.style.setProperty('--FontColorItalicBold', '#8C8D93');
+            }
+            break
+        }
+        case "highcontrast":{
+            if(db.colorScheme.type === 'dark'){
+                root.style.setProperty('--FontColorStandard', '#f8f8f2');
+                root.style.setProperty('--FontColorItalic', '#F1FA8C');
+                root.style.setProperty('--FontColorBold', '#8BE9FD');
+                root.style.setProperty('--FontColorItalicBold', '#FFB86C');
+            }
+            else{
+                root.style.setProperty('--FontColorStandard', '#0f172a');
+                root.style.setProperty('--FontColorItalic', '#F1FA8C');
+                root.style.setProperty('--FontColorBold', '#8BE9FD');
+                root.style.setProperty('--FontColorItalicBold', '#FFB86C');
+            }
+            break
+        }
+        case "custom":{
+            root.style.setProperty('--FontColorStandard', db.customTextTheme.FontColorStandard);
+            root.style.setProperty('--FontColorItalic', db.customTextTheme.FontColorItalic);
+            root.style.setProperty('--FontColorBold', db.customTextTheme.FontColorBold);
+            root.style.setProperty('--FontColorItalicBold', db.customTextTheme.FontColorItalicBold);
+            break
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index fa65825a..58b8ea1b 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -9,6 +9,7 @@ import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from '.
 import { alertNormal } from '../alert';
 import type { NAISettings } from '../process/models/nai';
 import { prebuiltNAIpresets } from '../process/templates/templates';
+import { defaultColorScheme, type ColorScheme } from '../gui/colorscheme';
 
 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
@@ -294,6 +295,8 @@ export function setDatabase(data:Database){
     data.NAIsettings ??= cloneDeep(prebuiltNAIpresets)
     data.assetWidth ??= -1
     data.animationSpeed ??= 0.4
+    data.colorScheme ??= cloneDeep(defaultColorScheme)
+    data.colorSchemeName ??= 'default'
     
     changeLanguage(data.language)
     DataBase.set(data)
@@ -604,6 +607,8 @@ export interface Database{
     botSettingAtStart:false
     NAIsettings:NAISettings
     hideRealm:boolean
+    colorScheme:ColorScheme
+    colorSchemeName:string
 }
 
 interface hordeConfig{
@@ -789,37 +794,6 @@ export const defaultSdDataFunc = () =>{
     return cloneDeep(defaultSdData)
 }
 
-export function updateTextTheme(){
-    let db = get(DataBase)
-    const root = document.querySelector(':root') as HTMLElement;
-    if(!root){
-        return
-    }
-    switch(db.textTheme){
-        case "standard":{
-            root.style.setProperty('--FontColorStandard', '#fafafa');
-            root.style.setProperty('--FontColorItalic', '#8C8D93');
-            root.style.setProperty('--FontColorBold', '#fafafa');
-            root.style.setProperty('--FontColorItalicBold', '#8C8D93');
-            break
-        }
-        case "highcontrast":{
-            root.style.setProperty('--FontColorStandard', '#f8f8f2');
-            root.style.setProperty('--FontColorItalic', '#F1FA8C');
-            root.style.setProperty('--FontColorBold', '#8BE9FD');
-            root.style.setProperty('--FontColorItalicBold', '#FFB86C');
-            break
-        }
-        case "custom":{
-            root.style.setProperty('--FontColorStandard', db.customTextTheme.FontColorStandard);
-            root.style.setProperty('--FontColorItalic', db.customTextTheme.FontColorItalic);
-            root.style.setProperty('--FontColorBold', db.customTextTheme.FontColorBold);
-            root.style.setProperty('--FontColorItalicBold', db.customTextTheme.FontColorItalicBold);
-            break
-        }
-    }
-}
-
 export function saveCurrentPreset(){
     let db = get(DataBase)
     let pres = db.botPresets
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index dc972740..327bed53 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { appDataDir, join } from "@tauri-apps/api/path";
 import { get } from "svelte/store";
 import {open} from '@tauri-apps/api/shell'
-import { DataBase, loadedStore, setDatabase, type Database, updateTextTheme, defaultSdDataFunc } from "./database";
+import { DataBase, loadedStore, setDatabase, type Database, defaultSdDataFunc } from "./database";
 import { appWindow } from "@tauri-apps/api/window";
 import { checkOldDomain, checkUpdate } from "../update";
 import { botMakerMode, selectedCharID } from "../stores";
@@ -21,6 +21,7 @@ import { loadRisuAccountData } from "../drive/accounter";
 import { decodeRisuSave, encodeRisuSave } from "./risuSave";
 import { AutoStorage } from "./autoStorage";
 import { updateAnimationSpeed } from "../gui/animation";
+import { updateColorScheme, updateTextTheme } from "../gui/colorscheme";
 
 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -425,6 +426,7 @@ export async function loadData() {
             }
             await checkNewFormat()
             const db = get(DataBase);
+            updateColorScheme()
             updateTextTheme()
             updateAnimationSpeed()
             if(db.botSettingAtStart){
@@ -441,14 +443,20 @@ export async function loadData() {
 
 const knownHostes = ["localhost","127.0.0.1"]
 
-export function addFetchLog(body:any, headers:any, response:any, success:boolean, url:string){
+export function addFetchLog(arg:{
+    body:any,
+    headers?:{[key:string]:string},
+    response:any,
+    success:boolean,
+    url:string
+}){
     fetchLog.unshift({
-        body: JSON.stringify(body, null, 2),
-        header: JSON.stringify(headers ?? {}, null, 2),
-        response: JSON.stringify(response, null, 2),
-        success: success,
+        body: JSON.stringify(arg.body, null, 2),
+        header: JSON.stringify(arg.headers ?? {}, null, 2),
+        response: JSON.stringify(arg.response, null, 2),
+        success: arg.success,
         date: (new Date()).toLocaleTimeString(),
-        url: url
+        url: arg.url
     })
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 697fe8c8..112e5f87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,11 +7,15 @@ export default {
   theme: {
     extend: {
       colors:{
-          bgcolor: "#282a36",
-          darkbg: "#21222C",
-          borderc: "#6272a4",
-          selected: "#44475a",
-          draculared: "#ff5555"
+          bgcolor: "var(--risu-theme-bgcolor)",
+          darkbg: "var(--risu-theme-darkbg)",
+          borderc: "var(--risu-theme-borderc)",
+          selected: "var(--risu-theme-selected)",
+          draculared: "var(--risu-theme-draculared)",
+          textcolor: "var(--risu-theme-textcolor)",
+          textcolor2: "var(--risu-theme-textcolor2)",
+          darkborderc: "var(--risu-theme-darkborderc)",
+          darkbutton: "var(--risu-theme-darkbutton)",
       },
       minWidth: {
         '2': '0.5rem',