Add custom css and rs classes for it

src/ts/gui/colorscheme.ts

@@ -4,6 +4,7 @@ import { downloadFile } from "../storage/globalApi";
 import { BufferToText, selectSingleFile } from "../util";
 import { alertError } from "../alert";
 import { isLite } from "../lite";
+import { CustomCSSStore, SafeModeStore } from "../stores";
 
 export interface ColorScheme{
     bgcolor: string;
@@ -179,7 +180,8 @@ export async function importColorScheme(){
     
     }
 }
-export function updateTextTheme(){
+
+export function updateTextThemeAndCSS(){
     let db = get(DataBase)
     const root = document.querySelector(':root') as HTMLElement;
     if(!root){
@@ -250,4 +252,11 @@ export function updateTextTheme(){
             break
         }
     }
+
+    if(!get(SafeModeStore)){
+        CustomCSSStore.set(db.customCSS ?? '')
+    }
+    else{
+        CustomCSSStore.set('')
+    }
 }

src/ts/hotkey.ts

@@ -1,8 +1,9 @@
 import { get } from "svelte/store"
 import { alertSelect, alertToast, doingAlert } from "./alert"
 import { DataBase, changeToPreset as changeToPreset2  } from "./storage/database"
-import { openPersonaList, openPresetList, selectedCharID, settingsOpen } from "./stores"
+import { openPersonaList, openPresetList, SafeModeStore, selectedCharID, settingsOpen } from "./stores"
 import { language } from "src/lang"
+import { updateTextThemeAndCSS } from "./gui/colorscheme"
 
 export function initHotkey(){
     document.addEventListener('keydown', (ev) => {
@@ -86,6 +87,13 @@ export function initHotkey(){
                     ev.stopPropagation()
                     break
                 }
+                case '.':{
+                    SafeModeStore.set(!get(SafeModeStore))
+                    updateTextThemeAndCSS()
+                    ev.preventDefault()
+                    ev.stopPropagation()
+                    break
+                }
             }
         }
         if(ev.key === 'Escape'){

src/ts/storage/database.ts

@@ -434,6 +434,7 @@ export function setDatabase(data:Database){
     data.translatorInputLanguage ??= 'auto'
     data.falModel ??= 'fal-ai/flux/dev'
     data.falLoraScale ??= 1
+    data.customCSS ??= ''
     changeLanguage(data.language)
     DataBase.set(data)
 }
@@ -726,6 +727,7 @@ export interface Database{
     falLoraName: string
     falLoraScale: number
     moduleIntergration: string
+    customCSS: string
 }
 
 export interface customscript{

src/ts/storage/globalApi.ts

@@ -21,7 +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";
+import { updateColorScheme, updateTextThemeAndCSS } from "../gui/colorscheme";
 import { saveDbKei } from "../kei/backup";
 import { Capacitor, CapacitorHttp } from '@capacitor/core';
 import * as CapFS from '@capacitor/filesystem'
@@ -525,7 +525,7 @@ export async function loadData() {
             await checkNewFormat()
             const db = get(DataBase);
             updateColorScheme()
-            updateTextTheme()
+            updateTextThemeAndCSS()
             updateAnimationSpeed()
             updateHeightMode()
             updateErrorHandling()

src/ts/stores.ts

@@ -45,11 +45,29 @@ export const ShowRealmFrameStore = writable('')
 export const PlaygroundStore = writable(0)
 export const HideIconStore = writable(false)
 export const UserIconProtrait = writable(false)
+export const CustomCSSStore = writable('')
+export const SafeModeStore = writable(false)
+
 let lastGlobalEnabledModules: string[] = []
 let lastChatEnabledModules: string[] = []
 let moduleHideIcon = false
 let characterHideIcon = false
 
+
+CustomCSSStore.subscribe((css) => {
+    console.log(css)
+    const q = document.querySelector('#customcss')
+    if(q){
+        q.innerHTML = css
+    }
+    else{
+        const s = document.createElement('style')
+        s.id = 'customcss'
+        s.innerHTML = css
+        document.body.appendChild(s)
+    }
+})
+
 function createSimpleCharacter(char:character|groupChat){
     if((!char) || char.type === 'group'){
         return null