klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 13:18:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update web client theme to a lighter

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-02 15:55:25 -07:00
parent fe860aaf83
commit 7b7f6d3bc8
4 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/khoj/interface/web/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

32
src/khoj/interface/web/assets/khoj.css
View File

@@ -2,35 +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: #fff;
--background-color: #f5f4f3;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #ffaeae;
}
/* 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: #fff;
--background-color: #f5f4f3;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #ffaeae;
}
}
/* 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: #fff;
--background-color: #f5f4f3;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #ffaeae;
}
/* Amber (Common styles) */
:root {
@@ -71,7 +80,7 @@ a.khoj-logo {
}
.khoj-nav a {
color: #333;
color: var(--main-text-color);
text-decoration: none;
font-size: 20px;
font-weight: normal;
@@ -151,7 +160,6 @@ p#khoj-banner {
border: 2px solid var(--primary-inverse);
width: 40px;
height: 40px;
vertical-align: text-top;
padding: 3px;
cursor: pointer;
}
@@ -159,7 +167,7 @@ p#khoj-banner {
background-color: var(--primary-hover);
}
.user-initial {
background-color: white;
background-color: var(--background-color);
color: black;
display: grid;
justify-content: center;

11
src/khoj/interface/web/base_config.html
View File

@@ -60,7 +60,7 @@
justify-items: start;
gap: 8px;
padding: 24px 24px;
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);
@@ -95,10 +95,10 @@
padding: 24px 16px;
width: 320px;
height: 180px;
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);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
overflow: hidden;
}
div.finalize-buttons {
@@ -106,7 +106,6 @@
gap: 8px;
padding: 24px 16px;
width: 320px;
background: white;
border-radius: 4px;
overflow: hidden;
}
@@ -174,7 +173,7 @@
}
button.card-button {
color: rgb(255, 136, 136);
color: var(--flower);
background: transparent;
font-size: 16px;
cursor: pointer;
@@ -186,7 +185,7 @@
}
button.card-button.happy {
color: rgb(0, 146, 0);
color: var(--leaf);
}
img.configured-icon {

6
src/khoj/interface/web/login.html
View File

@@ -83,8 +83,8 @@
body {
padding: 0px;
margin: 0px;
background: #fff;
color: #475569;
background: var(--background-color);
color: var(--main-text-color);
font-family: roboto, karma, segoe ui, sans-serif;
font-size: 20px;
font-weight: 300;
@@ -131,10 +131,10 @@
gap: 10px;
padding: 10px;
margin: 10px;
background: #fff;
border-radius: 5px;
border: 1px solid #475569;
box-shadow: 0 0 11px #aaa;
background: var(--background-color);
margin-left: 25%;
margin-right: 25%;
}