Dark mode on own app

I have a problem with dark mode in my own app.
Dark mode does not transfer to the background of my app, the background just gets translucent.
Does anyone know how to fix this problem.

Did you by chance change any CSS related to the background of your app’s canvas?

I’d investigate the dark color in other apps (on wich level it is introduced) and see if that is the same on your app. You can then go down the tree until you find something wrongly colored.

Yes i checked that already, but even if i remove all of my css, it is still translucent.

Is your app published already on github or similar?

No sadly i can not publish it, because its a app used in our company, therefore out of security, i can not publish the code.

Are you using Vue for the frontend?

You can use your browser’s developer tools to inspect the CSS for the relevant elements.

Start with an app where you do see the dark mode properly, inspect the element that has the dark thingie you want to replicate in your own app, and determine which exact CSS rule makes this happen.

Then in your own app, inspect the very same (or equivalent) element and add the CSS rule manually to see that it takes effect. If it doesn’t, dig through the CSS for the element to find the cause.

No, do i have to use vue, so that i can use darkmode?

No, it should not be strictly necessary. However, I am unsure where this needs to be realized. A quick glance at a Vue app made it obvious that the NcAppContent component created a dark background.

This is the setting for an example Vue app>

Honestly, I do not know how it is intended with non-Vue apps.

I just forwarded/asked at the frontend developers’ channel. Let’s see if there is someone able to help you here.

1 Like

Okay, thank you very very much for your help.

1 Like

I found the problem, it was because I only had one file in the templates folder, where I have had all of my html and js code. Now that I switched the structure and call the html code like this

<div id="app-navigation">
		<?php print_unescaped($this->inc('navigation/index')); ?>
<div id="app-content">
		<?php print_unescaped($this->inc('content/index')); ?>

But thank you very very much for your help and for your fast responses, I appreciate it very much :slight_smile:

1 Like

You are welcome!

PS: Please mark the topic as solved. Then, one does not need to reread a solved topic.