[feat] add color scheme
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user