dark mode

ozziexsh · Feb 20, 2023 · c605b44 · c605b44
1 parent cbb67bc
commit c605b44
Show file tree

Hide file tree

Showing 58 changed files with 1,066 additions and 634 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
   "dependencies": {
     "@oclif/core": "^1.6.4",
     "@oclif/plugin-help": "^5.1.12",
-    "fs-extra": "^10.0.1"
+    "fs-extra": "^10.0.1",
+    "glob": "^8.1.0"
   },
   "devDependencies": {
     "@oclif/test": "^2.1.0",

diff --git a/src/commands/install.ts b/src/commands/install.ts
@@ -3,6 +3,7 @@ import { execSync } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as fse from 'fs-extra';
+import { glob } from 'glob';
 
 export default class Install extends Command {
   static description = 'Replaces vue with react in a fresh installation';
@@ -18,6 +19,7 @@ export default class Install extends Command {
     teams: Flags.boolean({ default: false }),
     ssr: Flags.boolean({ default: false }),
     force: Flags.boolean({ default: false }),
+    dark: Flags.boolean({ default: false }),
   };
 
   static args = [];
@@ -30,21 +32,20 @@ export default class Install extends Command {
     '@types/react': '^18.0.25',
     '@types/react-dom': '^18.0.8',
     '@types/ziggy-js': '^1.3.0',
-    '@vitejs/plugin-react': '^2.0.0',
+    '@vitejs/plugin-react': '^2.2.0',
     autoprefixer: '^10.4.7',
-    'laravel-vite-plugin': '^0.5.0',
+    'laravel-vite-plugin': '^0.5.4',
     postcss: '^8.4.14',
-    prettier: '^2.6.2',
-    tailwindcss: '^3.1.0',
+    prettier: '^2.8.4',
+    tailwindcss: '^3.2.7',
     typescript: '^4.6.3',
     vite: '^3.0.0',
   };
 
   private deps = {
-    '@headlessui/react': '^1.5.0',
-    '@inertiajs/inertia': '^0.11.1',
-    '@inertiajs/inertia-react': '^0.8.1',
-    '@inertiajs/progress': '^0.2.7',
+    '@headlessui/react': '^1.7.11',
+    '@inertiajs/core': '^1.0.2',
+    '@inertiajs/react': '^1.0.2',
     axios: '^0.26.1',
     classnames: '^2.3.1',
     lodash: '^4.17.21',
@@ -54,10 +55,8 @@ export default class Install extends Command {
   };
 
   private oldDeps = [
-    '@inertiajs/inertia',
-    '@inertiajs/inertia-vue3',
-    '@inertiajs/progress',
-    '@inertiajs/server',
+    '@inertiajs/core',
+    '@inertiajs/vue3',
     '@vitejs/plugin-vue',
     'laravel-vite-plugin',
     'vite',
@@ -161,6 +160,10 @@ export default class Install extends Command {
       fs.rmSync(path.join(process.cwd(), 'resources', 'js', 'ssr.tsx'));
     }
 
+    if (!flags.dark) {
+      this.removeDarkMode();
+    }
+
     this.log('Replacing app.blade.php');
     this.moveStub(
       'resources/views/app.blade.php',
@@ -187,4 +190,20 @@ export default class Install extends Command {
       .map(([key, value]) => `"${key}@${value}"`)
       .join(' ');
   }
+
+  private removeDarkMode() {
+    const paths = glob.sync(path.join(process.cwd(), 'resources/js/**/*.tsx'));
+    for (const path of paths) {
+      if (path.endsWith('Pages/Welcome.tsx')) {
+        continue;
+      }
+
+      const contents = fs.readFileSync(path);
+
+      fs.writeFileSync(
+        path,
+        contents.toString().replace(/\sdark:[^\s"']+/g, '')
+      );
+    }
+  }
 }
diff --git a/src/stubs/resources/js/Components/ActionMessage.tsx b/src/stubs/resources/js/Components/ActionMessage.tsx
@@ -19,7 +19,9 @@ export default function ActionMessage({
         leave-from-class="opacity-100"
         leaveTo="opacity-0"
       >
-        <div className="text-sm text-gray-600">{children}</div>
+        <div className="text-sm text-gray-600 dark:text-gray-400">
+          {children}
+        </div>
       </Transition>
     </div>
   );

diff --git a/src/stubs/resources/js/Components/ActionSection.tsx b/src/stubs/resources/js/Components/ActionSection.tsx
@@ -16,7 +16,7 @@ export default function ActionSection({
       <SectionTitle title={title} description={description} />
 
       <div className="mt-5 md:mt-0 md:col-span-2">
-        <div className="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+        <div className="px-4 py-5 sm:p-6 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
           {children}
         </div>
       </div>

diff --git a/src/stubs/resources/js/Components/ApplicationLogo.tsx b/src/stubs/resources/js/Components/ApplicationLogo.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 
-export default function ApplicationLogo({
-  className,
-}: {
-  className?: string;
-}) {
+export default function ApplicationLogo({ className }: { className?: string }) {
   return (
     <svg
       viewBox="0 0 317 48"
@@ -14,7 +10,7 @@ export default function ApplicationLogo({
     >
       <path
         d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z"
-        fill="#000"
+        fill="fill-black dark:fill-white"
       />
       <path
         d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z"

diff --git a/src/stubs/resources/js/Components/AuthenticationCard.tsx b/src/stubs/resources/js/Components/AuthenticationCard.tsx
@@ -5,12 +5,12 @@ export default function AuthenticationCard({
   children,
 }: PropsWithChildren<Record<string, unknown>>) {
   return (
-    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
       <div>
         <AuthenticationCardLogo />
       </div>
 
-      <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+      <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
         {children}
       </div>
     </div>

diff --git a/src/stubs/resources/js/Components/AuthenticationCardLogo.tsx b/src/stubs/resources/js/Components/AuthenticationCardLogo.tsx
@@ -1,9 +1,9 @@
-import { InertiaLink } from '@inertiajs/inertia-react';
+import { Link } from '@inertiajs/react';
 import React from 'react';
 
 export default function AuthenticationCardLogo() {
   return (
-    <InertiaLink href="/">
+    <Link href="/">
       <svg
         className="w-16 h-16"
         viewBox="0 0 48 48"
@@ -19,6 +19,6 @@ export default function AuthenticationCardLogo() {
           fill="#6875F5"
         />
       </svg>
-    </InertiaLink>
+    </Link>
   );
 }
diff --git a/src/stubs/resources/js/Components/Banner.tsx b/src/stubs/resources/js/Components/Banner.tsx
@@ -1,11 +1,10 @@
-import { Page } from '@inertiajs/inertia';
-import { usePage } from '@inertiajs/inertia-react';
-import classNames from 'classnames';
 import React, { useState } from 'react';
+import classNames from 'classnames';
+import useTypedPage from '@/Hooks/useTypedPage';
 
 export default function Banner() {
   const [show, setShow] = useState(true);
-  const { props } = usePage<Page<{ jetstream: any }>>();
+  const { props } = useTypedPage();
   const style = props.jetstream.flash?.bannerStyle || 'success';
   const message = props.jetstream.flash?.banner || '';
 

diff --git a/src/stubs/resources/js/Components/Checkbox.tsx b/src/stubs/resources/js/Components/Checkbox.tsx
@@ -12,7 +12,7 @@ export default function Checkbox(
       type="checkbox"
       {...props}
       className={classNames(
-        'rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50',
+        'rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800',
         props.className,
       )}
     />

diff --git a/src/stubs/resources/js/Components/ConfirmationModal.tsx b/src/stubs/resources/js/Components/ConfirmationModal.tsx
@@ -6,11 +6,11 @@ ConfirmationModal.Content = function ConfirmationModalContent({
   children,
 }: PropsWithChildren<{ title: string }>) {
   return (
-    <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+    <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
       <div className="sm:flex sm:items-start">
         <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
           <svg
-            className="h-6 w-6 text-red-600"
+            className="h-6 w-6 text-red-600 dark:text-red-400"
             stroke="currentColor"
             fill="none"
             viewBox="0 0 24 24"
@@ -25,9 +25,13 @@ ConfirmationModal.Content = function ConfirmationModalContent({
         </div>
 
         <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-          <h3 className="text-lg">{title}</h3>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+            {title}
+          </h3>
 
-          <div className="mt-2">{children}</div>
+          <div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+            {children}
+          </div>
         </div>
       </div>
     </div>
@@ -37,7 +41,11 @@ ConfirmationModal.Content = function ConfirmationModalContent({
 ConfirmationModal.Footer = function ConfirmationModalFooter({
   children,
 }: PropsWithChildren<Record<string, unknown>>) {
-  return <div className="px-6 py-4 bg-gray-100 text-right">{children}</div>;
+  return (
+    <div className="px-6 py-4 bg-gray-100 dark:bg-gray-800 text-right">
+      {children}
+    </div>
+  );
 };
 
 export default function ConfirmationModal({

diff --git a/src/stubs/resources/js/Components/DangerButton.tsx b/src/stubs/resources/js/Components/DangerButton.tsx
@@ -14,7 +14,7 @@ export default function DangerButton({
     <button
       {...props}
       className={classNames(
-        'inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 focus:outline-none focus:border-red-700 focus:ring focus:ring-red-200 active:bg-red-600 disabled:opacity-25 transition',
+        'inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150',
         props.className,
       )}
     >

diff --git a/src/stubs/resources/js/Components/DialogModal.tsx b/src/stubs/resources/js/Components/DialogModal.tsx
@@ -7,17 +7,25 @@ DialogModal.Content = function DialogModalContent({
 }: PropsWithChildren<{ title: string }>) {
   return (
     <div className="px-6 py-4">
-      <div className="text-lg">{title}</div>
+      <div className="text-lg font-medium text-gray-900 dark:text-gray-100">
+        {title}
+      </div>
 
-      <div className="mt-4">{children}</div>
+      <div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+        {children}
+      </div>
     </div>
   );
 };
 
 DialogModal.Footer = function DialogModalFooter({
   children,
 }: PropsWithChildren<Record<string, unknown>>) {
-  return <div className="px-6 py-4 bg-gray-100 text-right">{children}</div>;
+  return (
+    <div className="px-6 py-4 bg-gray-100 dark:bg-gray-800 text-right">
+      {children}
+    </div>
+  );
 };
 
 export default function DialogModal({

diff --git a/src/stubs/resources/js/Components/Dropdown.tsx b/src/stubs/resources/js/Components/Dropdown.tsx
@@ -12,7 +12,7 @@ interface Props {
 export default function Dropdown({
   align = 'right',
   width = '48',
-  contentClasses = 'py-1 bg-white',
+  contentClasses = 'py-1 bg-white dark:bg-gray-700',
   renderTrigger,
   children,
 }: PropsWithChildren<Props>) {

diff --git a/src/stubs/resources/js/Components/DropdownLink.tsx b/src/stubs/resources/js/Components/DropdownLink.tsx
@@ -1,4 +1,4 @@
-import { InertiaLink } from '@inertiajs/inertia-react';
+import { Link } from '@inertiajs/react';
 import React, { PropsWithChildren } from 'react';
 
 interface Props {
@@ -19,7 +19,7 @@ export default function DropdownLink({
             return (
               <button
                 type="submit"
-                className="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition"
+                className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
               >
                 {children}
               </button>
@@ -28,19 +28,19 @@ export default function DropdownLink({
             return (
               <a
                 href={href}
-                className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition"
+                className="block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
               >
                 {children}
               </a>
             );
           default:
             return (
-              <InertiaLink
+              <Link
                 href={href || ''}
-                className="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition"
+                className="block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
               >
                 {children}
-              </InertiaLink>
+              </Link>
             );
         }
       })()}

diff --git a/src/stubs/resources/js/Components/FormSection.tsx b/src/stubs/resources/js/Components/FormSection.tsx
@@ -31,7 +31,7 @@ export default function FormSection({
         >
           <div
             className={classNames(
-              'px-4 py-5 bg-white sm:p-6 shadow',
+              'px-4 py-5 bg-white dark:bg-gray-800 sm:p-6 shadow',
               hasActions
                 ? 'sm:rounded-tl-md sm:rounded-tr-md'
                 : 'sm:rounded-md',
@@ -41,7 +41,7 @@ export default function FormSection({
           </div>
 
           {hasActions && (
-            <div className="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
+            <div className="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
               {renderActions?.()}
             </div>
           )}

diff --git a/src/stubs/resources/js/Components/InputError.tsx b/src/stubs/resources/js/Components/InputError.tsx
@@ -15,7 +15,9 @@ export default function InputError({
   }
   return (
     <div className={className}>
-      <p className="text-sm text-red-600">{message || children}</p>
+      <p className="text-sm text-red-600 dark:text-red-400">
+        {message || children}
+      </p>
     </div>
   );
 }
diff --git a/src/stubs/resources/js/Components/InputLabel.tsx b/src/stubs/resources/js/Components/InputLabel.tsx
@@ -12,7 +12,7 @@ export default function InputLabel({
 }: PropsWithChildren<Props>) {
   return (
     <label
-      className="block font-medium text-sm text-gray-700"
+      className="block font-medium text-sm text-gray-700 dark:text-gray-300"
       htmlFor={htmlFor}
     >
       {value || children}

diff --git a/src/stubs/resources/js/Components/Modal.tsx b/src/stubs/resources/js/Components/Modal.tsx
@@ -46,7 +46,7 @@ export default function Modal({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 transition-opacity" />
           </Transition.Child>
 
           {/* This element is to trick the browser into centering the modal contents. */}
@@ -67,7 +67,7 @@ export default function Modal({
           >
             <div
               className={classNames(
-                'inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full',
+                'inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full',
                 maxWidthClass,
               )}
             >