Add color scheme export and import functionality

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -8,7 +8,8 @@
     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, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
+    import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
+  import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
 
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
@@ -44,6 +45,7 @@
 </SelectInput>
 
 {#if $DataBase.colorSchemeName === "custom"}
+<div class="border border-darkborderc p-2 m-2 rounded-md">
     <SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}>
         <OptionInput value="light">Light</OptionInput>
         <OptionInput value="dark">Dark</OptionInput>
@@ -84,6 +86,19 @@
         <input type="color" class="style2 text-sm" bind:value={$DataBase.colorScheme.textcolor2} on:change={updateColorScheme}>
         <span class="ml-2">Text Color 2</span>
     </div>
+    <div class="flex-grow flex justify-end">
+        <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
+            exportColorScheme()
+        }}>
+            <DownloadIcon size={18}/>
+        </button>
+        <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+            importColorScheme()
+        }}>
+            <FolderUpIcon size={18}/>
+        </button>
+    </div>
+</div>
 {/if}
 
 <span class="text-textcolor mt-4">{language.textColor}</span>

src/ts/gui/colorscheme.ts

@@ -1,6 +1,9 @@
 import { get } from "svelte/store";
 import { DataBase, setDatabase } from "../storage/database";
 import { cloneDeep } from "lodash";
+import { downloadFile } from "../storage/globalApi";
+import { BufferToText, selectSingleFile } from "../util";
+import { alertError } from "../alert";
 
 export interface ColorScheme{
     bgcolor: string;
@@ -127,6 +130,48 @@ export function updateColorScheme(){
     document.documentElement.style.setProperty("--risu-theme-darkbutton", colorScheme.darkbutton);
 }
 
+export function exportColorScheme(){
+    let db = get(DataBase)
+    let json = JSON.stringify(db.colorScheme)
+    downloadFile('colorScheme.json', json)
+}
+
+export async function importColorScheme(){
+    const uarray = await selectSingleFile(['json'])
+    if(uarray == null){
+        return
+    }
+    const string = BufferToText(uarray.data)
+    let colorScheme: ColorScheme
+    try{
+        colorScheme = JSON.parse(string)
+        if(
+            typeof colorScheme.bgcolor !== 'string' ||
+            typeof colorScheme.darkbg !== 'string' ||
+            typeof colorScheme.borderc !== 'string' ||
+            typeof colorScheme.selected !== 'string' ||
+            typeof colorScheme.draculared !== 'string' ||
+            typeof colorScheme.textcolor !== 'string' ||
+            typeof colorScheme.textcolor2 !== 'string' ||
+            typeof colorScheme.darkBorderc !== 'string' ||
+            typeof colorScheme.darkbutton !== 'string' ||
+            typeof colorScheme.type !== 'string'
+        ){
+            alertError('Invalid color scheme')
+            return
+        }
+        changeColorScheme('custom')
+        let db = get(DataBase)
+        db.colorScheme = colorScheme
+        setDatabase(db)
+        updateColorScheme()
+    }
+    catch(e){
+        alertError('Invalid color scheme')
+        return
+    
+    }
+}
 export function updateTextTheme(){
     let db = get(DataBase)
     const root = document.querySelector(':root') as HTMLElement;