Tailwind dark mode

Question

I am using Tailwind 3.3.2 with Next.js 13.4.4. On my website. I didn't implement dark mode, and everything was working fine for me. I tested it on both laptops and mobile devices using various browsers (Chrome, Firefox, etc.), and everything was working as expected(light mode), even when the system was in dark mode.

But when I tested it on the Samsung browser, I found that it displayed the website in dark mode (my phone was in dark mode), but this issue did not occur with Chrome or Mozilla.

In tailwind.config.js file I have

model.exports = {
 darkmode: 'class'
}

and before I've tried

model.exports = {
 darkmode: false
}

And none of them worked for me. If anyone has experienced this issue before, I would appreciate any help.

Thanks.

Answer 1

It might have been the cause of @media queries

@media (prefers-color-scheme: dark) {
 background: #000; //dark theme
}

But in your case, this doesn't appear to be the issue since it works fine and displays in light-mode on other browsers even when the device system preference is dark-mode.

This is probably caused due to the browser setting in Samsung browser which overrides your styles.

In your Samsung browser settings, search for options related to Dark Theme and try switching it off. Hope this solves your issue.

• Alex: Thank you Chirag, indeed the issue will be fixed after changing the browser setting, but as you know, we need to make sure the correct style is applied to all users without telling them to change the setting.

Answer 2

I would like to share the solution I found, and I would appreciate any help if anyone has a different way of solving the issue I had since Samsung browser didn't respect my Tailwind code. I had to find a different way to force my approach.

I found navigator.userAgent.

Then using useState I did:

const [isSamsungBrowser, setIsSamsungBrowser] = useState(false);

Then I used useEffect to run a checking function on every reload:

useEffect(() => {
setIsSamsungBrowser(navigator.userAgent.includes("Samsung"));}, []);

The last part was to conditionally render the content based on isSamsungBrowser status:

{isSamsungBrowser ? (
 ""
 ) : (
 <div className="absolute -bottom-[1px] w-full">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
 <path
 fill="#ffffff"
 fillOpacity="1"
 d="M0,192L48,192C96,192,192,192,288,208C384,224,480,256,576,272C672,288,768,288,864,256C960,224,1056,160,1152,138.7C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
 ></path>
 </svg>
 </div>
 )}