chore: update the theme selector setting in globals.css

web/app/styles/globals.css

@@ -2,8 +2,8 @@
 @tailwind base;
 @tailwind components;
 
-@import '../../themes/light.css';
-@import '../../themes/dark.css';
+@import "../../themes/light.css";
+@import "../../themes/dark.css";
 
 html[data-changing-theme] * {
   transition: none !important;
@@ -20,24 +20,30 @@ html[data-changing-theme] * {
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
 
-  --primary-glow: conic-gradient(from 180deg at 50% 50%,
-      #16abff33 0deg,
-      #0885ff33 55deg,
-      #54d6ff33 120deg,
-      #0071ff33 160deg,
-      transparent 360deg);
-  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1),
-      rgba(255, 255, 255, 0));
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
 
   --tile-start-rgb: 239, 245, 249;
   --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(#00000080,
-      #00000040,
-      #00000030,
-      #00000020,
-      #00000010,
-      #00000010,
-      #00000080);
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
 
   --callout-rgb: 238, 240, 241;
   --callout-border-rgb: 172, 175, 176;
@@ -282,7 +288,7 @@ button:focus-within {
   line-height: 24px;
 }
 
-[class*='code-'] {
+[class*="code-"] {
   @apply font-mono;
 }
 
@@ -644,7 +650,7 @@ button:focus-within {
 }
 
 .text-gradient {
-  background: linear-gradient(91.58deg, #2250F2 -29.55%, #0EBCF3 75.22%);
+  background: linear-gradient(91.58deg, #2250f2 -29.55%, #0ebcf3 75.22%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -652,7 +658,7 @@ button:focus-within {
 }
 
 /* overwrite paging active dark model style  */
-[class*=style_paginatio] li .text-primary-600 {
+[class*="style_paginatio"] li .text-primary-600 {
   color: rgb(28 100 242);
   background-color: rgb(235 245 255);
 }
@@ -665,8 +671,13 @@ button:focus-within {
   bottom: 0;
 }
 
-@import '../components/base/button/index.css';
-@import '../components/base/action-button/index.css';
-@import '../components/base/modal/index.css';
+[data-theme="dark"] [data-hide-on-theme="dark"],
+[data-theme="light"] [data-hide-on-theme="light"] {
+  display: none;
+}
+
+@import "../components/base/button/index.css";
+@import "../components/base/action-button/index.css";
+@import "../components/base/modal/index.css";
 
-@tailwind utilities;
+@tailwind utilities;