global

Author: codeaashu

src/App.js

@@ -46,6 +46,10 @@ import ContributionsGuide from './Page/ResoucesHub/ContributionsGuide.jsx';
 
 import PageNotFound from './Page/PageNotFound.jsx';
 function App() {
+  React.useEffect(() => {
+    document.documentElement.classList.add('dark');
+  }, []);
+
   return (
     <BrowserRouter>
       <Helmet>

src/Homepage.jsx

@@ -145,7 +145,7 @@ function App() {
   };
 
   return currentUrl === '/' ? (
-    <div className="App flex flex-col bg-primaryColor md:flex-row dark:bg-secondaryColor">
+    <div className="App flex flex-col bg-primaryColor dark:bg-secondaryColor md:flex-row">
       <Sidebar />
       <div className="w-full pl-5 pr-4 md:h-screen md:w-[77%] md:overflow-y-scroll md:py-7" ref={profilesRef}>
         <Search onSearch={handleSearch} />

src/components/Sidebar/Sidebar.jsx

@@ -33,7 +33,7 @@ function Sidebar() {
   // }
 
   return (
-    <div className="my-7 w-full border-r-2 border-borderSecondary px-7 font-spaceMono md:h-[90vh] md:w-[23%] md:px-2 lg:px-7 dark:border-borderColor">
+    <div className="my-7 w-full border-r-2 border-borderSecondary px-7 font-spaceMono dark:border-borderColor md:h-[90vh] md:w-[23%] md:px-2 lg:px-7">
       <div className="mb-2 flex h-12 items-center justify-center gap-2.5">
         <img src="./WordMark.png" alt="DevDisplay Logo" className="h-64 w-auto md:h-72 lg:h-80" />
         {/* <div className="text-secondaryColor dark:text-white">

tailwind.config.js

@@ -1,9 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: 'media',
-  variants: {
-    dark: ['media: (prefers-color-scheme: dark)'],
-  },
+  darkMode: 'class', // Change this to 'class' to manually control dark mode
   content: ['./src/**/*.{html,js,jsx}'],
   theme: {
     extend: {