add darkmode-react-component

package.json

@@ -30,6 +30,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "darkmode-react-component": "^0.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-techs-logos": "^0.1.9"

src/App.tsx

@@ -1,7 +1,7 @@
 import reactLogo from "./assets/techs/react.svg";
 import "./App.css";
 import pkg from "../package.json";
-
+import DarkModeReact from 'darkmode-react-component';
 import ReactTechsLogos from "./components/ReactTechsLogos";
 // import ReactTechsLogos from 'react-techs-logos'
 
@@ -19,6 +19,7 @@ function App() {
           <img src={reactLogo} alt="React logo" />
           <h1>react-techs-logos@{version}</h1>
         </a>
+        <DarkModeReact />
       </div>
       <div className="content">
         <h2>Install</h2>

src/components/ReactTechsLogos/style.scss

@@ -56,6 +56,26 @@ figure {
   }
 }
 
+body {
+  --vtl-background: rgba(0,0,0, .05);
+  --vtl-background-tooltip: #444;
+  --vtl-shadow-tooltip: rgba(0,0,0,.2);
+  --vtl-text: #000;
+  --vtl-background-svg: #000;
+  --vtl-background-svg-invert: #fff;
+  --vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%);
+}
+
+body.darkmode {
+  --vtl-background: rgba(0,0,0, .5);
+  --vtl-background-tooltip: #444;
+  --vtl-shadow-tooltip: rgba(0,0,0,.2);
+  --vtl-text: #fff;
+  --vtl-background-svg: #fff;
+  --vtl-background-svg-invert: #000;
+  --vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%);
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     --vtl-background: rgba(0,0,0, .05);
@@ -66,15 +86,6 @@ figure {
     --vtl-background-svg-invert: #fff;
     --vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%);
   }
-  body {
-    --vtl-background: rgba(0,0,0, .05);
-    --vtl-background-tooltip: #444;
-    --vtl-shadow-tooltip: rgba(0,0,0,.2);
-    --vtl-text: #000;
-    --vtl-background-svg: #000;
-    --vtl-background-svg-invert: #fff;
-    --vtl-background-gradient: linear-gradient(228deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 60%);
-  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -87,13 +98,4 @@ figure {
     --vtl-background-svg-invert: #000;
     --vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%);
   }
-  body.darkmode {
-    --vtl-background: rgba(0,0,0, .5);
-    --vtl-background-tooltip: #444;
-    --vtl-shadow-tooltip: rgba(0,0,0,.2);
-    --vtl-text: #fff;
-    --vtl-background-svg: #fff;
-    --vtl-background-svg-invert: #000;
-    --vtl-background-gradient: linear-gradient(228deg, rgb(24, 24, 24) 0%, rgb(38, 38, 38) 60%);
-  }
 }

src/index.css

@@ -4,8 +4,6 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -26,14 +24,11 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  color: #213547;
+  background-color: #ffffff;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+body.darkmode {
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
 }

src/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
 declare module 'react-techs-logos';
+declare module 'darkmode-react-component';