Dark weirdness Laravel 12 Livewire Starter

My Login and Register pages are getting even with it removed from the auth\simple.blade.php .......... I mean I can remove all the dark: classes in the login and register templates but its driving me nuts because I want to know what is setting it?

LaryAI

1 year ago

Level 58

It sounds like you're experiencing an issue where your Laravel 12 Livewire application is applying dark mode styles to your Login and Register pages, even after you've removed the dark: classes from your Blade templates. This could be due to a few reasons:

Tailwind CSS Configuration: If you're using Tailwind CSS, check your tailwind.config.js file. There might be a configuration that automatically applies dark mode based on a certain condition, such as a media query or a class on the html or body tag.
```
module.exports = {
  darkMode: 'class', // or 'media' or false
  // other configurations...
}
```
If darkMode is set to 'class', ensure that there isn't a dark class being applied to a parent element like html or body.
JavaScript: Check if there is any JavaScript code that is dynamically adding the dark class to your pages. This could be in your custom scripts or a third-party library.
```
document.documentElement.classList.add('dark');
```
Look for any code that might be adding the dark class to the document.documentElement or body.
Persistent State: If you're using a persistent state mechanism (like local storage) to remember the user's theme preference, ensure that it's not defaulting to dark mode.
```
const userPrefersDark = localStorage.getItem('theme') === 'dark';
if (userPrefersDark) {
  document.documentElement.classList.add('dark');
}
```
Check if there's any logic that sets the theme based on a stored preference.
CSS Specificity: Ensure that there are no CSS rules with higher specificity that are overriding your changes. Use browser developer tools to inspect the elements and see which styles are being applied and from where.
Blade Components: If you're using Blade components, ensure that the dark: classes aren't being applied within a component that is used by your Login and Register pages.

By checking these areas, you should be able to identify where the dark mode styles are being applied from and adjust accordingly. If you find that none of these solutions work, consider providing more context or code snippets for further assistance.

ehask71

1 year ago

Level 1

For reference the new livewire starter kit does not have a tailwind.config.js in it and app.js is blank. My other pages I created a new public.blade.php in components/layouts/ and it is not being effected. I did change the login.blade.php to use the public and it was not affected ..... so it made me want to find the answer more.

Im still looking where it is being generated when it uses simple.blade.php

ehask71

1 year ago

Level 1

I found it remove @fluxAppearance from the head of the layouts. I am still looking for what is telling Flux I want dark mode set on those pages .....

Merklin

1 year ago

Level 7

@ehask71 It is described here: https://fluxui.dev/docs/dark-mode and it is exactly by removing @fluxAppearance that you can control manually dark mode.

auflyer2

1 year ago

Level 9

Thanks for the pointer on @fluxAppearance

This did remove "control" of dark mode as described in the flux docs, however I was still getting some weird behavior when my "system" was in dark mode and I later clicked on Settings in the starter kit - it would revert to dark mode even when the app was previously in light - something still listening for the system setting.

For those coming along later, I was able to completely disable dark mode (Laravel 12 Livewire starter kit) throughout the app by:

Removing @fluxAppearance from resources/views/partials/head.blade.php

and

Removing class="dark" from the top level html tag in

resources/views/components/layouts/app/sidebar.blade.php

and/or

resources/views/components/layouts/app/header.blade.php

whichever dashboard layout applies to your project.

You probably also want to remove class="dark" from the applicable auth layout (the default is simple.blade.php) in the following directory:

resources/views/components/layouts/auth

Finally, if you're doing this, presumably you don't want the user to be confused with dark mode controls either, so consider deleting the Appearance navlist-item as well, in

resources/views/components/settings/layout.blade.php

abordolo

9 months ago

Level 8

Hi @ehask71, yes this is quite annoying for me too. I did not following to get rid of this:

In app.blade.php I commented out the html.dark class:

<style>
  html {
    background-color: oklch(1 0 0);
  }

  /* html.dark {
    background-color: oklch(0.145 0 0);
  } */
</style>

Also, I commented out the .dark class in app.css

/* .dark {
    --background: hsl(0 0% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: 0 0% 98%;
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(0 0% 14.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 16.08%);
    --muted-foreground: hsl(0 0% 63.9%);
    --accent: hsl(0 0% 14.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    --ring: hsl(0 0% 83.1%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar-background: hsl(0 0% 7%);
    --sidebar-foreground: hsl(0 0% 95.9%);
    --sidebar-primary: hsl(360, 100%, 100%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(0 0% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(0 0% 15.9%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(240 5.9% 10%);
} */

Hope that helps.

Please or to participate in this conversation.