Update web client theme to a lighter

- 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

src/khoj/interface/web/assets/khoj.css

@@ -2,35 +2,44 @@
 /* Can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-    --primary: #ffb300;
+    --primary: #fee285;
-    --primary-hover: #ffa000;
+    --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: #fee285;
-        --primary-hover: #ffc107;
+        --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: #fee285;
-    --primary-hover: #ffc107;
+    --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;

src/khoj/interface/web/base_config.html

@@ -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 {

src/khoj/interface/web/login.html

@@ -83,8 +83,8 @@
         body {
             padding: 0px;
             margin: 0px;
-            background: #fff;
+            background: var(--background-color);
-            color: #475569;
+            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%;
         }