merge: Improve dark mode (#33)

DSD-DBS · Oct 1, 2024 · c04aa19 · c04aa19
2 parents 1cc496d + ff31801
commit c04aa19
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
       }
     }
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
               </>
@@ Expand Down @@