support dark mode init

daostack · Nov 5, 2023 · 3aba425 · 3aba425
1 parent b6e3bdf
commit 3aba425
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 7 deletions.
diff --git a/src/shared/icons/theme.icon.tsx b/src/shared/icons/theme.icon.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from "react";
+
+interface ThemeIconProps {
+  className?: string;
+}
+
+const ThemeIcon: FC<ThemeIconProps> = ({ className }) => {
+  const color = "currentColor";
+
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke={color}
+        d="M10.8041 1.94321C12.9155 1.64079 15.0629 2.02536 16.9285 3.04001C16.9799 3.07003 17.0223 3.11325 17.0514 3.16524C17.073 3.20034 17.0873 3.23947 17.0936 3.28032C17.0998 3.32117 17.0979 3.36291 17.0878 3.40311C17.0777 3.44331 17.0597 3.48114 17.0348 3.51441C17.01 3.54767 16.9788 3.57569 16.943 3.59682C16.6435 3.78168 16.3535 3.98175 16.0742 4.19625C15.79 4.4166 15.5189 4.65357 15.2626 4.90588C13.4982 6.6312 12.485 8.98055 12.4453 11.4385C12.4055 13.8965 13.3424 16.2624 15.0505 18.017C15.3663 18.341 15.7064 18.6405 16.0678 18.9128C16.4258 19.1821 16.8019 19.4265 17.1935 19.6444C17.2443 19.669 17.2872 19.7071 17.3177 19.7545C17.3483 19.8019 17.3652 19.8569 17.3667 19.9134C17.3682 19.97 17.3542 20.026 17.3263 20.0754C17.2983 20.1248 17.2575 20.1658 17.2082 20.1938C15.9462 20.9618 14.5311 21.4404 13.0658 21.5948C11.6004 21.7493 10.1216 21.5758 8.73669 21.0869C7.35175 20.5981 6.09546 19.8061 5.05907 18.7685C4.02268 17.7309 3.23221 16.4738 2.74504 15.0885C2.25786 13.7031 2.08622 12.2242 2.24258 10.7593C2.39895 9.29437 2.87937 7.88014 3.64901 6.61928C4.41864 5.35843 5.45814 4.28261 6.69202 3.46996C7.9259 2.65731 9.32319 2.12821 10.7824 1.92111L10.8041 1.94321Z"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ThemeIcon;
diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss
@@ -66,7 +66,7 @@
   padding-left: var(--main-pl);
   display: flex;
   flex-direction: column;
-  background-color: var(--page-bg-color);
+  background-color: var(--primary-background);
   box-sizing: border-box;
 }
 

diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss
@@ -12,7 +12,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: $c-light-gray-2;
+  background-color: var(--secondary-background);
   box-sizing: border-box;
 }
 

diff --git a/...avLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx b/...avLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx
@@ -10,6 +10,8 @@ import {
   LogoutIcon,
   SettingsIcon,
 } from "@/shared/icons";
+import ThemeIcon from "@/shared/icons/theme.icon";
+import { Theme } from "@/shared/ui-kit/Theme";
 import { MenuItem } from "./components";
 import { Item, ItemType } from "./types";
 import styles from "./MenuItems.module.scss";
@@ -52,6 +54,13 @@ const MenuItems: FC<MenuItemsProps> = (props) => {
       icon: <BillingIcon />,
       to: getBillingPagePath(),
     },
+    {
+      key: "theme",
+      type: ItemType.Button,
+      text: <Theme />,
+      icon: <ThemeIcon />,
+      onClick: () => {},
+    },
     {
       key: "log-out",
       type: ItemType.Button,

diff --git a/src/shared/ui-kit/Sidenav/Sidenav.module.scss b/src/shared/ui-kit/Sidenav/Sidenav.module.scss
@@ -42,7 +42,7 @@
   padding-bottom: var(--sb-content-pb);
   display: flex;
   flex-direction: column;
-  background-color: var(--sb-bg-color);
+  background-color: var(--primary-background);
   box-shadow: var(--sb-shadow);
   overflow: hidden;
   box-sizing: border-box;

diff --git a/src/shared/ui-kit/Theme/Theme.tsx b/src/shared/ui-kit/Theme/Theme.tsx
@@ -12,10 +12,7 @@ const Theme = () => {
     dispatch(changeTheme(theme === Themes.Dark ? Themes.Light : Themes.Dark));
   };
 
-  /**
-   * Need design. For now 'Light' theme is the default.
-   */
-  return <div onClick={handleChange}>Toggle Theme</div>;
+  return <div onClick={handleChange}>Light/Dark mode</div>;
 };
 
 export default Theme;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
@@ -1,4 +1,6 @@
 :root[data-theme="light"] {
+  --primary-background: #ffffff;
+  --secondary-background: #f8f8f5;
   --primary-fill: #c32ea3;
   --secondary-fill: #a75a93;
   --gentle-fill: #f3d4eb;
@@ -13,4 +15,6 @@
 }
 
 :root[data-theme="dark"] {
+  --primary-background: #1f2535;
+  --secondary-background: #2e3452;
 }