Level 102
I havent tested it yet, but my guess is that is just uses your prefered color scheme from your OS (tailwind default)
You can read about it here https://tailwindcss.com/docs/dark-mode
1 like
Feb 17, 2023
13
Level 3
Laravel 10 -> Dark Mode (opt-in)
Out of the box install with dark mode... This seem to be an awesome addition...
laravel new project1 --dark
Yet when i view in browser I don't find any user option to toggle dark mode?
Am i missing something
Only info I find on laravel.com is:
Dark Mode
If you would like Breeze to include "dark mode" support when scaffolding your application's frontend, simply provide the --dark directive when executing the breeze:install command:
`php artisan breeze:install --dark`
Level 3
@Sinnbeck funny thing is i only have dark mode enabled everywhere.. white screen glare all day I cant do... it doesn't seem to be picking up my dark mode preference?
When i find the solution / work around, I will pot it here
Level 102
@aifx4intel You can just do the manual trick :) Just add it to the tailwind config and then to the body or html tag in the layout. It explains it in the link
1 like
Level 3
@Sinnbeck thanks... I made a repo in 2022 (github) -- TALL STACK with Dark Mode function (and a few extra sweetners for the lucky ones who find it (https://github.com/AiFxApp/tall-stack-v1.0.0-darkmode/blob/master/README.md) ... it was part of my personal studies in 2022 - Love Laravel!!!
anyway.. I did just as you suggested.
Level 102
@aifx4intel awesome. Glad that you love laravel.
Please remember to mark a best answer if the thread is solved :)
1 like
Level 3
Here it goes: it is 1st draft - so code might need a small clean up...
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('@tailwindcss/forms')],
resources\views\layouts\app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased" x-data="{ darkMode: false }" x-init="
if (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
localStorage.setItem('darkMode', JSON.stringify(true));
}
darkMode = JSON.parse(localStorage.getItem('darkMode'));
$watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))" x-cloak>
<div x-bind:class="{'dark' : darkMode === true}" class="min-h-screen bg-gray-100 dark:bg-gray-900">
@include('layouts.navigation')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main class="bg-gray-100 dark:bg-gray-800">
{{ $slot }}
</main>
</div>
</body>
</html>
resources\views\layouts\navigation.blade.php
Insert where as needed
<div class=" ml-2">
<button type="button" x-bind:class="darkMode ? 'bg-indigo-500' : 'bg-gray-200'"
x-on:click="darkMode = !darkMode"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
role="switch" aria-checked="false">
<span class="sr-only">Dark mode toggle</span>
<span x-bind:class="darkMode ? 'translate-x-5 bg-gray-700' : 'translate-x-0 bg-white'"
class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out">
<span
x-bind:class="darkMode ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200'"
class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-gray-400"
viewBox="0 0 20 20" fill="currentColor">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
</span>
<span
x-bind:class="darkMode ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100'"
class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clip-rule="evenodd" />
</svg>
</span>
</span>
</button>
</div>
IF this work for you please mark this at best answer -- It Works on my end.
4 likes
Level 3
If you want to set Dark Mode for in app editing or user option...
Enable dark mode # All you need to do to enable dark mode for your Tailwind CSS project and Flowbite components is to add the following code inside your tailwind.config.js file and then add the dark class on your html element.
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}
Alternatively, you can also just use the “media” option to automatically set the dark or light theme based on the browser’s color scheme preference.
// tailwind.config.js
module.exports = {
darkMode: 'media',
// ...
}
1 like
Level 3
I like the class setting as this gives user the choice to switch.
Your Thought?
Level 1
In my scenario most of the classes defined with the dark: prefix didn't get used when dark mode was enabled. I had to add the important flag but this caused further issues. Ended up shelving it until hopefully Laravel10 fixed it. I can now confirm that Laravel10 Still fails to use the dark: class when darkmode is enabled.
Level 45
In this scenario, if the user has their preferences selected as light, and then they switch to dark, navigate around a bit - and hit refresh - does this return them back to a light screen or does it respect their viewing change? In other terms - what happens when they select something other than the mode of their operating system, navigate for a while, and refresh the browser for any reason?
Level 3
Using Breeze Dark Mode opt in, I kept it simple and installed into chrome the Dark mode extension " Dark Mode 0.4.9 A global dark theme for the web". Then with tailwind.config.php set to "export default { darkMode: "media", //darkMode: 'class', content: [ etc." I just click on the chrome extension and whole web site is hot swoppable between light and dark. I did try to implement a manual button option inside Laravel but "no cigar."
Level 1
1- Set darkMode property within config file: ( darkMode: ['class', '[data-mode="dark"]'])
2- Add (data-mode="dark") attribute within tag
Level 10
it seems no one is looking at the latest automatically installed version of 'tailwind.config.js.
There is no "module.exports {" section. It is called "export default {" So when you tell someone to install the 'darkMode: "class",' as module.exports { darkMode:"class, it makes no sense at all. The editor rejects the insertion of module.exports and says I need a comma????
Please "do not chop off the rest of the file for brevity or security! Some of use do not have a GD clue about how javascript files are built or punctuated or what these variables are used or when. At least, make a reference to the FULL tailwind.config.js located at "/node_modules/tailwindcss/stubs/config.full.js" Then we can see what has to be changed and where. Thanks
Please or to participate in this conversation.