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')
-

{{ trans('forum::general.index') }}

+

{{ trans('forum::general.index') }}

@can ('createCategories') 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')
-

{{ trans('forum::general.manage') }}

+

{{ trans('forum::general.manage') }}

@can ('createCategories') @@ -17,13 +17,13 @@ -