[WIP] - Theme Folder and Tailwind specific styles

Right now there's a folder called themes with the `theme.tsx` file inside it but there's no integration with tailwind nor it's possible to add inline scripts and style tags. I'll be looking for it.

src/cms/admin/pages/login.tsx

@@ -1,5 +1,8 @@
-import { ToggleTheme } from '../theme';
-import { LoginWrapper, Script, Head, ThemeToggle } from '../theme-tailwind';
+import {
+  LoginWrapper,
+  Head,
+  ThemeToggle
+} from '../themes/tailwind-default/theme';
 export const Login = (props: {
   children?: string;
   screenTitle?: string;
@@ -76,7 +79,11 @@ export const Setup = (props: { children?: string; screenTitle?: string }) => {
           screenTitle={props.screenTitle}
           errorTitle='setup-errors'
           formTitle='formio-setup'
-        />
+          loginScreenTitle='SonicJS'
+          loginScreenIntro='Welcome to the Admin Panel'
+        >
+          <ThemeToggle />
+        </LoginWrapper>
       </body>
     </html>
   );

src/index.css

@@ -19,6 +19,14 @@
   button[type="submit"] {
     @apply bg-amber-500 w-full hover:bg-amber-500/50 text-black tracking-wider font-bold py-2 px-4 rounded;
   }
+  @media (prefers-color-scheme: dark) {
+    .form-control {
+      @apply bg-neutral-900 text-neutral-100;
+    }
+    button[type="submit"] {
+      @apply bg-amber-500 w-full hover:bg-amber-500/50 text-black tracking-wider font-bold py-2 px-4 rounded;
+    }
+  }
 }
 
 :root {