From 6c56a48060ce6a6a16fc6ba8412630ed7b0d4ee0 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: Invert brightness of SVG in dark mode

---
 frontend/src/App.css                     | 10 ++++++++++
 frontend/src/components/InstanceView.jsx |  2 +-
 frontend/src/components/Lightbox.jsx     |  3 ++-
 frontend/src/components/SVGDisplay.jsx   |  2 +-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index ae634d3..2876e3d 100644
--- 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
index 2114de7..64965de 100644
--- 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
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