sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-17 18:17:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Update Desktop, Obsidian client color theme to lighter yellow

Browse source 
- Update background color to a different shade of white
- Make primary and primary hover colors less intense and more aligned
  with lantern flame shade
- Add water, leaf, flower color variables
This commit is contained in:
Debanjum Singh Solanky 2023-11-03 00:14:07 -07:00
parent 345856e7be
commit 80ae132cad
7 changed files with 43 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/interface/desktop/assets/icons/khoj-logo-sideways-500.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 29 KiB

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

@ -2,29 +2,44 @@
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #ffb300;
--primary-hover: #ffa000;
--primary: #fee285;
--primary-hover: #fcc50b;
--primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #d1684e;
}
/* Amber Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary: #fee285;
--primary-hover: #fcc50b;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #d1684e;
}
}
/* Amber Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary: #fee285;
--primary-hover: #fcc50b;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
--background-color: #f5f4f3;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #d1684e;
}
/* Amber (Common styles) */
:root {
@ -66,7 +81,7 @@ a.khoj-logo {
}
.khoj-nav a {
color: #333;
color: var(--main-text-color);
text-decoration: none;
font-size: small;
font-weight: normal;

2
src/interface/desktop/chat.html
View file

@ -303,7 +303,7 @@
}
body {
display: grid;
background: #fff;
background: var(--background-color);
color: #475569;
text-align: center;
font-family: roboto, karma, segoe ui, sans-serif;

38
src/interface/desktop/config.html
View file

@ -8,8 +8,6 @@
<link rel="manifest" href="./khoj.webmanifest">
<link rel="stylesheet" href="./assets/khoj.css">
</head>
<script type="text/javascript" src="./assets/org.min.js"></script>
<script type="text/javascript" src="./assets/markdown-it.min.js"></script>
<body>
<!--Add Header Logo and Nav Pane-->
@ -38,11 +36,11 @@
<div class="card-title-row">
<img class="card-icon" src="./assets/icons/key.svg" alt="Khoj Access Key">
<h3 class="card-title">
Access Key
API Key
</h3>
</div>
<div class="card-description-row">
<input id="khoj-access-key" class="card-input" type="text" placeholder="Enter key to access your Khoj">
<input id="khoj-access-key" class="card-input" type="text" placeholder="Enter API key to access your Khoj">
</div>
</div>
</div>
@ -131,7 +129,7 @@
body, input {
padding: 0px;
margin: 0px;
background: #fff;
background: var(--background-color);
color: #475569;
font-family: roboto, karma, segoe ui, sans-serif;
font-size: small;
@ -191,7 +189,7 @@
gap: 8px;
padding: 24px 16px;
width: 450px;
background: white;
background: var(--background-color);
border: 1px solid rgb(229, 229, 229);
border-radius: 4px;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.1);
@ -259,7 +257,7 @@
}
.primary-button {
border: none;
color: white;
color: var(--background-color);
padding: 15px 32px;
text-align: center;
text-decoration: none;
@ -268,7 +266,7 @@
}
button.card-button.disabled {
color: rgb(255, 136, 136);
color: var(--flower);
background: transparent;
font-size: small;
cursor: pointer;
@ -280,11 +278,7 @@
}
button.card-button.happy {
color: rgb(0, 146, 0);
}
button.card-button.happy {
color: rgb(0, 146, 0);
color: var(--leaf);
}
img.configured-icon {
@ -308,7 +302,9 @@
div.folder-element {
display: grid;
grid-template-columns: auto 1fr;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
border: 1px solid rgb(229, 229, 229);
border-radius: 4px;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
padding: 4px;
margin-bottom: 8px;
}
@ -326,7 +322,7 @@
background-color: rgb(253 214 214);
border-radius: 3px;
border: none;
color: rgb(207, 67, 59);
color: var(--flower);
padding: 4px;
}
@ -335,14 +331,14 @@
background-color: rgb(255 235 235);
border-radius: 3px;
border: none;
color: rgb(207, 67, 59);
color: var(--flower);
padding: 4px;
cursor: pointer;
}
#sync-data {
background-color: #ffb300;
background-color: var(--primary);
border: none;
color: white;
color: var(--main-text-color);
padding: 12px;
text-align: center;
text-decoration: none;
@ -351,12 +347,12 @@
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0px 5px 0px #f9f5de;
box-shadow: 0px 5px 0px var(--background-color);
}
#sync-data:hover {
background-color: #ffcc00;
box-shadow: 0px 3px 0px #f9f5de;
background-color: var(--primary-hover);
box-shadow: 0px 3px 0px var(--background-color);
}
.sync-force-toggle {
align-content: center;

2
src/interface/desktop/search.html
View file

@ -302,7 +302,7 @@
body {
padding: 0px;
margin: 0px;
background: #fff;
background: var(--background-color);
color: #475569;
font-family: roboto, karma, segoe ui, sans-serif;
font-size: small;

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

@ -8,7 +8,7 @@ If your plugin does not need CSS, delete this file.
*/
:root {
--khoj-chat-primary: #ffb300;
--khoj-chat-primary: #fee285;
--khoj-chat-dark-grey: #475569;
}

2
src/khoj/interface/web/base_config.html
View file

@ -63,7 +63,7 @@
background: var(--background-color);
border: 1px solid rgb(229, 229, 229);
border-radius: 4px;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
}
#api-settings-card-description {
margin: 8px 0 0 0;