From 80b8198927f28e904f35225c044acdfc55f03d08 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Tue, 19 Mar 2024 15:14:33 +0900
Subject: [PATCH] Implement custom color scheme functionality

---
 src/lib/Setting/Pages/DisplaySettings.svelte | 46 +++++++++++++++++++-
 src/ts/gui/colorscheme.ts                    |  4 +-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index 0f2ea903..fa4e2fd2 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -8,7 +8,7 @@
     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";
+    import { changeColorScheme, colorSchemeList, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
 
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
@@ -40,8 +40,52 @@
     {#each colorSchemeList as scheme}
         <OptionInput value={scheme} >{scheme}</OptionInput>
     {/each}
+    <OptionInput value="custom" >Custom</OptionInput>
 </SelectInput>
 
+{#if $DataBase.colorSchemeName === "custom"}
+    <SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}>
+        <OptionInput value="light">Light</OptionInput>
+        <OptionInput value="dark">Dark</OptionInput>
+    </SelectInput>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.bgcolor} on:change={updateColorScheme}>
+        <span class="ml-2">Background</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkbg} on:change={updateColorScheme}>
+        <span class="ml-2">Dark Background</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.borderc} on:change={updateColorScheme}>
+        <span class="ml-2">Color 1</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.selected} on:change={updateColorScheme}>
+        <span class="ml-2">Color 2</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.draculared} on:change={updateColorScheme}>
+        <span class="ml-2">Color 3</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkBorderc} on:change={updateColorScheme}>
+        <span class="ml-2">Color 4</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.darkbutton} on:change={updateColorScheme}>
+        <span class="ml-2">Color 5</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.textcolor} on:change={updateColorScheme}>
+        <span class="ml-2">Text Color</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.textcolor2} on:change={updateColorScheme}>
+        <span class="ml-2">Text Color 2</span>
+    </div>
+{/if}
+
 <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>
diff --git a/src/ts/gui/colorscheme.ts b/src/ts/gui/colorscheme.ts
index 92f51f3b..4965e0df 100644
--- a/src/ts/gui/colorscheme.ts
+++ b/src/ts/gui/colorscheme.ts
@@ -98,7 +98,9 @@ export const colorSchemeList = Object.keys(colorShemes) as (keyof typeof colorSh
 
 export function changeColorScheme(colorScheme: string){
     let db = get(DataBase)
-    db.colorScheme = cloneDeep(colorShemes[colorScheme])
+    if(colorScheme !== 'custom'){
+        db.colorScheme = cloneDeep(colorShemes[colorScheme])
+    }
     db.colorSchemeName = colorScheme
     setDatabase(db)
     updateColorScheme()