feat: Invert brightness of SVG in dark mode

DSD-DBS · Sep 30, 2024 · 6c56a48 · 6c56a48
1 parent ad9ea6a
commit 6c56a48
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -44,3 +44,13 @@
 .read-the-docs {
   color: #888;
 }
+
+html.dark .svg-display {
+  filter: invert() invert(19%) sepia(9%) saturate(1857%) hue-rotate(180deg)
+    brightness(99%) contrast(87%);
+}
+
+html.dark .header-button *,
+html.dark .icon * {
+  filter: invert() hue-rotate(180deg);
+}
diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx
@@ -83,7 +83,7 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
           <div className="fixed hidden md:-ml-14 md:-mt-6 md:block">
             <div
               onClick={() => window.print()}
-              className="flex cursor-pointer items-center justify-center
+              className="icon 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

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