From ff31801c0f06c0c5e92038f9acbd4c350eb0b919 Mon Sep 17 00:00:00 2001
From: huyenngn <ngan-huyen.thi-nguyen@deutschebahn.com>
Date: Mon, 16 Sep 2024 14:50:39 +0200
Subject: [PATCH] feat: Improve dark mode

---
 frontend/src/App.css                      |  4 ++++
 frontend/src/components/HomeIcon.jsx      |  2 +-
 frontend/src/components/InstanceView.jsx  |  4 +---
 frontend/src/components/Lightbox.jsx      |  3 ++-
 frontend/src/components/SVGDisplay.jsx    |  2 +-
 frontend/src/components/SettingsMenu.jsx  |  2 +-
 frontend/src/components/ThemeSwitcher.jsx |  6 +++---
 frontend/src/index.css                    | 12 ++----------
 frontend/src/views/HomeView.jsx           |  2 +-
 frontend/tailwind.config.js               | 10 +++++-----
 10 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index ae634d3..2f91669 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -44,3 +44,7 @@
 .read-the-docs {
   color: #888;
 }
+
+html.dark .svg-display {
+  filter: hue-rotate(180deg) invert(80%) saturate(200%);
+}
diff --git a/frontend/src/components/HomeIcon.jsx b/frontend/src/components/HomeIcon.jsx
index 4f1ae5a..7dd7da3 100644
--- a/frontend/src/components/HomeIcon.jsx
+++ b/frontend/src/components/HomeIcon.jsx
@@ -8,7 +8,7 @@ export const HomeIcon = () => {
   return (
     <Link to="/">
       <div className="header-button">
-        <Home className="h-6 w-6 text-black dark:text-white" />
+        <Home className="h-6 w-6 text-white" />
       </div>
     </Link>
   );
diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx
index 2114de7..d8e3c3f 100644
--- a/frontend/src/components/InstanceView.jsx
+++ b/frontend/src/components/InstanceView.jsx
@@ -85,9 +85,7 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
               onClick={() => window.print()}
               className="flex cursor-pointer items-center justify-center
                 rounded-full bg-custom-blue p-2 text-white transition-colors
-                duration-700 ease-in-out hover:bg-custom-dark-4
-                dark:bg-custom-blue dark:text-gray-100
-                dark:hover:bg-custom-light">
+                duration-700 ease-in-out hover:bg-custom-blue-hover">
               <Printer></Printer>
             </div>
           </div>
diff --git a/frontend/src/components/Lightbox.jsx b/frontend/src/components/Lightbox.jsx
index dce6dfb..e82cf8e 100644
--- a/frontend/src/components/Lightbox.jsx
+++ b/frontend/src/components/Lightbox.jsx
@@ -68,7 +68,8 @@ export const Lightbox = ({ onClose, imageSource }) => {
             <XIcon />
           </LightboxButton>
         </div>
-        <div className="mt-2 flex h-full w-full overflow-visible pt-16">
+        <div
+          className="svg-display mt-2 flex h-full w-full overflow-visible pt-16">
           {imageSource && (
             <TransformWrapper wheel={{ smoothStep: 0.005 }}>
               <TransformComponent>
diff --git a/frontend/src/components/SVGDisplay.jsx b/frontend/src/components/SVGDisplay.jsx
index 57eb13f..b10a431 100644
--- a/frontend/src/components/SVGDisplay.jsx
+++ b/frontend/src/components/SVGDisplay.jsx
@@ -24,7 +24,7 @@ export const SVGDisplay = ({ content }) => {
   return (
     <>
       <div
-        className="group relative"
+        className="svg-display group relative"
         style={{ maxWidth: '100%', height: 'auto' }}
         onClick={handleSvgClick}>
         <div
diff --git a/frontend/src/components/SettingsMenu.jsx b/frontend/src/components/SettingsMenu.jsx
index da706e2..415b90c 100644
--- a/frontend/src/components/SettingsMenu.jsx
+++ b/frontend/src/components/SettingsMenu.jsx
@@ -29,7 +29,7 @@ export const SettingsMenu = () => {
   return (
     <div className="relative" ref={menuRef}>
       <div onClick={toggleMenu} className="header-button">
-        <Settings className="h-6 w-6 text-black dark:text-white" />
+        <Settings className="h-6 w-6 text-white" />
       </div>
       {isOpen && (
         <div
diff --git a/frontend/src/components/ThemeSwitcher.jsx b/frontend/src/components/ThemeSwitcher.jsx
index 5f80308..b225e6e 100644
--- a/frontend/src/components/ThemeSwitcher.jsx
+++ b/frontend/src/components/ThemeSwitcher.jsx
@@ -32,12 +32,12 @@ export const ThemeSwitcher = () => {
     <div onClick={toggleTheme} className="header-button">
       {theme === 'dark' ? (
         <Sun
-          className="transform text-orange-500 transition-transform
-            duration-500 ease-in-out"
+          className="transform text-white transition-transform duration-500
+            ease-in-out"
         />
       ) : (
         <Moon
-          className="transform text-black transition-transform duration-500
+          className="transform text-white transition-transform duration-500
             ease-in-out"
         />
       )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8c3f54a..1edd6a9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -241,21 +241,13 @@ input:checked + .slider:before {
   justify-content: center;
   border-radius: 9999px;
   border: 2px solid transparent;
-  background-color: var(--custom-light);
+  background-color: var(--custom-blue);
   padding: 0.5rem;
   transition: all 0.5s ease-in-out;
 }
 
 .header-button:hover {
-  background-color: var(--custom-dark-4);
-}
-
-.dark .header-button {
-  background-color: var(--custom-dark-1);
-}
-
-.dark .header-button:hover {
-  background-color: var(--custom-light);
+  background-color: var(--custom-blue-hover);
 }
 
 .deleted,
diff --git a/frontend/src/views/HomeView.jsx b/frontend/src/views/HomeView.jsx
index fab4ecf..7bee649 100644
--- a/frontend/src/views/HomeView.jsx
+++ b/frontend/src/views/HomeView.jsx
@@ -122,7 +122,7 @@ export const HomeView = () => {
                 </div>
               )}
               <div
-                className="hidden md:block"
+                className="svg-display hidden md:block"
                 dangerouslySetInnerHTML={{ __html: modelInfo.badge }}></div>
             </div>
           </>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6c713e7..7a4ea2b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -25,13 +25,13 @@ export default {
       },
       colors: {
         'custom-light': '#dee4e7',
-        'custom-dark-1': '#24273a',
-        'custom-dark-2': '#363a4f',
-        'custom-dark-3': '#6e738d',
-        'custom-dark-4': '#5b6078',
+        'custom-dark-1': '#121212',
+        'custom-dark-2': '#282828',
+        'custom-dark-3': '#3f3f3f',
+        'custom-dark-4': '#575757',
         'custom-dark-error': '#ed8796',
         'custom-blue': '#2196f3',
-        'custom-blue-hover': '#1976d2'
+        'custom-blue-hover': '#0b5ea1'
       }
     }
   },