[feat] add color scheme

This commit is contained in:
kwaroran
2023-08-03 08:58:36 +09:00
parent 7d369221dc
commit 0e0601642a
57 changed files with 622 additions and 453 deletions

View File

@@ -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',

View File

@@ -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}/>

View File

@@ -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} />

View File

@@ -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}

View File

@@ -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