Google Chrome and other Chromium based browsers have a secret dark mode.
And I'm not talking about the dark theme where it changes the title bar and everything, but
rather one that actually automatically converts the colors used on websites to make it look
dark, even if it doesn't have a native dark mode on that site.
The feature is apparently still in experimental stage, but you can access it by going to the
Chrome flags menu or in any other Chromium browser like Edge, you can type about:flags.
Then just search "dark mode" and look for "Auto Dark Mode for Web Contents."
The default setting just disables it, but enabling it also keeps it on all the time,
which you might not want.
So what I'll also explain is how to create a desktop shortcut that launches Chrome in
this dark mode, but only if you use that shortcut.
So you can use that at night, for example, and the rest of the day, use it in regular
light mode.
Plus I'll explain exactly what each of these modes does based on some testing I did.
All right, so let's get started with how to set this up and create the shortcut, as well
as some other helpful tips.
First, you'll go into the Chrome flags menu and enable whatever flag you want to be enabled
with the shortcut.
For auto dark mode, there's many different options and I'll go over what each of these
do, but just for example, I'll do Enabled and we'll disable this later.
We just need to enable it temporarily so we can get the parameter, which I'll show you.
So once you set the flag and relaunch Chrome, you'll next want to go to the chrome://version
menu or about:version on any Chromium browser.
And in here, focus on this "Command Line" section.
This basically shows you the behind the scenes for how Chrome is launching and what exact
command it's using, which determines which flags to enable on launch.
You can see it shows the path of the program.
Then it has --flag-switches-begin.
And after that is all the parameters for whatever flags you've set different from the default
in Chrome.
And then after all of those, it's --flag-switches-end.
You can just copy this whole thing off and paste it into notepad for now.
And then we're done with that parameter.
So we can go back into flags and disable it back to default.
Oh, and if you see any parameters that says restart, just take those out.
Those just show up whenever Chrome does a relaunch.
Then right click on the desktop and create a new shortcut and paste in that whole thing,
parameters included.
And you can name it whatever you want, like Chrome Dark Mode.
But hold on, let me explain one more thing.
If you already had some Chrome flags enabled before, I would actually just go and take
out those parameters when you go to create that shortcut.
So when you paste it into notepad, edit it so only the one you want to change using the
shortcut is in there.
So in this case, I'm going to take out everything except the dark mode one.
What will happen is Chrome still will launch with those other flags that you've changed
from the default.
And it's just going to add on the parameters that you add with the shortcut.
So as an example, I enabled these flags, but the shortcut only has the dark mode one, but
you can see when I launch Chrome and go back to the version page, you'll notice it actually
has two places for the flags, one from the parameters from the shortcut, and another
one with the flags that were set before.
So basically you don't really want the shortcut messing with any other flags that are already
being handled by default, because maybe you'll go and change those at some point and then
forget that the shortcut enables those.
So only put in the shortcuts, the one you want to change with that shortcut.
Finally, as a quick tip, you can actually change the icon for the shortcut.
So if you right click and hit change icon, then you can select an ICO file, an icon file.
And you can see I created this darker one myself.
So it's easier to spot that it's the dark mode shortcut.
And I'll put a link to that icon file in the description if you want to download it and
use it yourself.
All right.
So now that you know how to set up the dark mode, I'll explain in detail what all of these
different options do so you can decide which one you want to set yourself.
And don't worry, this isn't as complicated as it seems.
A lot of these actually do the same exact thing.
So just quickly looking through them, Default is the same as Disabled and the Enabled option
I'll get to later.
There are three "simple" inversion options of various types and four "selective" options
of various types.
Now to test out what each of these options do, I created an HTML page with a lot of different
stuff that will test their behavior.
So you can see the background has stripes of different shades from white to black.
There's some text of various colors, red, green, blue, and white, gray, black.
There's also several pictures, including a couple with transparency.
Then at the bottom, we have some solid shapes, again, red, green, blue.
And behind all this is a semi-transparent white square background thing.
And here's what I learned.
So the three simple options don't actually invert images at all.
They only deal with text and shapes and other elements.
But for what they do invert, they all do it differently.
So the simple HSL option seems to only invert black and white and gray elements, not anything
colored.
So the colored text and shapes didn't change, but notice that the dark gray and black text
are now white, including the labels on the shapes.
The background square is now a semi-transparent black, not white.
And you can see on the background stripes, it seems to have inverted the two brightest
layers.
Next, the simple RGB option appears the same as HSL, except for colored elements.
So now the red, green, blue text is cyan, magenta, and yellow.
For the shapes, it inverted the blue triangle, but interestingly, not the red and green shapes,
even though it changed the same text colors above.
It might have to do with how it calculates what's behind it, but I'm not really sure.
But the rest, like the background stripes and black and white elements, are the same
as the HSL.
Next, the simple CIELAB option is different in a few ways.
You can see the changed colors are different.
Red is still red, but green is a darker green, and blue is more of a light purple.
Also, for the background stripes, it was more aggressive on the second brightest stripes,
making them way darker than on HSL and RGB.
And also, I noticed the background box doesn't seem quite as dark, but only slightly.
Now moving on to the four selective modes, they actually all seem to be exactly the same
as the simple CIELAB option, except for how they handle images.
Meaning for text, backgrounds, shapes, and that sort of thing, it inverts it in the same
way and using the same colors as the CIELAB option that we just saw.
Of these four, let me first just cross off this one that says "selective inversion of
non-image elements," because this seems to be exactly the same as the simple CIELAB,
since that one doesn't do images either.
Maybe they have more planned for it in the future, but at the moment, we can just ignore
it.
Next, we can look at the "selective image inversion" option, which also seems to do
the exact same thing as the regular Enabled and "selective inversion of everything" modes.
With this one, we can now see that it did invert some of the images, the one with the
arrows, the WiFi signal symbol, and the Windows icon.
So clearly it has some kind of algorithm to choose what needs to be inverted and what
doesn't, which makes sense, since it's called selective inversion.
One thing I noticed though, is it will not invert images above a certain size.
So if I zoom in just 10%, you can see it no longer inverts any of those images.
And if I zoom out, it actually inverts the locked picture when it doesn't at the default
zoom.
And the same thing happens if I even go into the HTML code and increase the image size
to anything above 140 by 140 pixels, it'll stop inverting them.
But here's the thing, that all depends on your Windows monitor scaling.
So this is all with my scaling at 150% on my monitor.
When I put Windows scaling at 100%, now it doesn't stop inverting images until I zoom
in on Chrome at 250%, or unless in the HTML, I set them to anything 325 pixels or more,
not 140.
So I believe what's happening is it won't invert images above a certain size, but decides
on that using a calculation of the actual number of pixels it takes up on the screen.
Anyway, I just wanted to explain that because the inconsistent behavior was confusing me
until I realized.
Anyway, finally, the option for "selective inversion based on transparency and number
of colors" also seems to be the same as the last one we just looked at, except that it
will not invert any images that don't have transparency.
So if I zoom out, the Wi-Fi symbol and lock are inverted, but the arrows and Windows icon
are not, where they were before, because they don't have any transparency.
So overall, since many of these are the same, I would say you really have four different
main options.
If you don't want to invert images at all, then there's the simple modes.
There's simple HSL, which only inverts text and other elements if they are black, white,
or gray.
The simple RGB and CIELAB inverts text and other elements including colored ones, and
you can decide which of those you prefer.
Or you can also have it invert any image based on size and colors, or you can have it invert
any images based on size and colors, but only if they have transparency.
For me, I think I prefer the simple HSL mode, because mainly the thing I care about is inverting
white backgrounds at night, so it's not blinding me, and then the text to go along with it.
That way, I think it keeps the websites looking as normal as possible, close to the original,
just darker.
The modes that do invert the images only invert images below a certain size, and small images
aren't really going to be a problem in terms of brightness anyway.
So it just seems kind of pointless and makes the images look weird for really not much
benefit.
But again, you can decide for yourself based on all those examples we saw.
So let me know what you think down in the comments.
Are you going to enable this, and which one will you prefer?
If you enjoyed this video, definitely give it a big giant thumbs up for the YouTube algorithm,
I'll definitely appreciate it.
And if you want to subscribe, I try to make new videos about twice a week, usually Wednesday
and Saturday.
If you want to keep watching, the next video I'd recommend is one where I was talking about
a whole bunch of hidden menus in Google Chrome that you probably didn't know about.
That's actually where I learned about setting the parameters for the different flags, so
you can check that out.
So anyway, hopefully you enjoyed this video.
Thanks so much for watching, and I'll see you in the next one.