feature: add full dark mode compatibility to demo page

devflowinc · Dec 20, 2024 · 24245a4 · 24245a4
1 parent 4b9b725
commit 24245a4
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 34 deletions.
diff --git a/clients/search-component/package.json b/clients/search-component/package.json
@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.40",
+  "version": "0.2.41",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

diff --git a/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx b/clients/search-component/src/TrieveModal/Chat/AIInitalMessage.tsx
@@ -51,7 +51,7 @@ export const AIInitialMessage = () => {
               .split(" ")
               .slice(0, 3)
               .join(" ")}
-          </span>
+          </span>{" "}
           {(currentGroup?.name || props.brandName || "Trieve")
             .replace(/<[^>]*>/g, "")
             .split(" ")

diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx
@@ -58,7 +58,6 @@ export const ChatMessage = ({
             )}
             <p
               className="tag"
-              // style mostly transparent brand color
               style={{
                 backgroundColor: props.brandColor
                   ? `${props.brandColor}18`

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -350,6 +350,14 @@ body {
           padding: 1rem;
           scroll-snap-align: start;
           box-sizing: border-box;
+
+          a {
+            @apply rounded px-2 text-xs py-1 bg-zinc-200/50;
+
+            &:hover {
+              background-color: var(--tv-zinc-200);
+            }
+          }
         }
 
         .carousel-item-hidden {
@@ -751,7 +759,7 @@ body {
     }
 
     .item {
-      @apply select-none cursor-pointer py-2 text-left flex items-start gap-2 w-full text-sm outline-none rounded-lg px-5 overflow-ellipsis;
+      @apply select-none cursor-pointer py-2 text-left flex items-start gap-2 w-full h-full text-sm outline-none rounded-lg px-5 overflow-ellipsis;
 
       background-color: var(--tv-zinc-50);
 
@@ -1004,11 +1012,24 @@ body {
           @apply flex flex-wrap gap-2 mt-4;
 
           a {
-            color: var(--tv-zinc-300);
+            color: var(--tv-zinc-200);
             background-color: var(--tv-zinc-700);
 
             &:hover {
               color: var(--tv-zinc-50);
+              background-color: var(--tv-zinc-800);
+            }
+          }
+        }
+
+        .carousel-item {
+          a {
+            color: var(--tv-zinc-200);
+            background-color: var(--tv-zinc-700);
+
+            &:hover {
+              color: var(--tv-zinc-50);
+              background-color: var(--tv-zinc-800);
             }
           }
         }

diff --git a/server/src/public/navbar.html b/server/src/public/navbar.html
@@ -1,4 +1,4 @@
-<nav class="bg-white border-b">
+<nav class="border-b">
   <div
     class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-2 sm:gap-4 sm:justify-between sm:!flex-row md:gap-4 lg:gap-6"
   >
@@ -39,7 +39,7 @@
       class="flex flex-wrap items-center gap-4 justify-center sm:justify-right -mt-2 sm:mt-0"
     >
       <a
-        class="flex items-center gap-1 text-black"
+        class="flex items-center gap-1"
         target="_blank"
         href="mailto:[email protected]"
       >

diff --git a/server/src/public/page.html b/server/src/public/page.html
@@ -80,6 +80,8 @@
         --brand-color: #a33eb5;
         --brand-color: {{params.brandColor}};
         --hero-bg-color: {{params.heroPattern.backgroundColor}};
+        --hero-fg-color: {{params.heroPattern.foregroundColor}};
+        --theme-text-color: {{'white' if (params.theme == 'dark') else 'black'}};
       }
 
       *,
@@ -96,6 +98,8 @@
 
       nav {
         border-color: var(--brand-color);
+        background-color: var(--hero-bg-color);
+        color: var(--theme-text-color);
 
         a:hover {
           color: var(--brand-color);
@@ -223,11 +227,13 @@
         border: 1px solid var(--brand-color);
         border-radius: 0rem 0.25rem 0.25rem 0.25rem;
         padding: 0.9rem;
-        background-color: white;
+        background-color: var(--hero-bg-color);
+        color: var(--theme-text-color);
       }
 
       pre {
         padding: 0rem;
+        border-radius: 0.25rem;
       }
 
       #tab-buttons {
@@ -238,11 +244,11 @@
       }
 
       .tab-button {
-        background-color: #ffffff;
+        background-color: var(--hero-bg-color);
         border-radius: 0.25rem 0.25rem 0rem 0rem;
         border: 1px solid var(--brand-color);
         border-bottom-color: transparent;
-        color: black;
+        color: var(--theme-text-color);
         padding: 0.4rem;
         padding-top: 0.5rem;
         font-size: 0.9rem;
@@ -281,10 +287,14 @@
         color: var(--brand-color);
 
         &:hover {
-          background-color: #F3F4F6;
+          background-color: transparent;
         }
       }
 
+      button.text-brand-color:hover {
+        background-color: color-mix(in srgb, white, black 20%);
+      }
+
       .bg-brand-color {
         background-color: var(--brand-color);
 

diff --git a/server/src/public/product.html b/server/src/public/product.html
@@ -1,7 +1,7 @@
 <div class="max-w-full">
   <div
     id="product-display"
-    class="mx-auto py-4 px-4 mt-40 sm:px-6 sm:mt-30 lg:max-w-7xl lg:px-8"
+    class="mx-auto py-6 px-4 mt-40 sm:px-6 sm:mt-30 lg:max-w-7xl lg:px-8"
   >
     <section class="lg:flex gap-2 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
       <div class="lg:w-1/2">
@@ -13,7 +13,9 @@
       </div>
 
       <div class="mx-auto mt-4 lg:mt-0 lg:w-1/2">
-        <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
+        <h1
+          class="text-brand-color text-2xl font-bold tracking-tight sm:text-3xl"
+        >
           {{ params.singleProductOptions.productName }}
         </h1>
 
@@ -31,7 +33,7 @@ <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
         </div>
 
         <div class="mt-4 border-t border-gray-200">
-          <h3 class="text-sm font-medium text-gray-900 mt-4">
+          <h3 class="text-brand-color text-sm font-medium mt-4">
             <span class="text-brand-color"
               ><i class="fa-solid fa-wand-magic-sparkles"></i
             ></span>
@@ -64,7 +66,7 @@ <h3 class="text-sm font-medium text-gray-900 mt-4">
       <div class="recs-section">
         <h2
           id="related-heading"
-          class="text-xl font-bold text-gray-900 mt-8 w-fit"
+          class="text-brand-color text-xl font-bold mt-8 w-fit"
         >
           Related products
         </h2>
@@ -172,7 +174,7 @@ <h4 class="text-sm text-gray-500 mt-2 w-fit">
         />
       </div>
       <div class="mt-4">
-        <h3 class="rec-title line-clamp-1 text-sm font-medium text-gray-900">${title}</h3>
+        <h3 class="text-brand-color line-clamp-1 text-sm font-medium">${title}</h3>
         <h6 class="rec-price mt-1 text-sm text-gray-700">${price}</h6>
         <p class="rec-description line-clamp-1 mt-1 text-sm text-gray-500">${description}</p>
       </div>

diff --git a/server/static/output.css b/server/static/output.css
@@ -800,11 +800,6 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -849,9 +844,9 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
 .pl-0\.5 {
@@ -898,11 +893,6 @@ video {
   letter-spacing: -0.025em;
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -913,11 +903,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));