sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 23:48:56 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 16

Use milder yellow as primary Khoj theme color for chat, buttons etc.

Browse source
This commit is contained in:
Debanjum Singh Solanky 2023-11-28 14:09:57 -08:00
parent 18254850ab
commit 110d7646fc
3 changed files with 20 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/interface/desktop/assets/khoj.css
View file

@ -2,8 +2,8 @@
/* Can be forced with data-theme="light" */ /* Can be forced with data-theme="light" */
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--primary: #fee285; --primary: #f9f5de;
--primary-hover: #fcc50b; --primary-hover: #fee285;
--primary-focus: rgba(255, 179, 0, 0.125); --primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75); --primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3; --background-color: #f5f4f3;
@ -17,8 +17,8 @@
/* Automatically enabled if user has Dark mode enabled */ /* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
--primary: #fee285; --primary: #f9f5de;
--primary-hover: #fcc50b; --primary-hover: #fee285;
--primary-focus: rgba(255, 179, 0, 0.25); --primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75); --primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3; --background-color: #f5f4f3;

17
src/interface/obsidian/styles.css
View file

@ -8,8 +8,9 @@ If your plugin does not need CSS, delete this file.
*/ */
:root { :root {
--khoj-chat-primary: #fee285; --khoj-winter-sun: #f9f5de;
--khoj-chat-dark-grey: #475569; --khoj-sun: #fee285;
--khoj-storm-grey: #475569;
} }
.khoj-chat { .khoj-chat {
@ -29,7 +30,7 @@ If your plugin does not need CSS, delete this file.
#khoj-chat-title { #khoj-chat-title {
font-weight: 200; font-weight: 200;
color: var(--khoj-chat-primary); color: var(--khoj-sun);
} }
#khoj-chat-body { #khoj-chat-body {
@ -68,8 +69,8 @@ If your plugin does not need CSS, delete this file.
} }
/* color chat bubble by khoj blue */ /* color chat bubble by khoj blue */
.khoj-chat-message-text.khoj { .khoj-chat-message-text.khoj {
color: var(--khoj-chat-dark-grey); color: var(--khoj-storm-grey);
background: var(--khoj-chat-primary); background: var(--khoj-winter-sun);
margin-left: auto; margin-left: auto;
white-space: pre-line; white-space: pre-line;
} }
@ -80,14 +81,14 @@ If your plugin does not need CSS, delete this file.
bottom: -2px; bottom: -2px;
left: -7px; left: -7px;
border: 10px solid transparent; border: 10px solid transparent;
border-top-color: var(--khoj-chat-primary); border-top-color: var(--khoj-winter-sun);
border-bottom: 0; border-bottom: 0;
transform: rotate(-60deg); transform: rotate(-60deg);
} }
/* color chat bubble by you dark grey */ /* color chat bubble by you dark grey */
.khoj-chat-message-text.you { .khoj-chat-message-text.you {
color: var(--text-on-accent); color: var(--text-on-accent);
background: var(--khoj-chat-dark-grey); background: var(--khoj-storm-grey);
margin-right: auto; margin-right: auto;
} }
/* add right protrusion to you chat bubble */ /* add right protrusion to you chat bubble */
@ -97,7 +98,7 @@ If your plugin does not need CSS, delete this file.
top: 91%; top: 91%;
right: -2px; right: -2px;
border: 10px solid transparent; border: 10px solid transparent;
border-left-color: var(--khoj-chat-dark-grey); border-left-color: var(--khoj-storm-grey);
border-right: 0; border-right: 0;
margin-top: -10px; margin-top: -10px;
transform: rotate(-60deg) transform: rotate(-60deg)

14
src/khoj/interface/web/assets/khoj.css
View file

@ -2,8 +2,8 @@
/* Can be forced with data-theme="light" */ /* Can be forced with data-theme="light" */
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--primary: #fee285; --primary: #f9f5de;
--primary-hover: #fcc50b; --primary-hover: #fee285;
--primary-focus: rgba(255, 179, 0, 0.125); --primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75); --primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3; --background-color: #f5f4f3;
@ -17,8 +17,8 @@
/* Automatically enabled if user has Dark mode enabled */ /* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
--primary: #fee285; --primary: #f9f5de;
--primary-hover: #fcc50b; --primary-hover: #fee285;
--primary-focus: rgba(255, 179, 0, 0.25); --primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75); --primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3; --background-color: #f5f4f3;
@ -31,8 +31,8 @@
/* Amber Dark scheme (Forced) */ /* Amber Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */ /* Enabled if forced with data-theme="dark" */
[data-theme="dark"] { [data-theme="dark"] {
--primary: #fee285; --primary: #f9f5de;
--primary-hover: #fcc50b; --primary-hover: #fee285;
--primary-focus: rgba(255, 179, 0, 0.25); --primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75); --primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3; --background-color: #f5f4f3;
@ -62,7 +62,7 @@
grid-auto-flow: column; grid-auto-flow: column;
gap: 20px; gap: 20px;
padding: 16px 0; padding: 16px 0;
margin: 0 0 16px 0; margin: 0;
} }
.khoj-footer { .khoj-footer {
margin: 16px 0 0 0; margin: 16px 0 0 0;