8

Is there a way to make web apps like YouTube detect system dark mode automatically on Ubuntu 20.04?

Edit: Some web apps can fallow system theme on windows. If you have dark mode enabled then these apps will be displayed using a dark theme. In Ubuntu 20.04 when i configure this apps(YouTube on google chrome) to fallow system theme it will still display light theme even if I have Ubuntu on Dark mode.

4 Answers 4

12

This is a problem between Ubuntu and Chrome, in this page, you can see which theme the system is using. https://codepen.io/alisterlf/full/LYbvwER

This page works on ubuntu with firefox, but not in chrome. In windows, this page also works with chrome, so that's why I think it's a problem between Ubuntu and Chrome.

This is a known issue that is traceable thru this page.

5
  • I'm not sure this works out of the box. At Firefox 98.0.1 under Kubuntu 20.04, that's definitely not the case. I don't use Fx anymore, just opened the installed one to test. Are you sure there isn't a setting under Fx to enable that? Mar 29, 2022 at 3:24
  • 1
    Is this still unresolved? I'm having this exact same issue still.
    – w411 3
    Apr 21, 2022 at 14:03
  • Can we do something like hardcoding the system theme for chrome till the issue is not resolved at the root? Feb 28, 2023 at 7:08
  • I don't want to use chrme://flags because it shows an experimental feature warning Feb 28, 2023 at 7:25
  • This issue was fix in july of 2023 Nov 27, 2023 at 17:42
2

If you switch Google Chrome to GTK theme (Settings->Appearance->Themes), the Chrome browser appearance changes with the system theme. However, this does not change the browser theme setting, as you can see in @Alister's link: https://codepen.io/alisterlf/full/LYbvwER

As a result, the system theme does not propagate to websites that allow you to use the system theme. This is a known issue, and is being tracked here. Toggling Chrome to use the GTK theme seems like the "right" way to do this, and hopefully when this issue is fixed, you will be able to use Youtube's "use device theme" setting (Profile Pic -> Appearance -> Use Device Theme).

1

For me, adding flags that force dark theme helped

/usr/bin/chromium %U --enable-features=WebUIDarkMode --force-dark-mode

You can also change this command in you chromium app details panel enter image description here Then choose Application enter image description here And put the command I have listed at the beginning of my answer into Command: field

System info:

  • OS: Arch Linux x86_64
  • Kernel: 5.15.40-1-lts
  • DE: Plasma 5.24.5
1
  • I too, use jetbrains mono as system ui font. Everything is both consistent and beautiful with this open font. +1 Dec 3, 2022 at 0:02
0

If you have access to the source of the web app (or site) then you can use matchMedia from Javascript:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

As a bonus, if you want the app to update if the OS changes from one mode to the other, you can watch for changes:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Otherwise, there is no option that I’m aware of that will force an application to comply with the colour scheme or mode of the host OS 🤔

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .