Why @media query always choosing light theme? (CSS, HTML)

<!DOCTYPE html>
<html>
<head>
	<style>
	html {
	    content: ""; /* (ab)using the content property */
	}

	/* Light mode */
	@media (prefers-color-scheme: light) {
	    html {
		background-color: white;
	    }
	}

	/* Dark mode */
	@media (prefers-color-scheme: dark) {
	    html {
		background-color: black;
	    }
	}
	</style>
</head>
<body></body>
</html>

Don’t think of code. This code actually takes system theme. And, set it to website. But, I was wondering why it wasn’t working for me. I am currently using Manjaro. I am using dark Adwaita-dark.

I don’t know if above code detects Chrome’s dark theme or not. I am using Dark theme in Chrome also. I usually downloaded dark theme for Chrome from chrome extension. Although, why the code is selecting light theme for my system? Is there any other way to select dark theme

1 Like

Sadly, Chrome is unable to detect the system’s theme at this time. It is a known issue that is being worked on (no ETA): 998903 - chromium - An open-source project to help move the web forward. - Monorail

Browser themes do not control what the prefers-color-scheme CSS media selector will return, just how the UI of the browser will appear.

In the meantime I add --force-dark-mode to the end of my Chrome/Chromium-based browser application shortcut to force the browser to use prefers-color-scheme: dark. Note it will only work for you. Anyone else visiting your site from a Chrome/Chromium browser on Linux will need to do the same to see your dark theme until the bug is fixed.

1 Like

The word isn’t clear to me. Where do you add --force-dark? Did you mean I should add --force-dark-mode from inspect element?

No, you should add it to the lauch command of Chrome.

still not get it. Did you mean terminal? Or, CSS?

can add in ~/.config/chromium-flags.conf

and tomorow : https://web.dev/user-preference-media-features-headers/

Unfortunately, Brave & Vivaldi do not support the chromium-flags.conf file.

As a workaround, you can follow the steps for them under the “Enable the following web browser flags → for Brave and Vivaldi” header: [HowTo] Enable Hardware Video Acceleration / Video Decode In Google Chrome, Brave, Vivaldi And Opera Browsers

Unfortunately, I can’t find any file called (there) ~/.config/chromium-flags.conf

You just create it and add there all launch options you want.
Don’t hesitate to experiment!

1 Like

Usually, I don’t know what should I write there.

#!/bin/bash

google-chrome --force-dark-mode

Is what I should write? I am busy little bit so, I can’t check HTML now (Sorry).


I have tested seems like it’s not working. Maybe, configuration’s code should be something else ~ I guess.


Ohh! Sorry! I have tested by closing earlier Chrome then, it worked. Thanks. :slight_smile:

create a file :

touch "~/.config/chromium-flags.conf"

after we can add some options in this file … for example:

cat ~/.config/chromium-flags.conf

# This line will be ignored.
--start-maximized
--enable-features=OverlayScollbar
--disable-search-engine-collection
--enable-gpu-compositing
--enable-accelerated-video-decode
--use-gl=desktop
--force-dark-mode

after you can load chromium without option (from gui) but chromium use config(s) in this file

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.