From 2a63645d3b264545816c19b0071dc2cbffd779f5 Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Wed, 19 Nov 2025 12:52:02 +0100
Subject: [PATCH] Dark mode fixes

---
 resources/forum/blade-tailwind/css/forum.css  | 30 ++++++--
 resources/forum/blade-tailwind/js/forum.js    | 42 +++++++++++
 .../views/category/index.blade.php            |  2 +-
 .../views/category/manage.blade.php           | 18 ++---
 .../views/category/modals/create.blade.php    |  8 +-
 .../views/category/modals/delete.blade.php    | 10 ++-
 .../views/category/modals/edit.blade.php      |  8 +-
 .../modals/mark-threads-as-read.blade.php     |  2 +-
 .../views/category/partials/list.blade.php    | 22 +++---
 .../views/category/show.blade.php             |  8 +-
 .../views/components/badge.blade.php          |  8 +-
 .../views/components/button-link.blade.php    |  2 +-
 .../components/button-secondary.blade.php     |  2 +-
 .../views/components/button.blade.php         |  2 +-
 .../views/components/input.blade.php          |  3 +-
 .../views/components/label.blade.php          |  2 +-
 .../views/components/select.blade.php         |  2 +-
 .../views/components/textarea.blade.php       |  3 +-
 .../views/layouts/main.blade.php              | 40 +++++-----
 .../blade-tailwind/views/modal-form.blade.php | 12 +--
 .../views/partials/alert.blade.php            | 10 +--
 .../partials/breadcrumb-categories.blade.php  |  2 +-
 .../views/partials/breadcrumbs.blade.php      |  6 +-
 .../views/post/confirm-delete.blade.php       | 14 ++--
 .../views/post/confirm-restore.blade.php      | 12 +--
 .../views/post/create.blade.php               |  8 +-
 .../blade-tailwind/views/post/edit.blade.php  |  8 +-
 .../views/post/partials/list.blade.php        | 20 ++---
 .../views/post/partials/quote.blade.php       | 10 ++-
 .../views/thread/create.blade.php             |  4 +-
 .../thread/modals/mark-as-read.blade.php      |  2 +-
 .../views/thread/partials/list.blade.php      | 18 ++---
 .../views/thread/recent.blade.php             |  6 +-
 .../views/thread/show.blade.php               | 74 +++++++++++--------
 .../views/thread/unread.blade.php             |  4 +-
 35 files changed, 255 insertions(+), 169 deletions(-)

diff --git a/resources/forum/blade-tailwind/css/forum.css b/resources/forum/blade-tailwind/css/forum.css
index 6e72d22ce..9f20a3370 100644
--- a/resources/forum/blade-tailwind/css/forum.css
+++ b/resources/forum/blade-tailwind/css/forum.css
@@ -14,22 +14,42 @@
     }
 
     h1 {
-        @apply text-4xl my-6;
+        @apply text-4xl my-6 text-gray-900 dark:text-gray-100;
     }
 
     h2 {
-        @apply text-2xl;
+        @apply text-2xl text-gray-900 dark:text-gray-100;
     }
 
     h3 {
-        @apply text-xl;
+        @apply text-xl text-gray-900 dark:text-gray-100;
     }
 
     a {
-        @apply text-blue-500;
+        @apply text-blue-500 dark:text-blue-400;
     }
 
     a:hover {
-        @apply text-blue-800;
+        @apply text-blue-800 dark:text-blue-300;
+    }
+}
+
+@layer utilities {
+    /* Custom scrollbar for dark mode */
+    .dark ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+    }
+
+    .dark ::-webkit-scrollbar-track {
+        @apply bg-gray-800;
+    }
+
+    .dark ::-webkit-scrollbar-thumb {
+        @apply bg-gray-600 rounded;
+    }
+
+    .dark ::-webkit-scrollbar-thumb:hover {
+        @apply bg-gray-500;
     }
 }
diff --git a/resources/forum/blade-tailwind/js/forum.js b/resources/forum/blade-tailwind/js/forum.js
index 5ef3f53aa..0e6278941 100644
--- a/resources/forum/blade-tailwind/js/forum.js
+++ b/resources/forum/blade-tailwind/js/forum.js
@@ -10,6 +10,44 @@ window.axios = axios;
 window.Vue = { createApp, ref, reactive, watch };
 window.VueDraggable = draggable;
 
+// Initialize dark mode theme from main app settings
+// This runs immediately to prevent flash of wrong theme
+(function() {
+    const metaTheme = document.querySelector('meta[name="theme-preference"]');
+    const isAuthenticated = document.querySelector('meta[name="user-authenticated"]');
+
+    let theme = 'light';
+
+    if (isAuthenticated && isAuthenticated.content === 'true' && metaTheme) {
+        // Use authenticated user's preference from database
+        theme = metaTheme.content;
+    } else {
+        // Use localStorage for guests (same key as main app)
+        theme = localStorage.getItem('theme') || 'light';
+    }
+
+    // Apply the theme
+    if (theme === 'system') {
+        // Use OS preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
+    } else if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+    }
+
+    // Listen for OS theme changes when in system mode
+    if (theme === 'system') {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (e.matches) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        });
+    }
+})();
+
 document.addEventListener('DOMContentLoaded', function () {
     createApp({
         setup() {
@@ -85,6 +123,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
     feather.replace();
 
+    // Get default category color from meta tag if available
+    const defaultColorMeta = document.querySelector('meta[name="default-category-color"]');
+    window.defaultCategoryColor = defaultColorMeta ? defaultColorMeta.content : '#3490dc';
+
     const input = document.querySelector('input[name=color_light_mode]');
 
     if (!input) return;
diff --git a/resources/forum/blade-tailwind/views/category/index.blade.php b/resources/forum/blade-tailwind/views/category/index.blade.php
index 93eeb6de4..d842689d6 100644
--- a/resources/forum/blade-tailwind/views/category/index.blade.php
+++ b/resources/forum/blade-tailwind/views/category/index.blade.php
@@ -3,7 +3,7 @@
 
 @section ('content')
     <div class="flex flex-row justify-between my-3">
-        <h2 class="grow text-3xl font-medium">{{ trans('forum::general.index') }}</h2>
+        <h2 class="grow text-3xl font-medium text-gray-900 dark:text-gray-100">{{ trans('forum::general.index') }}</h2>
 
         @can ('createCategories')
             <x-forum::button type="button" data-open-modal="create-category">
diff --git a/resources/forum/blade-tailwind/views/category/manage.blade.php b/resources/forum/blade-tailwind/views/category/manage.blade.php
index 6a119a1b4..4986e9555 100644
--- a/resources/forum/blade-tailwind/views/category/manage.blade.php
+++ b/resources/forum/blade-tailwind/views/category/manage.blade.php
@@ -2,7 +2,7 @@
 
 @section ('content')
     <div class="flex flex-row justify-between mb-2">
-        <h2 class="text-3xl font-medium my-3">{{ trans('forum::general.manage') }}</h2>
+        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::general.manage') }}</h2>
 
         @can ('createCategories')
             <x-forum::button type="button" data-open-modal="create-category" class="px-6">
@@ -17,13 +17,13 @@
         <draggable-category-list :categories="state.categories"></draggable-category-list>
 
         <transition name="fade">
-            <div v-show="state.changesApplied" class="bg-green-100 mb-4 text-green-700 mt-3 px-4 py-3" role="alert">
+            <div v-show="state.changesApplied" class="bg-green-100 dark:bg-green-900/30 mb-4 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800 mt-3 px-4 py-3 rounded transition-colors" role="alert">
                 {{ trans('forum::general.changes_applied') }}
             </div>
         </transition>
 
         <div class="flex justify-end py-3">
-            <button type="button" class="bg-blue-500 text-white rounded py-2 px-8 hover:cursor-pointer disabled:opacity-50" :disabled="state.isSavingDisabled" @click="onSave">
+            <button type="button" class="bg-blue-500 dark:bg-blue-600 text-white rounded py-2 px-8 hover:cursor-pointer hover:bg-blue-400 dark:hover:bg-blue-500 disabled:opacity-50 transition-colors" :disabled="state.isSavingDisabled" @click="onSave">
                 {{ trans('forum::general.save') }}
             </button>
         </div>
@@ -40,19 +40,19 @@
             :empty-insert-threshold="50"
             item-key="id">
             <template #item="{element}">
-                <li class="bg-white p-4 my-2 rounded-md border" :data-id="element.id">
+                <li class="bg-white dark:bg-gray-800 p-4 my-2 rounded-md border dark:border-gray-700 transition-colors" :data-id="element.id">
                     <span class="flex">
                         <span class="grow">
-                            <strong :style="{ color: element.color }">@{{ element.title }}</strong>
-                            <div class="text-muted">@{{ element.description }}</div>
+                            <strong class="text-gray-900 dark:text-gray-100">@{{ element.title }}</strong>
+                            <div class="text-muted text-gray-500 dark:text-gray-400">@{{ element.description }}</div>
                         </span>
                         <span>
-                            <a class="text-blue-500 hover:text-blue-800 px-3 py-2 text-sm ml-2" :href="element.route + '#modal=edit-category'">{{ trans('forum::general.edit') }}</a>
-                            <a class="bg-red-500 hover:bg-red-400 text-white hover:text-white px-3 py-2 text-sm rounded ml-2" :href="element.route + '#modal=delete-category'">{{ trans('forum::general.delete') }}</a>
+                            <a class="text-blue-500 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 px-3 py-2 text-sm ml-2 transition-colors" :href="element.route + '#modal=edit-category'">{{ trans('forum::general.edit') }}</a>
+                            <a class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500 text-white hover:text-white px-3 py-2 text-sm rounded ml-2 transition-colors" :href="element.route + '#modal=delete-category'">{{ trans('forum::general.delete') }}</a>
                         </span>
                     </span>
 
-                    <span v-if="element.children.length == 0" class="block min-h-5 border border-dashed border-slate-400 rounded">
+                    <span v-if="element.children.length == 0" class="block min-h-5 border border-dashed border-slate-400 dark:border-slate-600 rounded">
                         <draggable-category-list :categories="element.children" />
                     </span>
                     <draggable-category-list v-else :categories="element.children" />
diff --git a/resources/forum/blade-tailwind/views/category/modals/create.blade.php b/resources/forum/blade-tailwind/views/category/modals/create.blade.php
index 6d8301610..a271eb43c 100644
--- a/resources/forum/blade-tailwind/views/category/modals/create.blade.php
+++ b/resources/forum/blade-tailwind/views/category/modals/create.blade.php
@@ -13,14 +13,14 @@
     </div>
     <div class="mb-3">
         <div class="form-check">
-            <input class="form-check-input" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ old('accepts_threads') ? 'checked' : '' }}>
-            <label class="form-check-label" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
+            <input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ old('accepts_threads') ? 'checked' : '' }}>
+            <label class="form-check-label text-gray-700 dark:text-gray-300" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
         </div>
     </div>
     <div class="mb-3">
         <div>
-            <input type="checkbox" name="is_private" id="is-private" value="1" {{ old('is_private') ? 'checked' : '' }}>
-            <label for="is-private">{{ trans('forum::categories.make_private') }}</label>
+            <input type="checkbox" name="is_private" id="is-private" value="1" class="rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" {{ old('is_private') ? 'checked' : '' }}>
+            <label for="is-private" class="text-gray-700 dark:text-gray-300">{{ trans('forum::categories.make_private') }}</label>
         </div>
     </div>
     @include ('forum::category.partials.inputs.color')
diff --git a/resources/forum/blade-tailwind/views/category/modals/delete.blade.php b/resources/forum/blade-tailwind/views/category/modals/delete.blade.php
index e313edb40..0dc86a10e 100644
--- a/resources/forum/blade-tailwind/views/category/modals/delete.blade.php
+++ b/resources/forum/blade-tailwind/views/category/modals/delete.blade.php
@@ -4,18 +4,20 @@
     @slot('route', Forum::route('category.delete', $category))
     @slot('method', 'DELETE')
 
-    {{ trans('forum::general.generic_confirm') }}
+    <div class="text-gray-900 dark:text-gray-100">
+        {{ trans('forum::general.generic_confirm') }}
+    </div>
 
     @if(!$category->isEmpty())
         <div class="form-check mt-3">
-            <input class="form-check-input" type="checkbox" value="1" name="force" id="forceDelete">
-            <label class="form-check-label" for="forceDelete">
+            <input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" value="1" name="force" id="forceDelete">
+            <label class="form-check-label text-gray-700 dark:text-gray-300" for="forceDelete">
                 {{ trans('forum::categories.confirm_nonempty_delete') }}
             </label>
         </div>
     @endif
 
     @slot('actions')
-        <x-forum::button type="submit" class="bg-red-500 hover:bg-red-400">{{ trans('forum::general.delete') }}</x-forum::button>
+        <x-forum::button type="submit" class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500">{{ trans('forum::general.delete') }}</x-forum::button>
     @endslot
 @endcomponent
diff --git a/resources/forum/blade-tailwind/views/category/modals/edit.blade.php b/resources/forum/blade-tailwind/views/category/modals/edit.blade.php
index c5a6ce3a0..2ca03e5a1 100644
--- a/resources/forum/blade-tailwind/views/category/modals/edit.blade.php
+++ b/resources/forum/blade-tailwind/views/category/modals/edit.blade.php
@@ -15,15 +15,15 @@
     <div class="mb-3">
         <div class="form-check">
             <input type="hidden" name="accepts_threads" value="0" />
-            <input class="form-check-input" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ $category->accepts_threads ? 'checked' : '' }}>
-            <label class="form-check-label" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
+            <input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ $category->accepts_threads ? 'checked' : '' }}>
+            <label class="form-check-label text-gray-700 dark:text-gray-300" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
         </div>
     </div>
     <div class="mb-3">
         <div class="form-check">
             <input type="hidden" name="is_private" value="0" />
-            <input class="form-check-input" type="checkbox" name="is_private" id="is-private" value="1" {{ $category->is_private ? 'checked' : '' }} {{ $privateAncestor != null ? 'disabled' : '' }}>
-            <label class="form-check-label" for="is-private">{{ trans('forum::categories.make_private') }}</label>
+            <input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="is_private" id="is-private" value="1" {{ $category->is_private ? 'checked' : '' }} {{ $privateAncestor != null ? 'disabled' : '' }}>
+            <label class="form-check-label text-gray-700 dark:text-gray-300" for="is-private">{{ trans('forum::categories.make_private') }}</label>
         </div>
     </div>
     @if ($privateAncestor != null)
diff --git a/resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php b/resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php
index b2fc42d07..cb95bb7fb 100644
--- a/resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php
+++ b/resources/forum/blade-tailwind/views/category/modals/mark-threads-as-read.blade.php
@@ -6,7 +6,7 @@
 
     <input type="hidden" name="category_id" value="{{ $category->id }}" />
 
-    <p>{{ trans('forum::general.generic_confirm') }}</p>
+    <p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
 
     @slot('actions')
         <x-forum::button type="submit">
diff --git a/resources/forum/blade-tailwind/views/category/partials/list.blade.php b/resources/forum/blade-tailwind/views/category/partials/list.blade.php
index b92a05463..402d7361c 100644
--- a/resources/forum/blade-tailwind/views/category/partials/list.blade.php
+++ b/resources/forum/blade-tailwind/views/category/partials/list.blade.php
@@ -1,11 +1,11 @@
 <div class="my-4">
-    <div class="bg-white shadow rounded-md relative">
+    <div class="bg-white dark:bg-gray-800 shadow rounded-md relative transition-colors">
         <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
             <div class="md:w-3/6 text-center md:text-left">
                 <h5 class="text-lg">
-                    <a href="{{ Forum::route('category.show', $category) }}" style="color: {{ $category->color_light_mode }};">{{ $category->title }}</a>
+                    <a href="{{ Forum::route('category.show', $category) }}" style="color: {{ $category->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $category->title }}</a>
                 </h5>
-                <p class="text-gray-500">{{ $category->description }}</p>
+                <p class="text-gray-500 dark:text-gray-400">{{ $category->description }}</p>
             </div>
             <div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
                 @if ($category->accepts_threads)
@@ -17,17 +17,17 @@
                     </x-forum::badge>
                 @endif
             </div>
-            <div class="md:w-2/6 text-gray-500 text-center md:text-right mt-2 md:mt-0">
+            <div class="md:w-2/6 text-gray-500 dark:text-gray-400 text-center md:text-right mt-2 md:mt-0">
                 @if ($category->accepts_threads)
                     @if ($category->newestThread)
                         <div>
-                            <a href="{{ Forum::route('thread.show', $category->newestThread) }}" class="mr-1">{{ $category->newestThread->title }}</a>
+                            <a href="{{ Forum::route('thread.show', $category->newestThread) }}" class="mr-1 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $category->newestThread->title }}</a>
                             @include ('forum::partials.timestamp', ['carbon' => $category->newestThread->created_at])
                         </div>
                     @endif
                     @if ($category->latestActiveThread && $category->latestActiveThread->post_count > 1)
                         <div>
-                            <a href="{{ Forum::route('thread.show', $category->latestActiveThread->lastPost) }}" class="mr-1">Re: {{ $category->latestActiveThread->title }}</a>
+                            <a href="{{ Forum::route('thread.show', $category->latestActiveThread->lastPost) }}" class="mr-1 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">Re: {{ $category->latestActiveThread->title }}</a>
                             @include ('forum::partials.timestamp', ['carbon' => $category->latestActiveThread->lastPost->created_at])
                         </div>
                     @endif
@@ -39,11 +39,11 @@
     @if ($category->children->count() > 0)
         <div class="subcategories">
             @foreach ($category->children as $subcategory)
-                <div class="bg-white -mt-1 shadow rounded-b-md">
+                <div class="bg-white dark:bg-gray-800 -mt-1 shadow rounded-b-md transition-colors">
                     <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
                         <div class="md:w-3/6 text-center md:text-left">
-                            <a href="{{ Forum::route('category.show', $subcategory) }}" style="color: {{ $subcategory->color_light_mode }};">{{ $subcategory->title }}</a>
-                            <div class="text-muted">{{ $subcategory->description }}</div>
+                            <a href="{{ Forum::route('category.show', $subcategory) }}" style="color: {{ $subcategory->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $subcategory->title }}</a>
+                            <div class="text-muted text-gray-500 dark:text-gray-400">{{ $subcategory->description }}</div>
                         </div>
                         <div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
                             <x-forum::badge style="background: {{ $subcategory->color_light_mode }};">
@@ -53,10 +53,10 @@
                                 {{ trans_choice('forum::posts.post', 2) }}: {{ $subcategory->post_count }}
                             </x-forum::badge>
                         </div>
-                        <div class="md:w-2/6 text-gray-500 md:items-end text-center md:text-right mt-2 md:mt-0">
+                        <div class="md:w-2/6 text-gray-500 dark:text-gray-400 md:items-end text-center md:text-right mt-2 md:mt-0">
                             @if ($subcategory->newestThread)
                                 <div>
-                                    <a href="{{ Forum::route('thread.show', $subcategory->newestThread) }}" class="mr-1">{{ $subcategory->newestThread->title }}</a>
+                                    <a href="{{ Forum::route('thread.show', $subcategory->newestThread) }}" class="mr-1 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $subcategory->newestThread->title }}</a>
                                     @include ('forum::partials.timestamp', ['carbon' => $subcategory->newestThread->created_at])
                                 </div>
                             @endif
diff --git a/resources/forum/blade-tailwind/views/category/show.blade.php b/resources/forum/blade-tailwind/views/category/show.blade.php
index e8f5591a7..aedd79a39 100644
--- a/resources/forum/blade-tailwind/views/category/show.blade.php
+++ b/resources/forum/blade-tailwind/views/category/show.blade.php
@@ -3,10 +3,10 @@
 
 @section('content')
     <div class="flex flex-row justify-between mb-2">
-        <h2 class="text-3xl" style="color: {{ $category->color_light_mode }};">
+        <h2 class="text-3xl text-gray-900 dark:text-gray-100" style="color: {{ $category->color_light_mode }};">
             {{ $category->title }} &nbsp;
             @if ($category->description)
-                <small>{{ $category->description }}</small>
+                <small class="text-gray-600 dark:text-gray-400">{{ $category->description }}</small>
             @endif
         </h2>
     </div>
@@ -50,10 +50,10 @@
 
                             <div class="text-end mt-2">
                                 <div class="form-check">
-                                    <label for="selectAllThreads">
+                                    <label for="selectAllThreads" class="text-gray-700 dark:text-gray-300">
                                         {{ trans('forum::threads.select_all') }}
                                     </label>
-                                    <input type="checkbox" value="" id="selectAllThreads" class="align-middle" @click="toggleAll" :checked="state.selectedThreads.length == selectableThreadIds.length">
+                                    <input type="checkbox" value="" id="selectAllThreads" class="align-middle rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" @click="toggleAll" :checked="state.selectedThreads.length == selectableThreadIds.length">
                                 </div>
                             </div>
                     @endcan
diff --git a/resources/forum/blade-tailwind/views/components/badge.blade.php b/resources/forum/blade-tailwind/views/components/badge.blade.php
index 652c1cc0b..ed44d67f9 100644
--- a/resources/forum/blade-tailwind/views/components/badge.blade.php
+++ b/resources/forum/blade-tailwind/views/components/badge.blade.php
@@ -5,19 +5,19 @@
 @php
 switch($type) {
     case('info'):
-        $color = 'bg-blue-500';
+        $color = 'bg-blue-500 dark:bg-blue-600';
         break;
 
     case('danger'):
-        $color = 'bg-red-500';
+        $color = 'bg-red-500 dark:bg-red-600';
         break;
 
     case('warning'):
-        $color = 'bg-orange-500';
+        $color = 'bg-orange-500 dark:bg-orange-600';
         break;
 
     default:
-        $color = 'bg-gray-400';
+        $color = 'bg-gray-400 dark:bg-gray-500';
         break;
 }
 @endphp
diff --git a/resources/forum/blade-tailwind/views/components/button-link.blade.php b/resources/forum/blade-tailwind/views/components/button-link.blade.php
index 6968d4e44..e0ffad013 100644
--- a/resources/forum/blade-tailwind/views/components/button-link.blade.php
+++ b/resources/forum/blade-tailwind/views/components/button-link.blade.php
@@ -1,3 +1,3 @@
-<a {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 text-white font-semibold hover:text-white px-3 py-2 rounded-md inline-block']) }}>
+<a {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold hover:text-white px-3 py-2 rounded-md inline-block transition-colors']) }}>
     {{ $slot }}
 </a>
diff --git a/resources/forum/blade-tailwind/views/components/button-secondary.blade.php b/resources/forum/blade-tailwind/views/components/button-secondary.blade.php
index 519f991fa..1fd7c4acb 100644
--- a/resources/forum/blade-tailwind/views/components/button-secondary.blade.php
+++ b/resources/forum/blade-tailwind/views/components/button-secondary.blade.php
@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['class' => 'bg-gray-300 hover:bg-gray-200 text-gray-600 font-semibold px-3 py-2 rounded-md inline-block']) }}>
+<button {{ $attributes->merge(['class' => 'bg-gray-300 hover:bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-600 dark:text-gray-200 font-semibold px-3 py-2 rounded-md inline-block transition-colors']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/forum/blade-tailwind/views/components/button.blade.php b/resources/forum/blade-tailwind/views/components/button.blade.php
index afccd7b4e..329a65a40 100644
--- a/resources/forum/blade-tailwind/views/components/button.blade.php
+++ b/resources/forum/blade-tailwind/views/components/button.blade.php
@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 text-white font-semibold px-3 py-2 rounded-md inline-block']) }}>
+<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold px-3 py-2 rounded-md inline-block transition-colors']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/forum/blade-tailwind/views/components/input.blade.php b/resources/forum/blade-tailwind/views/components/input.blade.php
index 2e221f669..7add35d87 100644
--- a/resources/forum/blade-tailwind/views/components/input.blade.php
+++ b/resources/forum/blade-tailwind/views/components/input.blade.php
@@ -1 +1,2 @@
-<input {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500 rounded-md border shadow-sm']) }}>
+<input {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 rounded-md border shadow-sm transition-colors']) }}>
+
diff --git a/resources/forum/blade-tailwind/views/components/label.blade.php b/resources/forum/blade-tailwind/views/components/label.blade.php
index 4d9a6b565..a60e2f14a 100644
--- a/resources/forum/blade-tailwind/views/components/label.blade.php
+++ b/resources/forum/blade-tailwind/views/components/label.blade.php
@@ -1,3 +1,3 @@
-<label {{ $attributes->merge(['class' => 'block w-full mb-1']) }}>
+<label {{ $attributes->merge(['class' => 'block w-full mb-1 text-gray-700 dark:text-gray-300']) }}>
     {{ $slot }}
 </label>
diff --git a/resources/forum/blade-tailwind/views/components/select.blade.php b/resources/forum/blade-tailwind/views/components/select.blade.php
index 2df5e15da..501bdc1ca 100644
--- a/resources/forum/blade-tailwind/views/components/select.blade.php
+++ b/resources/forum/blade-tailwind/views/components/select.blade.php
@@ -1,5 +1,5 @@
 <div class="inline-block relative w-64">
-    <select {{ $attributes->merge(['class' => 'block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline']) }}>
+    <select {{ $attributes->merge(['class' => 'block appearance-none w-full bg-white dark:bg-gray-800 border border-gray-400 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-500 text-gray-900 dark:text-gray-100 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline transition-colors']) }}>
         {{ $slot }}
     </select>
 </div>
diff --git a/resources/forum/blade-tailwind/views/components/textarea.blade.php b/resources/forum/blade-tailwind/views/components/textarea.blade.php
index 01483e3bd..075276303 100644
--- a/resources/forum/blade-tailwind/views/components/textarea.blade.php
+++ b/resources/forum/blade-tailwind/views/components/textarea.blade.php
@@ -1 +1,2 @@
-<textarea {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500 rounded-md border shadow-sm']) }}>{{ $slot }}</textarea>
+<textarea {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 rounded-md border shadow-sm transition-colors']) }}>{{ $slot }}</textarea>
+
diff --git a/resources/forum/blade-tailwind/views/layouts/main.blade.php b/resources/forum/blade-tailwind/views/layouts/main.blade.php
index 82e34d8fd..ac5768c35 100644
--- a/resources/forum/blade-tailwind/views/layouts/main.blade.php
+++ b/resources/forum/blade-tailwind/views/layouts/main.blade.php
@@ -3,6 +3,14 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    @auth
+        <meta name="user-authenticated" content="true">
+        <meta name="theme-preference" content="{{ auth()->user()->theme_preference ?? 'light' }}">
+    @else
+        <meta name="user-authenticated" content="false">
+    @endauth
+    <meta name="default-category-color" content="{{ config('forum.frontend.default_category_color') }}">
 
     <title>
         @if (isset($thread_title))
@@ -16,12 +24,12 @@
 
     @vite(['resources/forum/blade-tailwind/css/forum.css', 'resources/forum/blade-tailwind/js/forum.js'])
 </head>
-<body class="forum bg-gray-100">
-    <nav class="v-navbar bg-white shadow py-4">
+<body class="forum bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
+    <nav class="v-navbar bg-white dark:bg-gray-800 shadow py-4 transition-colors duration-200">
         <div class="container mx-auto px-4 md:flex md:items-center md:gap-4">
             <div class="flex justify-between items-center">
-                <a class="text-lg font-semibold" href="{{ url(config('forum.frontend.router.prefix')) }}">Laravel Forum</a>
-                <button class="navbar-toggler block md:hidden border rounded-md px-2 py-1" type="button" :class="{ collapsed: isCollapsed }" @click="isCollapsed = !isCollapsed">
+                <a class="text-lg font-semibold text-gray-900 dark:text-white" href="{{ url(config('forum.frontend.router.prefix')) }}">Laravel Forum</a>
+                <button class="navbar-toggler block md:hidden border rounded-md px-2 py-1 text-gray-700 dark:text-gray-300 dark:border-gray-600" type="button" :class="{ collapsed: isCollapsed }" @click="isCollapsed = !isCollapsed">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="navbar-toggler-icon w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                     </svg>
@@ -30,37 +38,37 @@
             <div class="grow justify-between navbar-collapse" :class="{ 'flex flex-col': !isCollapsed, 'hidden md:flex': isCollapsed }">
                 <ul class="flex flex-col md:flex-row gap-3 mb-4 md:mb-0">
                     <li>
-                        <a class="text-gray-500 hover:text-gray-800" href="{{ route('home') }}">Home</a>
+                        <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('home') }}">Home</a>
                     </li>
                     <li>
-                        <a class="text-gray-500 hover:text-gray-800" href="{{ url(config('forum.frontend.router.prefix')) }}">{{ trans('forum::general.index') }}</a>
+                        <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url(config('forum.frontend.router.prefix')) }}">{{ trans('forum::general.index') }}</a>
                     </li>
                     <li>
-                        <a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.recent') }}">{{ trans('forum::threads.recent') }}</a>
+                        <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.recent') }}">{{ trans('forum::threads.recent') }}</a>
                     </li>
                     @auth
                         <li>
-                            <a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.unread') }}">{{ trans('forum::threads.unread_updated') }}</a>
+                            <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.unread') }}">{{ trans('forum::threads.unread_updated') }}</a>
                         </li>
                     @endauth
                     @can ('moveCategories')
                         <li>
-                            <a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.category.manage') }}">{{ trans('forum::general.manage') }}</a>
+                            <a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.category.manage') }}">{{ trans('forum::general.manage') }}</a>
                         </li>
                     @endcan
                 </ul>
                 <ul class="navbar-nav flex gap-4 flex-col md:flex-row">
                     @if (Auth::check())
                         <li class="nav-item dropdown relative">
-                            <a class="dropdown-toggle text-gray-500 flex items-center gap-1" href="#" id="navbarDropdownMenuLink" @click="isUserDropdownCollapsed = !isUserDropdownCollapsed">
+                            <a class="dropdown-toggle text-gray-500 dark:text-gray-400 flex items-center gap-1 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="#" id="navbarDropdownMenuLink" @click="isUserDropdownCollapsed = !isUserDropdownCollapsed">
                                 {{ $username }}
 
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                 </svg>
                             </a>
-                            <div class="border absolute left-0 bg-white rounded-md w-44 divide-y" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="navbarDropdownMenuLink">
-                                <a class="block px-4 py-2" href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                            <div class="border dark:border-gray-600 absolute left-0 bg-white dark:bg-gray-800 rounded-md w-44 divide-y dark:divide-gray-600 shadow-lg" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="navbarDropdownMenuLink">
+                                <a class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                     Log out
                                 </a>
                                 <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
@@ -70,10 +78,10 @@
                         </li>
                     @else
                         <li class="nav-item">
-                            <a class="nav-link" href="{{ url('/login') }}">Log in</a>
+                            <a class="nav-link text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url('/login') }}">Log in</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="{{ url('/register') }}">Register</a>
+                            <a class="nav-link text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url('/register') }}">Register</a>
                         </li>
                     @endif
                 </ul>
@@ -89,9 +97,5 @@
     </div>
 
     @yield('footer')
-
-    <script>
-        window.defaultCategoryColor = '{{ config('forum.frontend.default_category_color') }}';
-    </script>
 </body>
 </html>
diff --git a/resources/forum/blade-tailwind/views/modal-form.blade.php b/resources/forum/blade-tailwind/views/modal-form.blade.php
index 35d368f2c..ae17560e2 100644
--- a/resources/forum/blade-tailwind/views/modal-form.blade.php
+++ b/resources/forum/blade-tailwind/views/modal-form.blade.php
@@ -1,10 +1,10 @@
 <div tabindex="-1" role="dialog" data-modal="{{ $key }}" class="fixed top-0 left-0 w-full h-full hidden z-10 items-center justify-center">
-    <div class="fixed top-0 left-0 w-full h-full bg-black/25" data-close-modal></div>
-    <div class="relative bg-white rounded-md max-w-screen-sm w-full m-2" role="document">
+    <div class="fixed top-0 left-0 w-full h-full bg-black/25 dark:bg-black/50" data-close-modal></div>
+    <div class="relative bg-white dark:bg-gray-800 rounded-md max-w-screen-sm w-full m-2 transition-colors" role="document">
         <div class="">
-            <div class="border-b px-6 py-4 flex justify-between">
-                <h5 class="text-xl font-medium flex items-center gap-1">{!!$title !!}</h5>
-                <button type="button" aria-label="Close" data-close-modal>
+            <div class="border-b dark:border-gray-700 px-6 py-4 flex justify-between">
+                <h5 class="text-xl font-medium flex items-center gap-1 text-gray-900 dark:text-gray-100">{!!$title !!}</h5>
+                <button type="button" aria-label="Close" data-close-modal class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                     </svg>
@@ -20,7 +20,7 @@
                     {{ $slot }}
                 </div>
 
-                <div class="border-t px-6 py-4 flex justify-end gap-4">
+                <div class="border-t dark:border-gray-700 px-6 py-4 flex justify-end gap-4">
                     <x-forum::button-secondary type="button" class="btn btn-secondary" data-close-modal>{{ trans('forum::general.cancel') }}</x-forum::button-secondary>
                     {{ $actions }}
                 </div>
diff --git a/resources/forum/blade-tailwind/views/partials/alert.blade.php b/resources/forum/blade-tailwind/views/partials/alert.blade.php
index e3c1b5dee..e8fb4b3bc 100644
--- a/resources/forum/blade-tailwind/views/partials/alert.blade.php
+++ b/resources/forum/blade-tailwind/views/partials/alert.blade.php
@@ -1,16 +1,16 @@
 @php
 $colorClasses = match ($type) {
-    'primary', '', null => 'bg-blue-100 text-blue-700',
-    'success', '', null => 'bg-green-100 text-green-700',
-    'danger' => 'bg-orange-100 text-orange-700'
+    'primary', '', null => 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800',
+    'success', '', null => 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800',
+    'danger' => 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border border-orange-200 dark:border-orange-800'
 };
 @endphp
 
-<div class="alert alert-{{ $type }} alert-dismissable rounded-md my-4 p-4 flex justify-between gap-4 {{ $colorClasses }}">
+<div class="alert alert-{{ $type }} alert-dismissable rounded-md my-4 p-4 flex justify-between gap-4 {{ $colorClasses }} transition-colors">
     <div class="message">
         {!! $message !!}
     </div>
-    <button type="button" data-dismiss="alert" aria-hidden="true">
+    <button type="button" data-dismiss="alert" aria-hidden="true" class="hover:opacity-70 transition-opacity">
         <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
         </svg>
diff --git a/resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php b/resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php
index 521e55241..5ea64fe7f 100644
--- a/resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php
+++ b/resources/forum/blade-tailwind/views/partials/breadcrumb-categories.blade.php
@@ -1,4 +1,4 @@
 @if ($category->parent !== null)
     @include ('forum::partials.breadcrumb-categories', ['category' => $category->parent])
 @endif
-<li class=""><a href="{{ Forum::route('category.show', $category) }}" class="text-blue-500">{{ $category->title }}</a></li>
+<li class=""><a href="{{ Forum::route('category.show', $category) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $category->title }}</a></li>
diff --git a/resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php b/resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php
index b60634275..bf6d86319 100644
--- a/resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php
+++ b/resources/forum/blade-tailwind/views/partials/breadcrumbs.blade.php
@@ -1,11 +1,11 @@
 <nav aria-label="breadcrumb" class="mb-4">
-    <ol class="flex flex-wrap [&_li]:after:content-['/'] [&_li]:after:px-2 [&_li]:after:text-gray-500 [&_li:last-child]:after:content-['']">
-        <li class=""><a href="{{ url(config('forum.frontend.router.prefix')) }}" class="text-blue-500">{{ trans('forum::general.index') }}</a></li>
+    <ol class="flex flex-wrap [&_li]:after:content-['/'] [&_li]:after:px-2 [&_li]:after:text-gray-500 dark:[&_li]:after:text-gray-400 [&_li:last-child]:after:content-[''] text-gray-700 dark:text-gray-300">
+        <li class=""><a href="{{ url(config('forum.frontend.router.prefix')) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::general.index') }}</a></li>
         @if (isset($category) && $category)
             @include ('forum::partials.breadcrumb-categories', ['category' => $category])
         @endif
         @if (isset($thread) && $thread)
-            <li class=""><a href="{{ Forum::route('thread.show', $thread) }}" class="text-blue-500">{{ $thread->title }}</a></li>
+            <li class=""><a href="{{ Forum::route('thread.show', $thread) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $thread->title }}</a></li>
         @endif
         @if (isset($breadcrumbs_append) && count($breadcrumbs_append) > 0)
             @foreach ($breadcrumbs_append as $breadcrumb)
diff --git a/resources/forum/blade-tailwind/views/post/confirm-delete.blade.php b/resources/forum/blade-tailwind/views/post/confirm-delete.blade.php
index ae71f083f..739ccd7a9 100644
--- a/resources/forum/blade-tailwind/views/post/confirm-delete.blade.php
+++ b/resources/forum/blade-tailwind/views/post/confirm-delete.blade.php
@@ -2,9 +2,9 @@
 
 @section ('content')
     <div id="delete-post">
-        <h2 class="text-3xl">{{ trans_choice('forum::posts.delete', 1) }}</h2>
+        <h2 class="text-3xl text-gray-900 dark:text-gray-100">{{ trans_choice('forum::posts.delete', 1) }}</h2>
 
-        <hr>
+        <hr class="border-gray-300 dark:border-gray-700">
 
         @include ('forum::post.partials.list', ['post' => $post, 'single' => true])
 
@@ -12,13 +12,13 @@
             @csrf
             @method('DELETE')
 
-            <div class="bg-white border rounded-md mb-3">
-                <div class="p-4">
+            <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md mb-3 transition-colors">
+                <div class="p-4 text-gray-900 dark:text-gray-100">
 
                     @if (config('forum.general.soft_deletes'))
                         <div class="form-check" v-if="state.selectedPostAction == 'delete'">
-                            <input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
-                            <label class="form-check-label" for="permadelete">
+                            <input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="permadelete" value="1" id="permadelete">
+                            <label class="form-check-label text-gray-700 dark:text-gray-300" for="permadelete">
                                 {{ trans('forum::general.perma_delete') }}
                             </label>
                         </div>
@@ -30,7 +30,7 @@
 
             <div class="flex justify-end items-center gap-2">
                 <x-forum::button-link href="{{ URL::previous() }}">{{ trans('forum::general.cancel') }}</x-forum::button-link>
-                <x-forum::button type="submit" class="bg-red-500 px-5">{{ trans('forum::general.delete') }}</x-forum::button>
+                <x-forum::button type="submit" class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500 px-5">{{ trans('forum::general.delete') }}</x-forum::button>
             </div>
         </form>
     </div>
diff --git a/resources/forum/blade-tailwind/views/post/confirm-restore.blade.php b/resources/forum/blade-tailwind/views/post/confirm-restore.blade.php
index 66d4deb9c..c45c699d1 100644
--- a/resources/forum/blade-tailwind/views/post/confirm-restore.blade.php
+++ b/resources/forum/blade-tailwind/views/post/confirm-restore.blade.php
@@ -2,9 +2,9 @@
 
 @section ('content')
     <div id="delete-post">
-        <h2 class="flex-grow-1">{{ trans_choice('forum::posts.restore', 1) }}</h2>
+        <h2 class="flex-grow-1 text-3xl text-gray-900 dark:text-gray-100">{{ trans_choice('forum::posts.restore', 1) }}</h2>
 
-        <hr>
+        <hr class="border-gray-300 dark:border-gray-700">
 
         @include ('forum::post.partials.list', ['post' => $post, 'single' => true])
 
@@ -12,14 +12,14 @@
             @csrf
             @method('POST')
 
-            <div class="card mb-3">
-                <div class="card-body">
+            <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md mb-3 transition-colors">
+                <div class="p-4 text-gray-900 dark:text-gray-100">
                     {{ trans('forum::general.generic_confirm') }}
                 </div>
             </div>
 
-            <div class="text-end">
-                <a href="{{ URL::previous() }}" class="btn btn-link">{{ trans('forum::general.cancel') }}</a>
+            <div class="flex justify-end items-center gap-2">
+                <x-forum::button-link href="{{ URL::previous() }}" class="text-blue-500 dark:text-blue-400">{{ trans('forum::general.cancel') }}</x-forum::button-link>
                 <x-forum::button type="submit" class="px-5">
                     {{ trans('forum::general.restore') }}
                 </x-forum::button>
diff --git a/resources/forum/blade-tailwind/views/post/create.blade.php b/resources/forum/blade-tailwind/views/post/create.blade.php
index 46bd4e78a..6e773a317 100644
--- a/resources/forum/blade-tailwind/views/post/create.blade.php
+++ b/resources/forum/blade-tailwind/views/post/create.blade.php
@@ -2,15 +2,15 @@
 
 @section ('content')
     <div id="create-post">
-        <h2 class="text-3xl font-medium my-3">{{ trans('forum::general.new_reply') }} ({{ $thread->title }})</h2>
+        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::general.new_reply') }} ({{ $thread->title }})</h2>
 
         @if ($post !== null && !$post->trashed())
-            <div class="mb-2">{{ trans('forum::general.replying_to', ['item' => $post->authorName]) }}:</div>
+            <div class="mb-2 text-gray-700 dark:text-gray-300">{{ trans('forum::general.replying_to', ['item' => $post->authorName]) }}:</div>
 
             @include ('forum::post.partials.quote')
         @endif
 
-        <hr class="my-4" />
+        <hr class="my-4 border-gray-300 dark:border-gray-700" />
 
         <form method="POST" action="{{ Forum::route('post.store', $thread) }}">
             {!! csrf_field() !!}
@@ -24,7 +24,7 @@
             </div>
 
             <div class="flex justify-end items-center gap-4">
-                <a href="{{ URL::previous() }}" class="text-blue-500 underline">{{ trans('forum::general.cancel') }}</a>
+                <a href="{{ URL::previous() }}" class="text-blue-500 dark:text-blue-400 underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::general.cancel') }}</a>
                 <x-forum::button type="submit" class="">{{ trans('forum::general.reply') }}</x-forum::button>
             </div>
         </form>
diff --git a/resources/forum/blade-tailwind/views/post/edit.blade.php b/resources/forum/blade-tailwind/views/post/edit.blade.php
index 295b79487..2a637a9ab 100644
--- a/resources/forum/blade-tailwind/views/post/edit.blade.php
+++ b/resources/forum/blade-tailwind/views/post/edit.blade.php
@@ -2,12 +2,12 @@
 
 @section ('content')
     <div id="edit-post">
-        <h2 class="text-3xl font-medium my-3">{{ trans('forum::posts.edit') }} ({{ $thread->title }})</h2>
+        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::posts.edit') }} ({{ $thread->title }})</h2>
 
-        <hr class="mb-4">
+        <hr class="mb-4 border-gray-300 dark:border-gray-700">
 
         @if ($post->parent)
-            <h3>{{ trans('forum::general.response_to', ['item' => $post->parent->authorName]) }}...</h3>
+            <h3 class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.response_to', ['item' => $post->parent->authorName]) }}...</h3>
 
             @include ('forum::post.partials.list', ['post' => $post->parent, 'single' => true])
         @endif
@@ -21,7 +21,7 @@
             </div>
 
             <div class="flex items-center gap-4 justify-end">
-                <a href="{{ URL::previous() }}" class="underline text-blue-500">{{ trans('forum::general.cancel') }}</a>
+                <a href="{{ URL::previous() }}" class="underline text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::general.cancel') }}</a>
                 <x-forum::button type="submit">{{ trans('forum::general.save') }}</x-forum::button>
             </div>
         </form>
diff --git a/resources/forum/blade-tailwind/views/post/partials/list.blade.php b/resources/forum/blade-tailwind/views/post/partials/list.blade.php
index ecf26f53d..a6908e5c1 100644
--- a/resources/forum/blade-tailwind/views/post/partials/list.blade.php
+++ b/resources/forum/blade-tailwind/views/post/partials/list.blade.php
@@ -1,14 +1,14 @@
 <div @if (!$post->trashed())id="post-{{ $post->sequence }}"@endif
-    class="bg-white border mb-2 rounded-md {{ $post->trashed() || $thread->trashed() ? 'opacity-50' : '' }}"
-    :class="{ 'border-blue-500': state.selectedPosts.includes({{ $post->id }}) }">
-    <div class="bg-gray-100 border-b px-6 py-4 flex justify-between flex-row-reverse rounded-t-md">
+    class="bg-white dark:bg-gray-800 border dark:border-gray-700 mb-2 rounded-md transition-colors {{ $post->trashed() || $thread->trashed() ? 'opacity-50' : '' }}"
+    :class="{ 'border-blue-500 dark:border-blue-400': state.selectedPosts.includes({{ $post->id }}) }">
+    <div class="bg-gray-100 dark:bg-gray-700 border-b dark:border-gray-600 px-6 py-4 flex justify-between flex-row-reverse rounded-t-md transition-colors">
         @if (!isset($single) || !$single)
             <span class="float-end">
-                <a href="{{ Forum::route('thread.show', $post) }}" class="text-blue-500">#{{ $post->sequence }}</a>
+                <a href="{{ Forum::route('thread.show', $post) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">#{{ $post->sequence }}</a>
                 @if ($post->sequence != 1)
                     @can ('deletePosts', $post->thread)
                         @can ('delete', $post)
-                            <input type="checkbox" name="posts[]" :value="{{ $post->id }}" v-model="state.selectedPosts" class="ml-2" />
+                            <input type="checkbox" name="posts[]" :value="{{ $post->id }}" v-model="state.selectedPosts" class="ml-2 rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" />
                         @endcan
                     @endcan
                 @endif
@@ -16,8 +16,8 @@
         @endif
 
         <div>
-            {{ $post->authorName }}
-            <span class="text-gray-500">
+            <span class="text-gray-900 dark:text-gray-100">{{ $post->authorName }}</span>
+            <span class="text-gray-500 dark:text-gray-400">
                 @include ('forum::partials.timestamp', ['carbon' => $post->created_at])
                 @if ($post->hasBeenUpdated())
                     ({{ trans('forum::general.last_updated') }} @include ('forum::partials.timestamp', ['carbon' => $post->updated_at]))
@@ -25,7 +25,7 @@
             </span>
         </div>
     </div>
-    <div class="p-6">
+    <div class="p-6 text-gray-900 dark:text-gray-100">
         @if ($post->parent !== null)
             @include ('forum::post.partials.quote', ['post' => $post->parent])
         @endif
@@ -43,11 +43,11 @@
         @if (!isset($single) || !$single)
             <div class="flex items-center gap-4 justify-end mt-4">
                 @if (!$post->trashed())
-                    <a href="{{ Forum::route('post.show', $post) }}" class="text-gray-500 hover:text-gray-800">{{ trans('forum::general.permalink') }}</a>
+                    <a href="{{ Forum::route('post.show', $post) }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition-colors">{{ trans('forum::general.permalink') }}</a>
                     @if ($post->sequence != 1)
                         @can ('deletePosts', $post->thread)
                             @can ('delete', $post)
-                                <a href="{{ Forum::route('post.confirm-delete', $post) }}" class="text-red-500 hover:text-red-800">{{ trans('forum::general.delete') }}</a>
+                                <a href="{{ Forum::route('post.confirm-delete', $post) }}" class="text-red-500 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 transition-colors">{{ trans('forum::general.delete') }}</a>
                             @endcan
                         @endcan
                     @endif
diff --git a/resources/forum/blade-tailwind/views/post/partials/quote.blade.php b/resources/forum/blade-tailwind/views/post/partials/quote.blade.php
index 9c7649f9e..823710f11 100644
--- a/resources/forum/blade-tailwind/views/post/partials/quote.blade.php
+++ b/resources/forum/blade-tailwind/views/post/partials/quote.blade.php
@@ -1,13 +1,15 @@
-<div class="bg-white rounded-md border mb-2">
+<div class="bg-white dark:bg-gray-800 rounded-md border dark:border-gray-700 mb-2 transition-colors">
     <div class="p-6">
         <div class="flex justify-between flex-row-reverse mb-2">
             <span>
-                <a href="{{ Forum::route('thread.show', $post) }}" class="text-gray-500">#{{ $post->sequence }}</a>
+                <a href="{{ Forum::route('thread.show', $post) }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">#{{ $post->sequence }}</a>
             </span>
             <div>
-                <strong>{{ $post->authorName }}</strong> <span class="text-gray-500">{{ $post->posted }}</span>
+                <strong class="text-gray-900 dark:text-gray-100">{{ $post->authorName }}</strong> <span class="text-gray-500 dark:text-gray-400">{{ $post->posted }}</span>
             </div>
         </div>
-        {!! \Illuminate\Support\Str::limit(Forum::render($post->content)) !!}
+        <div class="text-gray-900 dark:text-gray-100">
+            {!! \Illuminate\Support\Str::limit(Forum::render($post->content)) !!}
+        </div>
     </div>
 </div>
diff --git a/resources/forum/blade-tailwind/views/thread/create.blade.php b/resources/forum/blade-tailwind/views/thread/create.blade.php
index d9effc59f..8544238ec 100644
--- a/resources/forum/blade-tailwind/views/thread/create.blade.php
+++ b/resources/forum/blade-tailwind/views/thread/create.blade.php
@@ -2,7 +2,7 @@
 
 @section ('content')
     <div id="create-thread">
-        <h2 class="text-3xl">{{ trans('forum::threads.new_thread') }} ({{ $category->title }})</h2>
+        <h2 class="text-3xl text-gray-900 dark:text-gray-100">{{ trans('forum::threads.new_thread') }} ({{ $category->title }})</h2>
 
         <form method="POST" action="{{ Forum::route('thread.store', $category) }}">
             @csrf
@@ -17,7 +17,7 @@
             </div>
 
             <div class="text-end">
-                <x-forum::button-link href="{{ URL::previous() }}" class="bg-gray-500">{{ trans('forum::general.cancel') }}</x-forum::button-link>
+                <x-forum::button-link href="{{ URL::previous() }}" class="bg-gray-500 dark:bg-gray-600">{{ trans('forum::general.cancel') }}</x-forum::button-link>
                 <x-forum::button type="submit">{{ trans('forum::general.create') }}</x-forum::button>
             </div>
         </form>
diff --git a/resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php b/resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php
index 8c196ac65..c4b655d5f 100644
--- a/resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php
+++ b/resources/forum/blade-tailwind/views/thread/modals/mark-as-read.blade.php
@@ -4,7 +4,7 @@
     @slot('route', Forum::route('unread.mark-as-read'))
     @slot('method', 'PATCH')
 
-    <p>{{ trans('forum::general.generic_confirm') }}</p>
+    <p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
 
     @slot('actions')
         <x-forum::button type="submit">
diff --git a/resources/forum/blade-tailwind/views/thread/partials/list.blade.php b/resources/forum/blade-tailwind/views/thread/partials/list.blade.php
index a30f82fa3..a359aea73 100644
--- a/resources/forum/blade-tailwind/views/thread/partials/list.blade.php
+++ b/resources/forum/blade-tailwind/views/thread/partials/list.blade.php
@@ -1,16 +1,16 @@
-<div class="bg-white" :class="{ 'ring-1 ring-blue-500': state.selectedThreads.includes({{ $thread->id }}) }">
+<div class="bg-white dark:bg-gray-800 transition-colors" :class="{ 'ring-1 ring-blue-500 dark:ring-blue-400': state.selectedThreads.includes({{ $thread->id }}) }">
     <div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
         <div class="md:w-3/6 text-center md:text-left">
             <span class="lead">
-                <a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category))style="color: {{ $category->color_light_mode }};"@endif class="text-lg">{{ $thread->title }}</a>
+                <a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category))style="color: {{ $category->color_light_mode }};"@endif class="text-lg hover:opacity-80 transition-opacity">{{ $thread->title }}</a>
             </span>
             <br>
-            {{ $thread->authorName }}
-            <span class="text-gray-500"> @include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
+            <span class="text-gray-900 dark:text-gray-100">{{ $thread->authorName }}</span>
+            <span class="text-gray-500 dark:text-gray-400"> @include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
 
             @if (!isset($category))
                 <br>
-                <a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};">{{ $thread->category->title }}</a>
+                <a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $thread->category->title }}</a>
             @endif
         </div>
 
@@ -35,17 +35,17 @@
 
         @if ($thread->lastPost)
             <div class="md:w-1/6 flex justify-center md:flex-col md:items-end">
-                <a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-blue-500">{{ trans('forum::posts.view') }} &raquo;</a>
+                <a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::posts.view') }} &raquo;</a>
                 <div>
-                    {{ $thread->lastPost->authorName }}
-                    <span class="text-gray-500"> @include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
+                    <span class="text-gray-900 dark:text-gray-100">{{ $thread->lastPost->authorName }}</span>
+                    <span class="text-gray-500 dark:text-gray-400"> @include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
                 </div>
             </div>
         @endif
 
         @if (isset($category) && isset($selectableThreadIds) && in_array($thread->id, $selectableThreadIds))
             <div class="" style="flex: 0;">
-                <input type="checkbox" name="threads[]" :value="{{ $thread->id }}" v-model="state.selectedThreads">
+                <input type="checkbox" name="threads[]" :value="{{ $thread->id }}" v-model="state.selectedThreads" class="rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700">
             </div>
         @endif
     </div>
diff --git a/resources/forum/blade-tailwind/views/thread/recent.blade.php b/resources/forum/blade-tailwind/views/thread/recent.blade.php
index b96988453..3e8d2bd16 100644
--- a/resources/forum/blade-tailwind/views/thread/recent.blade.php
+++ b/resources/forum/blade-tailwind/views/thread/recent.blade.php
@@ -2,7 +2,7 @@
 
 @section ('content')
     <div id="new-posts">
-        <h2 class="text-3xl font-medium my-3">{{ trans('forum::threads.recent') }}</h2>
+        <h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::threads.recent') }}</h2>
 
         @if (!$threads->isEmpty())
             <div class="my-3">
@@ -11,8 +11,8 @@
                 @endforeach
             </div>
         @else
-            <div class="bg-white my-3">
-                <div class="card-body text-center text-muted">
+            <div class="bg-white dark:bg-gray-800 my-3 transition-colors">
+                <div class="card-body text-center text-muted text-gray-500 dark:text-gray-400 p-6">
                     {{ trans('forum::threads.none_found') }}
                 </div>
             </div>
diff --git a/resources/forum/blade-tailwind/views/thread/show.blade.php b/resources/forum/blade-tailwind/views/thread/show.blade.php
index 0e8afc3bd..4610ac674 100644
--- a/resources/forum/blade-tailwind/views/thread/show.blade.php
+++ b/resources/forum/blade-tailwind/views/thread/show.blade.php
@@ -3,7 +3,7 @@
 @section ('content')
     <div id="thread">
         <div class="flex flex-col md:flex-row justify-between my-4">
-            <h2 class="grow text-3xl font-semibold">{{ $thread->title }}</h2>
+            <h2 class="grow text-3xl font-semibold text-gray-900 dark:text-gray-100">{{ $thread->title }}</h2>
 
             <div class="flex flex-col md:flex-row items-center gap-2">
                 @if (Gate::allows('deleteThreads', $thread->category) && Gate::allows('delete', $thread))
@@ -108,10 +108,10 @@
         @if ((count($posts) > 1 || $posts->currentPage() > 1) && (Gate::allows('deletePosts', $thread) || Gate::allows('restorePosts', $thread)) && count($selectablePosts) > 0)
             <div class="text-end mb-2">
                 <div class="form-check">
-                    <label for="selectAllPosts">
+                    <label for="selectAllPosts" class="text-gray-700 dark:text-gray-300">
                         {{ trans('forum::posts.select_all') }}
                     </label>
-                    <input type="checkbox" value="" id="selectAllPosts" class="align-middle" @click="toggleAll" :checked="state.selectedPosts.length == posts.data.length">
+                    <input type="checkbox" value="" id="selectAllPosts" class="align-middle rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" @click="toggleAll" :checked="state.selectedPosts.length == posts.data.length">
                 </div>
             </div>
         @endif
@@ -181,11 +181,13 @@
     @if ($thread->trashed() && Gate::allows('restoreThreads', $thread->category) && Gate::allows('restore', $thread))
         @component('forum::modal-form')
             @slot('key', 'restore-thread')
-            @slot('title', '<i data-feather="refresh-cw" class="text-gray-500"></i>' . trans('forum::general.restore'))
+            @slot('title', '<i data-feather="refresh-cw" class="text-gray-500 dark:text-gray-400"></i>' . trans('forum::general.restore'))
             @slot('route', Forum::route('thread.restore', $thread))
             @slot('method', 'POST')
 
-            {{ trans('forum::general.generic_confirm') }}
+            <div class="text-gray-900 dark:text-gray-100">
+                {{ trans('forum::general.generic_confirm') }}
+            </div>
 
             @slot('actions')
                 <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -196,20 +198,22 @@
     @if (Gate::allows('deleteThreads', $thread->category) && Gate::allows('delete', $thread))
         @component('forum::modal-form')
             @slot('key', 'delete-thread')
-            @slot('title', '<i data-feather="trash" class="text-gray-500"></i>' . trans('forum::threads.delete'))
+            @slot('title', '<i data-feather="trash" class="text-gray-500 dark:text-gray-400"></i>' . trans('forum::threads.delete'))
             @slot('route', Forum::route('thread.delete', $thread))
             @slot('method', 'DELETE')
 
-            @if (config('forum.general.soft_deletes'))
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
-                    <label class="form-check-label" for="permadelete">
-                        {{ trans('forum::general.perma_delete') }}
-                    </label>
-                </div>
-            @else
-                {{ trans('forum::general.generic_confirm') }}
-            @endif
+            <div class="text-gray-900 dark:text-gray-100">
+                @if (config('forum.general.soft_deletes'))
+                    <div class="form-check">
+                        <input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="permadelete" value="1" id="permadelete">
+                        <label class="form-check-label text-gray-700 dark:text-gray-300" for="permadelete">
+                            {{ trans('forum::general.perma_delete') }}
+                        </label>
+                    </div>
+                @else
+                    {{ trans('forum::general.generic_confirm') }}
+                @endif
+            </div>
 
             @slot('actions')
                 <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -219,13 +223,15 @@
         @if (config('forum.general.soft_deletes'))
             @component('forum::modal-form')
                 @slot('key', 'perma-delete-thread')
-                @slot('title', '<i data-feather="trash" class="text-gray-500"></i>' . trans_choice('forum::threads.perma_delete', 1))
+                @slot('title', '<i data-feather="trash" class="text-gray-500 dark:text-gray-400"></i>' . trans_choice('forum::threads.perma_delete', 1))
                 @slot('route', Forum::route('thread.delete', $thread))
                 @slot('method', 'DELETE')
 
                 <input type="hidden" name="permadelete" value="1" />
 
-                {{ trans('forum::general.generic_confirm') }}
+                <div class="text-gray-900 dark:text-gray-100">
+                    {{ trans('forum::general.generic_confirm') }}
+                </div>
 
                 @slot('actions')
                     <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -239,11 +245,13 @@
             @if ($thread->locked)
                 @component('forum::modal-form')
                     @slot('key', 'unlock-thread')
-                    @slot('title', '<i data-feather="unlock" class="text-gray-500"></i> ' . trans('forum::threads.unlock'))
+                    @slot('title', '<i data-feather="unlock" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.unlock'))
                     @slot('route', Forum::route('thread.unlock', $thread))
                     @slot('method', 'POST')
 
-                    {{ trans('forum::general.generic_confirm') }}
+                    <div class="text-gray-900 dark:text-gray-100">
+                        {{ trans('forum::general.generic_confirm') }}
+                    </div>
 
                     @slot('actions')
                         <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -252,11 +260,13 @@
             @else
                 @component('forum::modal-form')
                     @slot('key', 'lock-thread')
-                    @slot('title', '<i data-feather="lock" class="text-gray-500"></i> ' . trans('forum::threads.lock'))
+                    @slot('title', '<i data-feather="lock" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.lock'))
                     @slot('route', Forum::route('thread.lock', $thread))
                     @slot('method', 'POST')
 
-                    {{ trans('forum::general.generic_confirm') }}
+                    <div class="text-gray-900 dark:text-gray-100">
+                        {{ trans('forum::general.generic_confirm') }}
+                    </div>
 
                     @slot('actions')
                         <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -269,11 +279,13 @@
             @if ($thread->pinned)
                 @component('forum::modal-form')
                     @slot('key', 'unpin-thread')
-                    @slot('title', '<i data-feather="arrow-down" class="text-gray-500"></i> ' . trans('forum::threads.unpin'))
+                    @slot('title', '<i data-feather="arrow-down" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.unpin'))
                     @slot('route', Forum::route('thread.unpin', $thread))
                     @slot('method', 'POST')
 
-                    {{ trans('forum::general.generic_confirm') }}
+                    <div class="text-gray-900 dark:text-gray-100">
+                        {{ trans('forum::general.generic_confirm') }}
+                    </div>
 
                     @slot('actions')
                         <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -282,11 +294,13 @@
             @else
                 @component('forum::modal-form')
                     @slot('key', 'pin-thread')
-                    @slot('title', '<i data-feather="arrow-up" class="text-gray-500"></i> ' . trans('forum::threads.pin'))
+                    @slot('title', '<i data-feather="arrow-up" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.pin'))
                     @slot('route', Forum::route('thread.pin', $thread))
                     @slot('method', 'POST')
 
-                    {{ trans('forum::general.generic_confirm') }}
+                    <div class="text-gray-900 dark:text-gray-100">
+                        {{ trans('forum::general.generic_confirm') }}
+                    </div>
 
                     @slot('actions')
                         <x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -298,7 +312,7 @@
         @can ('rename', $thread)
             @component('forum::modal-form')
                 @slot('key', 'rename-thread')
-                @slot('title', '<i data-feather="edit-2" class="text-gray-500"></i> ' . trans('forum::general.rename'))
+                @slot('title', '<i data-feather="edit-2" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::general.rename'))
                 @slot('route', Forum::route('thread.rename', $thread))
                 @slot('method', 'POST')
 
@@ -316,15 +330,15 @@
         @can ('moveThreadsFrom', $category)
             @component('forum::modal-form')
                 @slot('key', 'move-thread')
-                @slot('title', '<i data-feather="corner-up-right" class="text-gray-500"></i> ' . trans('forum::general.move'))
+                @slot('title', '<i data-feather="corner-up-right" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::general.move'))
                 @slot('route', Forum::route('thread.move', $thread))
                 @slot('method', 'POST')
 
                 <div class="input-group">
                     <div class="input-group-prepend">
-                        <label class="input-group-text" for="category-id">{{ trans_choice('forum::categories.category', 1) }}</label>
+                        <label class="input-group-text text-gray-700 dark:text-gray-300" for="category-id">{{ trans_choice('forum::categories.category', 1) }}</label>
                     </div>
-                    <select name="category_id" id="category-id" class="form-select">
+                    <select name="category_id" id="category-id" class="form-select bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600">
                         @include ('forum::category.partials.options', ['hide' => $thread->category])
                     </select>
                 </div>
diff --git a/resources/forum/blade-tailwind/views/thread/unread.blade.php b/resources/forum/blade-tailwind/views/thread/unread.blade.php
index 560ac0edd..54279348d 100644
--- a/resources/forum/blade-tailwind/views/thread/unread.blade.php
+++ b/resources/forum/blade-tailwind/views/thread/unread.blade.php
@@ -2,7 +2,7 @@
 
 @section ('content')
     <div id="new-posts">
-        <h2 class="text-3xl text-medium my-4">{{ trans('forum::threads.unread_updated') }}</h2>
+        <h2 class="text-3xl text-medium my-4 text-gray-900 dark:text-gray-100">{{ trans('forum::threads.unread_updated') }}</h2>
 
         @if (!$threads->isEmpty())
             <div class="">
@@ -11,7 +11,7 @@
                 @endforeach
             </div>
         @else
-            <div class="bg-white shadow rounded text-gray-500 text-center py-4">
+            <div class="bg-white dark:bg-gray-800 shadow rounded text-gray-500 dark:text-gray-400 text-center py-4 transition-colors">
                 {{ trans('forum::threads.none_found') }}
             </div>
         @endif