fix light mode

react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.css

@@ -17,3 +17,12 @@
   padding: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+@media (prefers-color-scheme: light) {
+  .component-wrapper {
+    background-color: #f0f0f0;
+  }
+  .component-content {
+    background-color: #fff;
+  }
+}

react-advanced-tag1/src/common/components/Header/navigation.css

@@ -26,3 +26,19 @@
 .navigation ul li {
   display: inline;
 }
+
+@media (prefers-color-scheme: light) {
+  .navigation {
+    background-color: #f0f0f0;
+  }
+  .navigation a {
+    color: #282c34;
+  }
+  .navigation a:hover {
+    background-color: #98e1f6;
+  }
+
+  .navigation ul li {
+    color: #282c34;
+  }
+}

react-advanced-tag1/src/layouts/MainLayout.css

@@ -53,3 +53,21 @@ footer {
   padding: 2rem;
   text-align: center;
 }
+
+@media (prefers-color-scheme: light) {
+  header {
+    background-color: #f0f0f0;
+    color: #000000;
+  }
+  header nav a {
+    color: #000000;
+  }
+  footer {
+    background-color: #f0f0f0;
+    color: #000000;
+  }
+  .content {
+    background-color: #ffffff;
+    color: #000000;
+  }
+}