fix: Playground light mode issue

closes #52

Author: AVGVSTVS96

playground/src/App.tsx

@@ -2,7 +2,7 @@ import Demo from './Demo.mdx';
 
 function App() {
   return (
-    <main className="flex flex-col min-w-screen">
+    <main className="flex flex-col min-w-screen dark">
       <div className="flex flex-col prose dark:prose-invert self-center mt-10 md:max-w-3xl">
         <Demo />
         <footer className="text-sm dark:text-slate-300 mt-10 mb-8 self-end">

playground/src/index.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @plugin '@tailwindcss/typography';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -59,15 +61,15 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+/* @media (prefers-color-scheme: light) { */
+/*   :root { */
+/*     color: #213547; */
+/*     background-color: #ffffff; */
+/*   } */
+/*   a:hover { */
+/*     color: #747bff; */
+/*   } */
+/*   button { */
+/*     background-color: #f9f9f9; */
+/*   } */
+/* } */