[FEAT]: add darkmmode to all pages and refactor components to get darkmode from context

Author: JinSSJ3

src/components/RightMenu/RightMenu.scss

@@ -4,9 +4,17 @@
   padding-left: 5px;
   width: 100%;
   //word-break: break-all;
+
+  border-left: unset;
+  color: #6f7e8c;
+
   &.selected,
   &:hover {
-    border-left: 2px #b2bac2 solid;
-    color: #6f7e8c;
+    border-left-width: 2px;
+    border-left-style: solid;
+    color: rgb(0, 114, 229);
+    &.darkmode {
+      color: rgb(102, 178, 255);
+    }
   }
 }

src/components/RightMenu/RightMenu.tsx

@@ -3,19 +3,26 @@ import ListSubheader from "@mui/material/ListSubheader/ListSubheader";
 import * as React from "react";
 import { RightMenuProps } from "./RightMenuProps";
 import "./RightMenu.scss";
+import { UserContext } from "../../globals/contexts/UserContext";
 const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
   const { items, width, selectedItemProp: selectedItem = 0 } = props;
+  const [usuario, dispatch] = React.useContext(UserContext);
+  const darkMode = usuario.darkMode;
 
   const handleClickAnchor = (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
     onClick: Function | undefined,
     id: number
   ) => {
     onClick?.();
-
   };
 
   const finalSelectedId = selectedItem;
+
+  const darkmodeClassName = darkMode
+    ? "right-menu-anchor-item darkmode"
+    : "right-menu-anchor-item";
+  //const darkmodeClassName = darkMode?"":"";
   return (
     <List
       // className="section-container"
@@ -33,8 +40,8 @@ const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
           items.map(({ isSelected, label, onClick, referTo, id }, index) => {
             const classNameForAnchor: string =
               finalSelectedId === id
-                ? "right-menu-anchor-item selected"
-                : "right-menu-anchor-item";
+                ? `${darkmodeClassName} selected`
+                : darkmodeClassName;
             return (
               <li key={index} style={{ listStyle: "none", margin: 0 }}>
                 <a

src/components/codeHighlight/CodeHighlight.scss

@@ -5,7 +5,7 @@
   font-size: 0.9125rem;
   padding: 0px 5px;
   line-height: 1.6;
-  &.dark-mode{
+  &.darkmode {
     color: #fff;
     background-color: rgba(102, 178, 255, 0.15);
   }

src/components/codeHighlight/CodeHighlight.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
 import "./CodeHighlight.scss";
 
 interface CodeHighlightProps {
@@ -8,11 +9,13 @@ interface CodeHighlightProps {
 const CodeHighlight: React.FC<CodeHighlightProps> = (
   props: CodeHighlightProps
 ) => {
-  const { children, darkMode } = props;
-  return (
-    <code className={darkMode ? "code-highlight dark-mode" : "code-highlight"}>
-      {children}
-    </code>
-  );
+  const { children } = props;
+  const [usuario, dispatch] = React.useContext(UserContext);
+  const darkMode = usuario.darkMode;
+  const finaldarkmodeclassName = !darkMode
+    ? "code-highlight"
+    : "code-highlight darkmode";
+
+  return <code className={finaldarkmodeclassName}>{children}</code>;
 };
 export default CodeHighlight;

src/components/demo-components/desc-paragraph/DescParagraphProps.scss

@@ -5,7 +5,7 @@
   font-weight: 400;
   margin-bottom: 16px;
   margin-top: 0;
-  color: #1a2027;
+ // color: #1a2027;
   word-break: break-word;
   &.dark-mode{
     color: rgba(255, 255, 255, 0.7);

src/components/demo-components/icons/JSIcon.jsx

@@ -9,6 +9,7 @@ const JSIcon = ({ size = "20px", color = "black" }) => {
       viewBox="0 0 24 24"
       height={size}
       width={size}
+      fill={color}
     >
       <path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"></path>
     </svg>

src/components/demo-components/icons/TSIcon.jsx

@@ -8,6 +8,7 @@ const TSIcon = ({ size = "20px", color = "black" }) => {
       viewBox="0 0 24 24"
       height={size}
       width={size}
+      fill={color}
     >
       <path d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z"></path>
     </svg>

src/components/demo-components/sub-title/SubTitle.scss

@@ -2,8 +2,8 @@
   font-size: 1.5rem;
   line-height: 1.5;
   letter-spacing: 0.1px;
-  color: #1a2027;
+  //color: #1a2027;
   &.dark-mode{
-    color:rgba(255, 255, 255, 0.7);
+    //color:rgba(255, 255, 255, 0.7);
   }
 }

src/components/layout-pages/LayoutPage.scss

@@ -0,0 +1,6 @@
+.files-ui-layout {
+  color: #1a2027;
+  &.darkmode {
+    color: rgba(255, 255, 255, 0.7);
+  }
+}

src/components/layout-pages/MainLayoutPage.jsx

@@ -1,14 +1,23 @@
 import { Stack } from "@mui/material";
 import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
 import NavBarTemplate from "../../templates/NavBarTemplate";
+import "./LayoutPage.scss";
 
-const MainLayoutPage = ({
-  children,
-  selectedIndex,
-}) => {
+const MainLayoutPage = ({ children, selectedIndex }) => {
+  const [usuario, dispatch] = React.useContext(UserContext);
+  const darkMode = usuario.darkMode;
+
+  const finalClassName = darkMode
+    ? "files-ui-layout darkmode"
+    : "files-ui-layout";
   return (
     <NavBarTemplate selectedIndex={selectedIndex}>
-      <Stack direction={"row"} sx={{ position: "relative" }}>
+      <Stack
+        direction={"row"}
+        sx={{ position: "relative" }}
+        className={finalClassName}
+      >
         {children}
       </Stack>
     </NavBarTemplate>