Implementation of DarkMode

hiamir · Oct 20, 2022 · de7ebdb · de7ebdb
1 parent ba95974
commit de7ebdb
Show file tree

Hide file tree

Showing 33 changed files with 288 additions and 109 deletions.
diff --git a/app/View/Components/FormSideHeader.php b/app/View/Components/FormSideHeader.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class FormSideHeader extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.form-side-header');
+    }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/typography": "^0.5.0",
-        "alpinejs": "^3.0.6",
+        "alpinejs": "^3.10.4",
         "autoprefixer": "^10.4.7",
         "axios": "^0.27",
         "laravel-vite-plugin": "^0.6.0",
@@ -16,7 +16,7 @@
         "prettier": "^2.7.1",
         "prettier-plugin-tailwindcss": "^0.1.13",
         "tailwindcss": "^3.1.0",
-        "vite": "^3.0.0"
+        "vite": "^3.1.8"
     },
     "dependencies": {
         "flowbite": "^1.5.3",

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,7 +1,13 @@
 import './bootstrap';
 
 import Alpine from 'alpinejs';
+import Main  from './components/main';
+
+Alpine.data('Main', Main)
+
 
 window.Alpine = Alpine;
 
 Alpine.start();
+
+
diff --git a/resources/js/components/main.js b/resources/js/components/main.js
@@ -0,0 +1,22 @@
+// document.addEventListener('alpine:init', function () {
+//     Alpine.data('Main', ($wire, data) => ({
+//         darkMode: data.darkMode
+//     }));
+//
+// });
+
+export function Main(){
+     return{
+         darkMode: localStorage.getItem('dark') === 'true',
+
+         init() {
+             Alpine.effect(() => {
+                 console.log(this.darkMode);
+             });
+         }
+     }
+}
+
+export default Main
+
+
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
@@ -4,7 +4,7 @@
             <x-jet-authentication-card-logo />
         </x-slot>
 
-        <div class="mb-4 text-sm text-gray-600">
+        <div class="mb-4 text-sm text-gray-600 dark:text-olblue-400 ">
             {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
         </div>
 

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -34,7 +34,7 @@
 
             <div class="flex items-center justify-end mt-4">
                 @if (Route::has('password.request'))
-                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
+                    <a class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-olblue-600 dark:hover:text-olblue-500" href="{{ route('password.request') }}">
                         {{ __('Forgot your password?') }}
                     </a>
                 @endif

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -47,7 +47,7 @@
             @endif
 
             <div class="flex items-center justify-end mt-4">
-                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
+                <a class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-olblue-600 dark:hover:text-olblue-500" href="{{ route('login') }}">
                     {{ __('Already registered?') }}
                 </a>
 

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -1,13 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
-      x-data="{
-            darkMode: localStorage.getItem('dark') === 'true'
-      }"
-      x-init="$watch('darkMode', function(val){
-        localStorage.setItem('dark', val);
-        console.log(darkMode);
-      })"
-      x-bind:class="{ 'dark': darkMode }"
+    x-data="Main()"
+    x-bind:class="{ 'dark': darkMode }"
 
 >
 <head>

diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -1,20 +1,29 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+      x-data="Main()"
+      x-bind:class="{ 'dark': darkMode }"
+>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
         <title>{{ config('app.name', 'Laravel') }}</title>
 
+        <style>
+            input:-webkit-autofill,
+            input:-webkit-autofill:focus {
+                transition: background-color 600000s 0s, color 600000s 0s !important;
+            }
+        </style>
         <!-- Fonts -->
 {{--        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">--}}
 
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
     <body>
-        <div class="font-sans text-gray-900 antialiased">
+        <div class="bg-gray-100 dark:bg-oblue-600 font-sans text-gray-900 antialiased">
             {{ $slot }}
         </div>
     </body>

diff --git a/resources/views/navigation-menu.blade.php b/resources/views/navigation-menu.blade.php
@@ -5,11 +5,7 @@
             <div class="flex">
                 <!-- Logo -->
                 <div class="shrink-0 flex items-center">
-                    <a href="{{ route('dashboard') }}">
-                        <img x-show="darkMode" class="w-14 h-14" src="{{ asset('storage/logo-dark.svg') }}" alt="">
-                        <img x-show="!darkMode" class="w-14 h-14" src="{{ asset('storage/logo-light.svg') }}" alt="">
-{{--                        <x-jet-application-mark class="block h-9 w-auto"/>--}}
-                    </a>
+                        <x-jet-application-mark class="block h-9 w-auto"/>
                 </div>
 
                 <!-- Navigation Links -->

diff --git a/resources/views/profile/delete-user-form.blade.php b/resources/views/profile/delete-user-form.blade.php
@@ -8,7 +8,7 @@
     </x-slot>
 
     <x-slot name="content">
-        <div class="max-w-xl text-sm text-gray-600">
+        <div class="max-w-xl text-sm text-gray-600 dark:text-olblue-600">
             {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.') }}
         </div>
 

diff --git a/resources/views/profile/logout-other-browser-sessions-form.blade.php b/resources/views/profile/logout-other-browser-sessions-form.blade.php
@@ -8,7 +8,7 @@
     </x-slot>
 
     <x-slot name="content">
-        <div class="max-w-xl text-sm text-gray-600">
+        <div class="max-w-xl text-sm text-gray-600 dark:text-olblue-600">
             {{ __('If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.') }}
         </div>
 
@@ -30,12 +30,12 @@
                         </div>
 
                         <div class="ml-3">
-                            <div class="text-sm text-gray-600">
+                            <div class="text-sm text-gray-600  dark:text-olblue-600">
                                 {{ $session->agent->platform() ? $session->agent->platform() : 'Unknown' }} - {{ $session->agent->browser() ? $session->agent->browser() : 'Unknown' }}
                             </div>
 
                             <div>
-                                <div class="text-xs text-gray-500">
+                                <div class="text-xs text-gray-500  dark:text-olblue-500">
                                     {{ $session->ip_address }},
 
                                     @if ($session->is_current_device)

diff --git a/resources/views/profile/show.blade.php b/resources/views/profile/show.blade.php
@@ -1,6 +1,6 @@
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-300 leading-tight">
             {{ __('Profile') }}
         </h2>
     </x-slot>

diff --git a/resources/views/profile/two-factor-authentication-form.blade.php b/resources/views/profile/two-factor-authentication-form.blade.php
@@ -8,7 +8,7 @@
     </x-slot>
 
     <x-slot name="content">
-        <h3 class="text-lg font-medium text-gray-900">
+        <h3 class="text-lg font-medium text-gray-900 dark:text-olblue-300 ">
             @if ($this->enabled)
                 @if ($showingConfirmation)
                     {{ __('Finish enabling two factor authentication.') }}
@@ -20,15 +20,15 @@
             @endif
         </h3>
 
-        <div class="mt-3 max-w-xl text-sm text-gray-600">
+        <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-olblue-600">
             <p>
                 {{ __('When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone\'s Google Authenticator application.') }}
             </p>
         </div>
 
         @if ($this->enabled)
             @if ($showingQrCode)
-                <div class="mt-4 max-w-xl text-sm text-gray-600">
+                <div class="mt-4 max-w-xl text-sm text-gray-600 ">
                     <p class="font-semibold">
                         @if ($showingConfirmation)
                             {{ __('To finish enabling two factor authentication, scan the following QR code using your phone\'s authenticator application or enter the setup key and provide the generated OTP code.') }}

diff --git a/resources/views/vendor/jetstream/components/action-message.blade.php b/resources/views/vendor/jetstream/components/action-message.blade.php
@@ -5,6 +5,6 @@
     x-show.transition.out.opacity.duration.1500ms="shown"
     x-transition:leave.opacity.duration.1500ms
     style="display: none;"
-    {{ $attributes->merge(['class' => 'text-sm text-gray-600']) }}>
+    {{ $attributes->merge(['class' => 'text-sm text-gray-600 dark:text-olblue-500']) }}>
     {{ $slot->isEmpty() ? 'Saved.' : $slot }}
 </div>
diff --git a/resources/views/vendor/jetstream/components/action-section.blade.php b/resources/views/vendor/jetstream/components/action-section.blade.php
@@ -1,11 +1,9 @@
 <div {{ $attributes->merge(['class' => 'md:grid md:grid-cols-3 md:gap-6']) }}>
-    <x-jet-section-title>
-        <x-slot name="title">{{ $title }}</x-slot>
-        <x-slot name="description">{{ $description }}</x-slot>
-    </x-jet-section-title>
+    <x-form-side-header title={{$title}} description={{$description}}></x-form-side-header>
+
 
     <div class="mt-5 md:mt-0 md:col-span-2">
-        <div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+        <div class="px-4 py-5 sm:p-6 bg-white dark:bg-oblue-400  shadow sm:rounded-lg">
             {{ $content }}
         </div>
     </div>

diff --git a/resources/views/vendor/jetstream/components/application-mark.blade.php b/resources/views/vendor/jetstream/components/application-mark.blade.php
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
-  <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" fill="#6875F5"/>
-  <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
-</svg>
+<a href="{{ route('dashboard') }}">
+    <img x-show="darkMode" class="w-16 h-16" src="{{ asset('storage/logo-dark.svg') }}" alt="">
+    <img x-show="!darkMode" class="w-16 h-16" src="{{ asset('storage/logo-light.svg') }}" alt="">
+</a>
diff --git a/resources/views/vendor/jetstream/components/authentication-card-logo.blade.php b/resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
@@ -1,6 +1,11 @@
+{{--<a href="/">--}}
+{{--    <svg class="w-16 h-16" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
+{{--        <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" fill="#6875F5"/>--}}
+{{--        <path d="M18.134 45.885A23.918 23.918 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.183-16.608 27.092-31.75 31.751z" fill="#6875F5"/>--}}
+{{--    </svg>--}}
+{{--</a>--}}
+
 <a href="/">
-    <svg class="w-16 h-16" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <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" fill="#6875F5"/>
-        <path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5"/>
-    </svg>
+    <img x-show="darkMode" class="w-20 h-20" src="{{ asset('storage/logo-dark.svg') }}" alt="">
+    <img x-show="!darkMode" class="w-20 h-20" src="{{ asset('storage/logo-light.svg') }}" alt="">
 </a>
diff --git a/resources/views/vendor/jetstream/components/authentication-card.blade.php b/resources/views/vendor/jetstream/components/authentication-card.blade.php
@@ -1,9 +1,9 @@
-<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-oblue-600">
     <div>
         {{ $logo }}
     </div>
 
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-oblue-100 shadow-md overflow-hidden sm:rounded-lg">
         {{ $slot }}
     </div>
 </div>
diff --git a/resources/views/vendor/jetstream/components/button.blade.php b/resources/views/vendor/jetstream/components/button.blade.php
@@ -1,3 +1,5 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition']) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-olblue-300 border border-transparent
+rounded-md font-semibold text-xs text-white dark:text-oblue-100 uppercase tracking-widest hover:bg-gray-400 dark:hover:bg-olblue-900 dark:hover:bg-olblue-400 active:bg-gray-900 focus:outline-none
+focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/views/vendor/jetstream/components/dialog-modal.blade.php b/resources/views/vendor/jetstream/components/dialog-modal.blade.php
@@ -2,16 +2,16 @@
 
 <x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
     <div class="px-6 py-4">
-        <div class="text-lg">
+        <div class="text-lg dark:text-oyellow-900">
             {{ $title }}
         </div>
 
-        <div class="mt-4">
+        <div class="mt-4 dark:text-olblue-300">
             {{ $content }}
         </div>
     </div>
 
-    <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+    <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-oblue-400 text-right">
         {{ $footer }}
     </div>
 </x-jet-modal>
diff --git a/resources/views/vendor/jetstream/components/form-section.blade.php b/resources/views/vendor/jetstream/components/form-section.blade.php
@@ -2,20 +2,20 @@
 
 <div {{ $attributes->merge(['class' => 'md:grid md:grid-cols-3 md:gap-6']) }}>
     <x-jet-section-title>
-        <x-slot name="title">{{ $title }}</x-slot>
-        <x-slot name="description">{{ $description }}</x-slot>
+        <x-slot name="title" class=""><span class="dark:text-gray-300">{{ $title }}</span></x-slot>
+        <x-slot name="description"><span class="dark:text-gray-400">{{ $description }}</span></x-slot>
     </x-jet-section-title>
 
     <div class="mt-5 md:mt-0 md:col-span-2">
         <form wire:submit.prevent="{{ $submit }}">
-            <div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
+            <div class="px-4 py-5 bg-white dark:bg-oblue-400 sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
                 <div class="grid grid-cols-6 gap-6">
                     {{ $form }}
                 </div>
             </div>
 
             @if (isset($actions))
-                <div class="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 class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-oblue-400 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
                     {{ $actions }}
                 </div>
             @endif

diff --git a/resources/views/vendor/jetstream/components/form-side-header.blade.php b/resources/views/vendor/jetstream/components/form-side-header.blade.php
diff --git a/resources/views/vendor/jetstream/components/input.blade.php b/resources/views/vendor/jetstream/components/input.blade.php
@@ -1,3 +1,4 @@
 @props(['disabled' => false])
 
-<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm']) !!}>
+<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 dark:!bg-oblue-400 appearance-none dark:!autofill:bg-oblue-400 focus:border-indigo-300 dark:border-olblue-800 focus:ring dark:text-olblue-300
+focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm']) !!}">
diff --git a/resources/views/vendor/jetstream/components/label.blade.php b/resources/views/vendor/jetstream/components/label.blade.php
@@ -1,5 +1,5 @@
 @props(['value'])
 
-<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}>
+<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700 dark:text-olblue-500']) }}>
     {{ $value ?? $slot }}
 </label>
diff --git a/resources/views/vendor/jetstream/components/modal.blade.php b/resources/views/vendor/jetstream/components/modal.blade.php
@@ -53,10 +53,10 @@ class="jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0">
-        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+        <div class="absolute inset-0 bg-gray-500 dark:bg-oblue-900 opacity-75"></div>
     </div>
 
-    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
+    <div x-show="show" class="mb-6 bg-white dark:bg-oblue-400 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"