Merge pull request #610 from addeeandra/feat/light-mode

Theme Switch: Dark & Light Mode

resources/js/app.js

@@ -64,4 +64,7 @@ Alpine.data('bookmarkButton', bookmarkButton);
 import { viewCreate } from './view-cerate.js';
 Alpine.data('viewCreate', viewCreate);
 
+import { themeSwitch } from './theme-switch.js';
+Alpine.data('themeSwitch', themeSwitch);
+
 Livewire.start()

resources/js/theme-switch.js

@@ -0,0 +1,61 @@
+const themeSwitch = () => ({
+
+    theme: 'dark', // default theme
+
+    availableModes: ['dark', 'light'], // e.g. system
+
+    modeIndex: 0,
+
+    init() {
+        const currentTheme = localStorage.getItem('theme') || this.theme
+
+        this.modeIndex = this.availableModes.indexOf(currentTheme)
+
+        this.setTheme(currentTheme)
+    },
+
+    setTheme(theme) {
+        this.theme = theme
+        localStorage.setItem('theme', theme)
+
+        if (theme === 'dark') {
+            this.setDarkMode()
+            return
+        }
+
+        if (theme === 'light') {
+            this.setLightMode()
+            return
+        }
+
+        this.setSystemMode()
+    },
+
+    setLightMode() {
+        document.documentElement.classList.remove('dark')
+        document.documentElement.classList.add(this.theme)
+    },
+
+    setDarkMode() {
+        document.documentElement.classList.remove('light')
+        document.documentElement.classList.add(this.theme)
+    },
+
+    setSystemMode() {
+        document.documentElement.classList.remove('dark', 'light')
+    },
+
+    toggleTheme() {
+        const newModeIndex = (this.modeIndex + 1) % this.availableModes.length
+
+        this.modeIndex = newModeIndex
+        this.setTheme(this.availableModes[newModeIndex])
+    },
+
+    toggleThemeButtonText() {
+        return this.theme.charAt(0).toUpperCase() + this.theme.slice(1)
+    }
+
+})
+
+export { themeSwitch }

resources/views/about.blade.php

@@ -2,12 +2,12 @@
     <div class="relative flex justify-center">
         <div class="absolute -top-48 -z-10 size-[400px] -rotate-45 rounded-full bg-gradient-to-br from-indigo-300 via-rose-200 to-green-600 opacity-70 blur-3xl lg:size-[500px]"></div>
     </div>
-    <nav class="fixed top-0 z-20 flex w-full justify-end gap-2 border-b border-slate-200/10 bg-slate-950/20 p-4 shadow-2xl backdrop-blur-md">
+    <nav class="fixed top-0 z-20 flex w-full justify-end gap-2 border-b dark:border-slate-200/10 border-slate-900/10 dark:bg-slate-950/20 bg-slate-100/20 p-4 shadow-2xl backdrop-blur-md">
         <a
             href="{{ route('home.feed') }}"
             wire:navigate
         >
-            <x-primary-colorless-button class="flex items-center justify-center gap-2">
+            <x-primary-colorless-button class="flex items-center justify-center gap-2 dark:border-white border-slate-900">
                 <x-heroicon-o-home class="h-4 w-4" />
                 <span class="sr-only sm:not-sr-only">Feed</span>
             </x-primary-colorless-button>
@@ -62,40 +62,40 @@ class="mt-12 max-w-4xl text-center font-mona text-3xl font-light md:text-4xl"
 
         <section class="mt-28 w-full max-w-2xl">
             <div class="grid w-full gap-4 md:grid-cols-2">
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 transition-colors md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 transition-colors md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-bolt class="h-5 w-5" />
                     </div>
 
                     <h3>Create a profile</h3>
-                    <p class="text-slate-400">Choose a username, add a bio, and you're good to go.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Choose a username, add a bio, and you're good to go.</p>
                 </div>
 
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-link class="h-5 w-5" />
                     </div>
 
                     <h3>Share your links</h3>
-                    <p class="text-slate-400">Collect links of your social profiles, your work, and what matters to you.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Collect links of your social profiles, your work, and what matters to you.</p>
                 </div>
 
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-chat-bubble-oval-left class="h-5 w-5" />
                     </div>
 
                     <h3>Ask and answer questions</h3>
-                    <p class="text-slate-400">Engage with the community in an open and friendly way.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Engage with the community in an open and friendly way.</p>
                 </div>
 
-                <div class="rounded-2xl border-t border-slate-800 bg-slate-900 p-4 md:aspect-video">
-                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-950">
+                <div class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
+                    <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
                         <x-heroicon-o-globe-americas class="h-5 w-5" />
                     </div>
 
                     <h3>Discover</h3>
-                    <p class="text-slate-400">keep an eye on the people you admire, and expand your circle.</p>
+                    <p class="dark:text-slate-400 text-slate-500 text-sm">Keep an eye on the people you admire, and expand your circle.</p>
                 </div>
             </div>
         </section>

resources/views/auth/forgot-password.blade.php

@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="mb-4 text-sm text-slate-400">
+    <div class="mb-4 text-sm dark:text-slate-400 text-slate-500">
         {{ __('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>
 

resources/views/auth/login.blade.php

@@ -47,8 +47,8 @@ class="mt-1 block w-full pr-10"
                 />
                 <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                     <button type="button" x-on:click="showPassword = !showPassword">
-                        <x-icons.eye x-show="showPassword" class="size-5 text-gray-400 hover:text-pink-500" />
-                        <x-icons.eye-off x-show="!showPassword" class="size-5 text-gray-400 hover:text-pink-500" />
+                        <x-icons.eye x-show="showPassword" class="size-5 text-slate-400 hover:text-pink-500" />
+                        <x-icons.eye-off x-show="!showPassword" class="size-5 text-slate-400 hover:text-pink-500" />
                     </button>
                 </div>
             </div>
@@ -77,7 +77,7 @@ class="flex items-center"
         <div class="mt-4 flex items-center justify-end space-x-3.5">
             @if (Route::has('password.request'))
                 <a
-                    class="text-sm text-slate-200 underline hover:no-underline"
+                    class="text-sm dark:text-slate-200 text-slate-800 underline hover:no-underline"
                     href="{{ route('password.request') }}"
                     wire:navigate
                 >
@@ -97,7 +97,7 @@ class="text-sm text-slate-200 underline hover:no-underline"
         Don't have an account?
         <a
             href="{{ route('register') }}"
-            class="text-slate-200 underline hover:no-underline"
+            class="dark:text-slate-200 text-slate-800 underline hover:no-underline"
             wire:navigate
         >
             {{ __('Sign up here') }}

resources/views/auth/register.blade.php

@@ -167,7 +167,7 @@ class="mt-2"
                 <span class="text-slate-500">Already have an account?</span>
 
                 <a
-                    class="rounded-md text-sm text-slate-200 underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
+                    class="rounded-md text-sm dark:text-slate-200 text-slate-800 underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
                     href="{{ route('login') }}"
                     wire:navigate
                 >

resources/views/brand/resources.blade.php

@@ -2,15 +2,15 @@
     <div class="mx-auto my-16 max-w-7xl px-6 lg:px-8">
         <a
             href="{{ route('about') }}"
-            class="-mt-10 mb-12 flex items-center text-slate-400 hover:underline"
+            class="-mt-10 mb-12 flex items-center dark:text-slate-400 text-slate-600 hover:underline"
             wire:navigate
         >
             <x-icons.chevron-left class="size-4" />
             <span>Back</span>
         </a>
 
         <div class="mt-6">
-            <div class="prose prose-slate prose-invert mx-auto max-w-4xl">
+            <div class="prose prose-slate dark:prose-invert mx-auto max-w-4xl">
                 <h1>Pinkary Brand</h1>
                 <p><strong>Last Updated: 27 March 2024</strong></p>
 

resources/views/changelog.blade.php

@@ -3,11 +3,11 @@
 
     <div class="flex flex-col items-center justify-center">
         <div class="min-h-screen w-full max-w-md px-2 sm:px-0">
-            <p class="text-slate-400">A changelog of the latest Pinkary feature releases, product updates and important bug fixes.</p>
+            <p class="dark:text-slate-400 text-slate-600">A changelog of the latest Pinkary feature releases, product updates and important bug fixes.</p>
 
             <div class="relative mb-20 mt-12 py-1">
                 <div class="absolute bottom-0 left-0 top-0 hidden w-6 justify-center sm:flex">
-                    <div class="w-px border-r border-dashed border-slate-700"></div>
+                    <div class="w-px border-r border-dashed dark:border-slate-700 border-slate-300"></div>
                 </div>
 
                 <ul
@@ -20,17 +20,17 @@ class="space-y-6 sm:space-y-12"
                                 <div class="size-1.5 rounded-full bg-pink-500 ring-1 ring-pink-500"></div>
                             </div>
 
-                            <div class="relative flex-1 overflow-hidden rounded-xl border border-slate-900">
-                                <header class="flex w-full flex-1 items-center justify-between border-b border-slate-900 px-4 py-3.5 text-slate-200">
+                            <div class="relative flex-1 overflow-hidden rounded-xl border dark:bg-transparent bg-slate-100 dark:border-slate-900 border-slate-200 dark:shadow-none shadow-sm shadow-slate-200">
+                                <header class="flex w-full flex-1 items-center justify-between border-b dark:border-slate-900 border-slate-200 px-4 py-3.5 dark:text-slate-200 text-slate-800">
                                     <h2 class="font-bold">Version {{ $version }}</h2>
                                     <time
                                         datetime="{{ $release['publishedAt'] }}"
-                                        class="flex-none py-0.5 text-xs font-semibold leading-5 text-slate-500"
+                                        class="flex-none py-0.5 text-xs dark:font-semibold leading-5 dark:text-slate-500 text-slate-600"
                                     >
                                         {{ $release['publishedAt'] }}
                                     </time>
                                 </header>
-                                <div class="prose prose-sm prose-invert px-4 py-3.5 prose-h3:text-sm">
+                                <div class="prose prose-sm dark:prose-invert px-4 py-3.5 prose-h3:text-sm">
                                     @if ($release['changes'])
                                         <h3>Improvements & Bug fixes</h3>
                                         <ul>
@@ -42,7 +42,7 @@ class="flex-none py-0.5 text-xs font-semibold leading-5 text-slate-500"
                                 </div>
                                 <div class="absolute -right-[200px] -top-[200px] z-10 transform-gpu opacity-20 blur-3xl">
                                     <div
-                                        class="size-[600px] bg-gradient-to-r from-pink-900 to-pink-500"
+                                        class="size-[600px] bg-gradient-to-r dark:from-pink-900 from-pink-50 dark:to-pink-500 to-pink-200"
                                         style="
                                             clip-path: polygon(
                                                 50% 0%,

resources/views/components/autocomplete/hashtag-item.blade.php

@@ -1,6 +1,6 @@
 @php
     /** @var \App\Services\Autocomplete\Result $result */
 @endphp
-<span class="truncate text-sm font-medium text-slate-50">
+<span class="truncate text-sm font-medium dark:text-slate-50 text-slate-950">
     {{ $result->replacement }}
 </span>

resources/views/components/autocomplete/mention-item.blade.php

@@ -6,7 +6,7 @@
         class="flex items-center gap-3"
     >
         <figure
-            class="{{ $result->payload['isCompanyVerified'] ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800">
+            class="{{ $result->payload['isCompanyVerified'] ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-50">
             <img
                 src="{{ $result->payload['avatarSrc'] }}"
                 alt="{{ $result->payload['username'] }}"
@@ -15,7 +15,7 @@ class="{{ $result->payload['isCompanyVerified'] ? 'rounded-md' : 'rounded-full'
         </figure>
         <div class="overflow-hidden text-sm">
             <div class="flex items-center">
-                <p class="truncate font-medium text-slate-50">
+                <p class="truncate font-medium dark:text-white text-black">
                     {{ $result->payload['name'] }}
                 </p>
 

resources/views/components/avatar-with-name.blade.php

@@ -5,7 +5,7 @@
     class="group flex items-center gap-3 px-4"
     wire:navigate
 >
-    <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 bg-slate-800 transition-opacity group-hover:opacity-90">
+    <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-200 transition-opacity group-hover:opacity-90">
         <img
             src="{{ $user->avatar_url }}"
             alt="{{ $user->username }}"
@@ -15,7 +15,7 @@ class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-1
 
     <div class="overflow-hidden text-sm">
         <div class="flex">
-            <p class="truncate font-medium text-slate-50">
+            <p class="truncate font-medium dark:text-slate-50 text-slate-950">
                 {{ $user->name }}
             </p>
 
@@ -32,7 +32,7 @@ class="ml-1 mt-0.5 h-3.5 w-3.5"
             @endif
         </div>
 
-        <p class="truncate text-slate-500 transition-colors group-hover:text-slate-400">
+        <p class="truncate text-slate-500 transition-colors dark:group-hover:text-slate-400 group-hover:text-slate-600">
             {{ '@'.$user->username }}
         </p>
     </div>

resources/views/components/back-to-top.blade.php

@@ -14,6 +14,6 @@ class="fixed bottom-8 right-8"
         x-on:click="window.scrollTo({ top: 0, behavior: 'smooth' })"
         class="rounded-full bg-pink-500 p-2 shadow-lg"
     >
-        <x-icons.arrow-top width="20" height="20"/>
+        <x-icons.arrow-top class="dark:text-black text-white" width="20" height="20"/>
     </button>
 </div>

resources/views/components/checkbox.blade.php

@@ -1,4 +1,4 @@
 <input
     type="checkbox"
-    {!! $attributes->merge(['class' => 'focus:ring-pink-500 focus:ring-offset-slate-900 size-4.5 text-pink-500 border-slate-800 bg-slate-900 ring-slate-900 rounded cursor-pointer']) !!}
+    {!! $attributes->merge(['class' => 'focus:ring-pink-500 dark:focus:ring-offset-slate-900 focus:ring-offset-slate-200 size-4.5 text-pink-500 dark:border-slate-800 border-slate-200 dark:bg-slate-900 bg-slate-50 dark:ring-slate-900 ring-slate-200 rounded cursor-pointer dark:shadow-none shadow-md']) !!}
 />

resources/views/components/dropdown-button.blade.php

@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-slate-400 hover:bg-slate-800 transition duration-150 ease-in-out']) }}>
+<button {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 dark:text-slate-400 text-slate-600 dark:hover:bg-slate-800 hover:bg-slate-200 transition duration-150 ease-in-out']) }}>
     {{ $slot }}
 </button>

resources/views/components/dropdown-link.blade.php

@@ -1,5 +1,5 @@
 <a
-    {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-slate-400 hover:bg-slate-800 transition duration-150 ease-in-out']) }}
+    {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 dark:text-slate-400 text-slate-600 dark:hover:bg-slate-800 hover:bg-slate-200 transition duration-150 ease-in-out']) }}
     wire:navigate
 >
     {{ $slot }}

resources/views/components/dropdown.blade.php

@@ -1,4 +1,4 @@
-@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'bg-slate-900 py-1 text-slate-500', 'dropdownClasses' => ''])
+@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'dark:bg-slate-900 bg-slate-100 dark:border-none border border-slate-100 py-1 text-slate-500', 'dropdownClasses' => ''])
 
 @php
     switch ($align) {