From c631b61a811e9eab8d11a7278d029b4629d7e748 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Wed, 1 Nov 2023 02:03:58 -0700
Subject: [PATCH] Put colors shared by index, chat html into khoj css global
 variables

---
 src/khoj/interface/web/assets/khoj.css |  6 ++++++
 src/khoj/interface/web/chat.html       | 16 ++++++++--------
 src/khoj/interface/web/index.html      | 12 ++++++------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index 616c0543..88a0a59d 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -6,6 +6,8 @@
     --primary-hover: #ffa000;
     --primary-focus: rgba(255, 179, 0, 0.125);
     --primary-inverse: rgba(0, 0, 0, 0.75);
+    --background-color: #fff;
+    --main-text-color: #475569;
 }
 
 /* Amber Dark scheme (Auto) */
@@ -16,6 +18,8 @@
         --primary-hover: #ffc107;
         --primary-focus: rgba(255, 179, 0, 0.25);
         --primary-inverse: rgba(0, 0, 0, 0.75);
+        --background-color: #fff;
+        --main-text-color: #475569;
     }
 }
 /* Amber Dark scheme (Forced) */
@@ -25,6 +29,8 @@
     --primary-hover: #ffc107;
     --primary-focus: rgba(255, 179, 0, 0.25);
     --primary-inverse: rgba(0, 0, 0, 0.75);
+    --background-color: #fff;
+    --main-text-color: #475569;
 }
 /* Amber (Common styles) */
 :root {
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index d9cd80d4..a222569c 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -317,8 +317,8 @@
         }
         body {
             display: grid;
-            background: #fff;
-            color: #475569;
+            background: var(--background-color);
+            color: var(--main-text-color);
             text-align: center;
             font-family: roboto, karma, segoe ui, sans-serif;
             font-size: 20px;
@@ -340,7 +340,7 @@
             content: attr(data-meta);
             display: block;
             font-size: x-small;
-            color: #475569;
+            color: var(--main-text-color);
             margin: -8px 4px 0 -5px;
         }
         /* move message by khoj to left */
@@ -410,7 +410,7 @@
             top: 91%;
             right: -2px;
             border: 10px solid transparent;
-            border-left-color: #475569;
+            border-left-color: var(--main-text-color);
             border-right: 0;
             margin-top: -10px;
             transform: rotate(-60deg)
@@ -426,7 +426,7 @@
         #chat-footer > * {
             padding: 15px;
             border-radius: 5px;
-            border: 1px solid #475569;
+            border: 1px solid var(--main-text-color);
             background: #f9fafc
         }
         .option:hover {
@@ -459,9 +459,9 @@
         }
 
         a.inline-chat-link {
-            color: #475569;
+            color: var(--main-text-color);
             text-decoration: none;
-            border-bottom: 1px dotted #475569;
+            border-bottom: 1px dotted var(--main-text-color);
         }
 
         @media (pointer: coarse), (hover: none) {
@@ -550,7 +550,7 @@
         input#khoj-banner-email {
             padding: 10px;
             border-radius: 5px;
-            border: 1px solid #475569;
+            border: 1px solid var(--main-text-color);
             background: #f9fafc;
         }
 
diff --git a/src/khoj/interface/web/index.html b/src/khoj/interface/web/index.html
index d9f64afe..a3ed548f 100644
--- a/src/khoj/interface/web/index.html
+++ b/src/khoj/interface/web/index.html
@@ -348,8 +348,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;
@@ -367,7 +367,7 @@
         #options > * {
             padding: 15px;
             border-radius: 5px;
-            border: 1px solid #475569;
+            border: 1px solid var(--main-text-color);
             background: #f9fafc
         }
         .option:hover {
@@ -395,7 +395,7 @@
         .image {
             width: 20vw;
             border-radius: 10px;
-            border: 1px solid #475569;
+            border: 1px solid var(--main-text-color);
         }
         #json {
             white-space: pre-wrap;
@@ -438,7 +438,7 @@
             padding: 3.5px 3.5px 0;
             margin-right: 5px;
             border-radius: 5px;
-            border: 1px solid #475569;
+            border: 1px solid var(--main-text-color);
             background-color: #ef4444;
             font-size: small;
         }
@@ -509,7 +509,7 @@
         input#khoj-banner-email {
             padding: 10px;
             border-radius: 5px;
-            border: 1px solid #475569;
+            border: 1px solid var(--main-text-color);
             background: #f9fafc;
         }