📚 (Docs): Improve colorMode displaying

Author: JeremyDolle

documentation/docusaurus.config.js

@@ -65,7 +65,9 @@ const config = {
         contextualSearch: true,
       },
       colorMode: {
-        respectPrefersColorScheme: true,
+        defaultMode: 'dark',
+        disableSwitch: false,
+        respectPrefersColorScheme: false,
       },
       navbar: {
         title: 'React Native Boilerplate',

documentation/src/components/Quickstart.tsx

@@ -45,21 +45,17 @@ export default function Quickstart() {
             </div>
           </div>
 
-          {colorMode === 'dark'
-            ? (
-              <img
-                className="pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
-                src="./img/phone-dark.png"
-                alt="phone"
-              />
-            )
-            : (
-              <img
-                className="pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
-                src="./img/phone.png"
-                alt="phone"
-              />
-            )}
+          <img
+            className="pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
+            src="./img/phone-dark.png"
+            alt="phone"
+          />
+
+          <img
+            className="dark:hidden pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
+            src="./img/phone.png"
+            alt="phone"
+          />
         </div>
       </div>
     </section>

documentation/src/pages/index.tsx

@@ -77,7 +77,7 @@ export default function Home(): JSX.Element {
           <svg className="bottom-0 w-full sm:-mt-20 fill-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
             <path fill="current" fillOpacity="1" d="M0,320L60,272C120,224,240,128,360,128C480,128,600,224,720,234.7C840,245,960,171,1080,122.7C1200,75,1320,53,1380,42.7L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" />
           </svg>
-            <Quickstart />
+          <Quickstart />
           <svg className="pointer-events-none absolute bottom-0 sm:bottom-[169px] sm:bottom-[99px] lg:bottom-[269px] w-full sm:-mt-20 fill-neutral-100 dark:fill-neutral-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
             <path fill="current" fillOpacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z" />
           </svg>

documentation/src/theme/Navbar/index.js

@@ -6,6 +6,30 @@ import { useColorMode } from '@docusaurus/theme-common';
 export default function NavbarWrapper(props) {
   const { colorMode } = useColorMode();
 
+  useEffect(() => {
+    const element = document.querySelector('html');
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes') {
+          const html = document.documentElement;
+          const needOverride = colorMode === 'dark' && !html.classList.contains('dark');
+          if (needOverride) {
+            html.classList.add('dark');
+          }
+        }
+      });
+    });
+
+    observer.observe(element, {
+      attributes: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  });
+
   useEffect(() => {
     const html = document.documentElement;
     if (colorMode === 'dark') {