diff --git a/src/interface/desktop/assets/icons/khoj-logo-sideways-500.png b/src/interface/desktop/assets/icons/khoj-logo-sideways-500.png
index 56648932..765d6e33 100644
Binary files a/src/interface/desktop/assets/icons/khoj-logo-sideways-500.png and b/src/interface/desktop/assets/icons/khoj-logo-sideways-500.png differ
diff --git a/src/interface/desktop/assets/khoj.css b/src/interface/desktop/assets/khoj.css
index 0c36f2b0..68acd15e 100644
--- a/src/interface/desktop/assets/khoj.css
+++ b/src/interface/desktop/assets/khoj.css
@@ -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;
diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index f2b2357f..72a7a515 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -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;
diff --git a/src/interface/desktop/config.html b/src/interface/desktop/config.html
index 2c9ae6c0..af6171bf 100644
--- a/src/interface/desktop/config.html
+++ b/src/interface/desktop/config.html
@@ -8,8 +8,6 @@
-
-
@@ -38,11 +36,11 @@
- Access Key
+ API Key
-
+
@@ -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;
diff --git a/src/interface/desktop/search.html b/src/interface/desktop/search.html
index 9ad0ea87..dbb18f5f 100644
--- a/src/interface/desktop/search.html
+++ b/src/interface/desktop/search.html
@@ -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;
diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css
index 3e3808f7..d322804d 100644
--- a/src/interface/obsidian/styles.css
+++ b/src/interface/obsidian/styles.css
@@ -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;
}
diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index cba8c20c..5b98ecc2 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -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;