How to check whether user has enabled dark theme via Javascript?

đź’» Development app dev
1

I am currently looking for a way to check whether a user has enabled the dark theme via Javascript.

Bildschirmfoto vom 2022-04-19 11-27-20

What i tried so far:

  • I checked the global OC.theme variable, but it only contains instance wide stuff like branding etc.
  • I sniffed the endpoint to change the theme (PUT https://example.com/ocs/v2.php/apps/accessibility/api/v1/config/theme) and tried to modify the request to use GET, but it returned a 405 Method not allowed, so i assume this is a write only endpoint
  • I searched for existing css variables. Depending on the set colors, one could “guess” whether the dark theme is enabled or not, but this does not seem to be a deterministic reliable way

Maybe someone has a hint for me? A solution must be framework agnostic (= not depending on Vue.js) and ideally it should not include a HTTP request (but that’s ok if there is no other way).

2

There is a class added to the HTML body tag with the active theme. It’s theme--light for the normal light theme and theme--dark for the dark theme.

3

Oh boy, that simple! :man_facepalming:

Thanks!

1 Like
4

Update for everyone else stumbling over this questions:

Do not use body[theme-xxx] selector to create custom rules. We now also use media queries (1, 2) to match the browser preferences. That means you have to let the Theming do its job and not try to do it yourself (Source)