Devolutions ForumDevolutions Forum

Light/Dark mode to follow browser/OS?

Light/Dark mode to follow browser/OS?

avatar
Product: PowerShell Universal
Version: 4.x


Is there a clever way to let light/dark mode of the dashboard follow browser or Windows? The dashboard does not retain the setting but always defaults to light, so I’ve added:

Set-UDTheme -Name ‘Dark+’ -Variant ‘Dark’

Which works fine, except now I have some users that actually want light mode.

So either the detection or a way to preserve the users’ selection is needed.

avatar
(anonymous user)

Recommended Answer

This is working for me, can possible be optimized a bit, as the switch happens a few seconds into loading the page.

$Javascript = @"
function detectDarkMode() {
   return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
detectDarkMode()
"@
New-UDDynamic {
   IF (Invoke-UDJavaScript -JavaScript $Javascript) {
      Set-UDTheme -Name 'Dark+' -Variant 'Dark'
   }
}


All Comments (6)

avatar

i would recommend taking a look at Invoke-UDJavascript, specifically for the window.matchMedia method. you can invoke a callback at that point written in powershell

avatar

Yeah, I’ve got the window.matchMedia down and it shows the correct value, but getting that value back to PowerShell to set the theme is apparently beyond me…

avatar

Would it perchance work to put the Code in an New-UDDynamic, that loads on page load, and executes Set-UDTheme -Name ‘Dark+’ -Variant ‘Dark’ based on the values from window.matchMedia?

Can you share the code for getting the values? I’d like to make use of it as well

avatar

Possibly, except I’m missing how to transfer the value from JS to PS…

The code is:

function detectDarkMode() {
    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
}
return detectDarkMode();


avatar

This is working for me, can possible be optimized a bit, as the switch happens a few seconds into loading the page.

$Javascript = @"
function detectDarkMode() {
   return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
detectDarkMode()
"@
New-UDDynamic {
   IF (Invoke-UDJavaScript -JavaScript $Javascript) {
      Set-UDTheme -Name 'Dark+' -Variant 'Dark'
   }
}


avatar

Works like a charm here as well, thanks! Confused myself with the “return” command…