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

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" */ /* Can be forced with data-theme="light" */
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--primary: #ffb300; --primary: #fee285;
--primary-hover: #ffa000; --primary-hover: #fcc50b;
--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;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #d1684e;
} }
/* Amber Dark scheme (Auto) */ /* Amber Dark scheme (Auto) */
/* 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: #ffb300; --primary: #fee285;
--primary-hover: #ffc107; --primary-hover: #fcc50b;
--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;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #d1684e;
} }
} }
/* 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: #ffb300; --primary: #fee285;
--primary-hover: #ffc107; --primary-hover: #fcc50b;
--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;
--main-text-color: #475569;
--water: #44b9da;
--leaf: #7b990a;
--flower: #d1684e;
} }
/* Amber (Common styles) */ /* Amber (Common styles) */
:root { :root {
@ -66,7 +81,7 @@ a.khoj-logo {
} }
.khoj-nav a { .khoj-nav a {
color: #333; color: var(--main-text-color);
text-decoration: none; text-decoration: none;
font-size: small; font-size: small;
font-weight: normal; font-weight: normal;

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

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

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

@ -302,7 +302,7 @@
body { body {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
background: #fff; background: var(--background-color);
color: #475569; color: #475569;
font-family: roboto, karma, segoe ui, sans-serif; font-family: roboto, karma, segoe ui, sans-serif;
font-size: small; 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 { :root {
--khoj-chat-primary: #ffb300; --khoj-chat-primary: #fee285;
--khoj-chat-dark-grey: #475569; --khoj-chat-dark-grey: #475569;
} }

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

@ -63,7 +63,7 @@
background: var(--background-color); background: var(--background-color);
border: 1px solid rgb(229, 229, 229); border: 1px solid rgb(229, 229, 229);
border-radius: 4px; 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 { #api-settings-card-description {
margin: 8px 0 0 0; margin: 8px 0 0 0;