fix: dark & light color

res/css/superhero/custom.css

@@ -331,3 +331,19 @@ h2 .sh_VerifiedIcon {
     -webkit-mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
     mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
 }
+
+.cpd-theme-dark svg.light_logo {
+    display: none !important;
+}
+
+.cpd-theme-dark svg.dark_logo {
+    display: block !important;
+}
+
+.cpd-theme-light svg.dark_logo {
+    display: none !important;
+}
+
+.cpd-theme-light svg.light_logo {
+    display: block !important;
+}

res/themes/superhero/img/logos/superhero-dark.svg

@@ -0,0 +1,23 @@
+<svg viewBox="0 0 112 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_29797_14012)">
+<rect width="112" height="32.2424" rx="5.93939" fill="url(#paint0_linear_29797_14012)" fill-opacity="0.5"/>
+<path d="M17.9901 6.28735L15.1008 6.78017L14.8653 8.45584C14.1632 8.64314 13.5444 8.96925 12.9383 9.43417C11.9153 10.2197 11.3149 11.2451 11.1371 12.5103C11.054 13.1011 11.0806 13.4617 11.1705 13.9205C11.2595 14.3863 11.4169 14.7651 11.6426 15.0571C11.8603 15.356 12.126 15.6132 12.4397 15.8287C12.7454 16.0512 13.0785 16.2284 13.439 16.3605C13.7915 16.4996 14.15 16.6212 14.5144 16.7255C14.698 16.779 14.8343 16.8317 14.9682 16.8834C15.0949 16.9324 15.2195 16.9806 15.3801 17.0279C15.7024 17.1321 15.9881 17.2469 16.2373 17.372C16.4794 17.4971 16.6636 17.6605 16.7897 17.8621C16.9158 18.0637 16.9593 18.3035 16.9202 18.5816C16.8489 19.089 16.6222 19.4783 16.2401 19.7494C15.85 20.0275 15.3532 20.1665 14.7494 20.1665C14.1457 20.1665 13.6939 20.0101 13.3939 19.6973C13.1111 19.4025 12.9972 18.9934 13.0521 18.4701L10.0959 18.9743C10.0676 20.0288 10.39 20.9024 11.0633 21.5951C11.5474 22.1025 12.1498 22.4542 12.8704 22.6504L12.5844 24.6858L15.4737 24.193L15.6815 22.714C16.5572 22.5426 17.3419 22.1905 18.0358 21.6576C19.0518 20.8721 19.6487 19.8467 19.8265 18.5816C19.9085 17.9976 19.9041 17.4797 19.8132 17.0279C19.7213 16.583 19.565 16.2215 19.3443 15.9434C19.1166 15.6654 18.8485 15.4255 18.5399 15.2239C18.2242 15.0223 17.8887 14.8625 17.5332 14.7443C17.1708 14.6261 16.8103 14.5184 16.452 14.421C16.0936 14.3237 15.7532 14.2229 15.4309 14.1186C14.9844 13.9772 14.3695 13.6397 14.1576 13.2265C14.0733 13.0622 14.0079 12.837 14.0539 12.5103C14.1252 12.0028 14.3519 11.6135 14.734 11.3424C15.116 11.0713 15.443 10.9357 16.0467 10.9357C16.6505 10.9357 17.1058 11.0921 17.4129 11.4049C17.6308 11.6322 17.7485 11.9273 17.7658 12.2903L20.6979 11.7902C20.6567 10.8839 20.339 10.1194 19.7449 9.49674C19.2041 8.94034 18.5205 8.57265 17.6941 8.39365L17.9901 6.28735Z" fill="white"/>
+<path d="M63.9597 9.12459L62.0262 22.8823H64.8271L65.75 16.3156C65.8301 15.7455 66.0811 15.2833 66.503 14.9287C66.9258 14.5672 67.4356 14.3865 68.0323 14.3865C68.6079 14.3865 69.0564 14.5672 69.3776 14.9287C69.6989 15.2902 69.8199 15.7525 69.7408 16.3156L68.8179 22.8823H71.6294L72.5523 16.3156C72.7369 15.0017 72.4772 13.9277 71.7731 13.0935C71.07 12.2524 70.0866 11.8318 68.8231 11.8318C67.8824 11.8318 67.0354 12.0647 66.2819 12.5304L66.8146 8.74016L63.9597 9.12459Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.3088 12.0403H32.5079L30.5665 25.8539L33.4215 25.4695L33.9049 22.0298C34.6352 22.6276 35.5303 22.9265 36.5903 22.9265C38.226 22.9265 39.6395 22.4086 40.8311 21.3728C42.0306 20.3301 42.7442 18.9989 42.9718 17.3792C43.2005 15.7525 42.8646 14.4213 41.9642 13.3855C41.0638 12.3497 39.7922 11.8318 38.1496 11.8318C37.0896 11.8318 36.1104 12.1307 35.2121 12.7286L35.3088 12.0403ZM37.7905 14.3865C38.64 14.3865 39.2793 14.6576 39.7085 15.1998C40.1448 15.7421 40.2989 16.4685 40.1709 17.3792C40.0429 18.2898 39.6846 19.0163 39.0959 19.5585C38.5143 20.1007 37.7988 20.3718 36.9494 20.3718C36.1 20.3718 35.4571 20.1007 35.0209 19.5585C34.5846 19.0163 34.4305 18.2898 34.5585 17.3792C34.6865 16.4685 35.0448 15.7421 35.6334 15.1998C36.2221 14.6576 36.9411 14.3865 37.7905 14.3865Z" fill="white"/>
+<path d="M21.8306 12.0403L20.9308 18.4428C20.7461 19.7566 21.0054 20.8341 21.7085 21.6752C22.4126 22.5094 23.3964 22.9265 24.66 22.9265C25.6147 22.9265 26.4675 22.6276 27.2184 22.0298L27.0986 22.8823H29.9101L31.4338 12.0403H28.6223L27.7225 18.4428C27.6424 19.0128 27.3909 19.4785 26.9681 19.84C26.5532 20.1946 26.0475 20.3718 25.4508 20.3718C24.8751 20.3718 24.4232 20.1911 24.0949 19.8296C23.7737 19.4681 23.6526 19.0058 23.7317 18.4428L24.6315 12.0403H21.8306Z" fill="white"/>
+<path d="M54.908 22.8823L56.4317 12.0403H59.2326L59.0608 13.2629L62.4066 12.5332L62.0728 14.9081L58.671 16.0366L57.7089 22.8823H54.908Z" fill="white"/>
+<path d="M84.56 22.8823L86.0838 12.0403H88.8847L88.7129 13.2629L92.0587 12.5332L91.7249 14.9081L88.3231 16.0366L87.361 22.8823H84.56Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.4104 22.9265C98.0531 22.9265 99.4702 22.4086 100.662 21.3728C101.86 20.3371 102.574 19.0058 102.802 17.3792C103.03 15.7594 102.69 14.4317 101.783 13.3959C100.876 12.3532 99.6053 11.8318 97.9697 11.8318C96.3341 11.8318 94.9165 12.3532 93.717 13.3959C92.5254 14.4317 91.8158 15.7594 91.5882 17.3792C91.3596 19.0058 91.6955 20.3371 92.5959 21.3728C93.4963 22.4086 94.7678 22.9265 96.4104 22.9265ZM96.7695 20.3718C95.9201 20.3718 95.2773 20.1007 94.841 19.5585C94.4118 19.0163 94.2612 18.2898 94.3891 17.3792C94.5171 16.4685 94.8719 15.7421 95.4536 15.1998C96.0422 14.6576 96.7613 14.3865 97.6107 14.3865C98.4601 14.3865 99.0994 14.6576 99.5286 15.1998C99.9649 15.7421 100.119 16.4685 99.991 17.3792C99.863 18.2898 99.5047 19.0163 98.9161 19.5585C98.3344 20.1007 97.6189 20.3718 96.7695 20.3718Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.5629 18.4427C54.6987 18.0257 54.7872 17.6711 54.8282 17.3792C55.0558 15.7594 54.716 14.4317 53.8085 13.3959C52.9021 12.3532 51.6311 11.8318 49.9954 11.8318C48.3598 11.8318 46.9422 12.3532 45.7427 13.3959C44.5511 14.4317 43.8415 15.7594 43.6139 17.3792C43.3853 19.0058 43.7212 20.3371 44.6216 21.3728C45.522 22.4086 46.7935 22.9265 48.4362 22.9265C49.2786 22.9265 50.0798 22.7944 50.84 22.5303C51.6002 22.2661 52.2731 21.8734 52.8589 21.352C53.2603 20.9989 53.5887 20.6043 53.8441 20.1682L50.9429 19.6484C50.4468 20.2002 49.726 20.4761 48.7805 20.4761C48.1066 20.4761 47.5594 20.2988 47.1389 19.9443C46.7264 19.5828 46.4773 19.0823 46.3917 18.4427H54.5629ZM49.651 14.2822C50.2828 14.2822 50.8044 14.4421 51.2158 14.7619C51.6271 15.0817 51.891 15.5266 52.0075 16.0966H46.7846C47.0613 15.5266 47.4503 15.0817 47.9515 14.7619C48.4527 14.4421 49.0192 14.2822 49.651 14.2822Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.4723 17.3792C84.4312 17.6711 84.3428 18.0257 84.2069 18.4428H76.0358C76.1214 19.0823 76.3705 19.5828 76.783 19.9443C77.2035 20.2988 77.7507 20.4761 78.4246 20.4761C79.3701 20.4761 80.091 20.2002 80.5871 19.6483L83.4882 20.1681C83.2329 20.6042 82.9044 20.9988 82.5029 21.352C81.9172 21.8734 81.2442 22.2661 80.4841 22.5303C79.7239 22.7945 78.9226 22.9265 78.0802 22.9265C76.4375 22.9265 75.166 22.4086 74.2656 21.3729C73.3652 20.3371 73.0293 19.0058 73.258 17.3792C73.4856 15.7595 74.1952 14.4317 75.3867 13.3959C76.5863 12.3532 78.0038 11.8318 79.6395 11.8318C81.2751 11.8318 82.5461 12.3532 83.4526 13.3959C84.36 14.4317 84.6999 15.7595 84.4723 17.3792ZM80.8598 14.7619C80.4484 14.4421 79.9269 14.2822 79.2951 14.2822C78.6633 14.2822 78.0968 14.4421 77.5955 14.7619C77.0943 15.0817 76.7054 15.5266 76.4287 16.0966H81.6515C81.5351 15.5266 81.2712 15.0817 80.8598 14.7619Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_29797_14012" x1="0" y1="0" x2="32.3435" y2="60.3547" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E50F4"/>
+<stop offset="1" stop-color="#AB4EE3"/>
+</linearGradient>
+<clipPath id="clip0_29797_14012">
+<rect width="112" height="32.2424" rx="5.93939" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/structures/LeftPanel.tsx

@@ -45,7 +45,8 @@ import PageType from "matrix-react-sdk/src/PageTypes";
 import { UserOnboardingButton } from "matrix-react-sdk/src/components/views/user-onboarding/UserOnboardingButton";
 
 import RoomList from "../views/rooms/RoomList";
-import { Icon as Superhero } from "../../../res/themes/superhero/img/logos/superhero.svg";
+import { Icon as SuperheroDark } from "../../../res/themes/superhero/img/logos/superhero-dark.svg";
+import { Icon as SuperheroLight } from "../../../res/themes/superhero/img/logos/superhero-light.svg";
 
 interface IProps {
     isMinimized: boolean;
@@ -370,6 +371,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public render(): React.ReactNode {
+        console.log("render changedd");
         const roomList = (
             <RoomList
                 onKeyDown={this.onKeyDown}
@@ -401,7 +403,16 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                             marginLeft: "10px",
                         }}
                     >
-                        <Superhero
+                        <SuperheroLight
+                            className="light_logo"
+                            style={{
+                                width: "112px",
+                                height: "32px",
+                                display: "block",
+                            }}
+                        />
+                        <SuperheroDark
+                            className="dark_logo"
                             style={{
                                 width: "112px",
                                 height: "32px",