Cannot find light mode dark mode switch in xp8

Help
1

Enonic version: 8.04

OS: Sequoia 15.7.9

My colleagues have a half moon symbol at the top right of their dashboard, enabling them to switch between dark and light mode. I have no such button-symbol visible, how can I enable it? I’m on Content Studio 6.0.4…

2

The switcher you are referring to was supposed to be used only by us internally here in Enonic, while we were developing the new Content Studio. We forgot to remove it by the 6.0 release, so it was removed in a future version (6.0.4).

The reason it was removed is that there will be more more apps using the same UI and all of them are supposed to be in the same mode to look consistent. That’s why the mode will be determined by your browser settings.

In the future we might add a common config setting which will set theme for all the Enonic apps, but it won’t be in Content Studio.

3

I see… but my browser setting IS for light mode - but to no effect… anything I’m missing?

4

Are you sure you are not mixing up system (your OS) theme and browser mode settings? I’ve just tested it by switching mode in Chrome and it works fine - see the attached video:

656512875-11909eee-09b9-45f3-82ea-383f4cfc1b00

5

Quite sure, yes. I tried exactly the same as you show here, and it changes the appearance of the browser on a whole, toggling between dark and light mode, but it has no effect on Content Studio or Dashboard, it just stays in dark mode, regardless. Weird. But probably something to do with my system.

6

I believe I know why - it used to save current theme in the browser’s local storage. Can you try in an incognito window or another browser?

7

I’m guessing at bit here - but can it be that the button was removed, but that the UI still reads and uses the value? So if you “forced” dark mode before - it is now pinned?

If it exists, the value can be seen from browser storage.

8

Yes, that seems feasible:

  1. (3) [Array(2), Array(2), Array(2)]
    1. 0: (2) [‘enonic:cs:app’, ‘{“theme”:“dark”,“pageComponentsViewCollapsed”:false}’]
    2. 1: (2) [‘blest.employee’, ‘[{“propertyName”:“count”,“type”:“count”,“selectedV…rch”,“selectedValue”:“leonidas”,“type”:“search”}]’]
    3. 2: (2) [‘graphiql:theme’, ‘light’]
    4. length: 3

-and by running in console:

const settings = JSON.parse(localStorage.getItem(‘enonic:cs:app’));
settings.theme = ‘light’;
localStorage.setItem(‘enonic:cs:app’, JSON.stringify(settings));

It changed to light! Thanks, that was it.

Would be nice to have that half moon symbol back, though :smile: I know my colleagues agrees!