[Feature Request] Wallpapers: Adding separate paths for light and dark themes and dynamically changes with current windows theme color

[Louis047]

What is the request?

A feature addition for wallpapers widget where the user can add separate paths for both light theme and dark theme, which also dynamically changes with the current os theme color.

Why is it useful?

This is useful as not only does it enable users to organize their wallpapers but also adapt it to the os theme as well.

How could it be implemented?

can be implemented like this:

wallpapers:
    type: "yasb.wallpapers.WallpapersWidget"
    options:
      label: "<span>\udb83\ude09</span>"
      path: str # This lets user to choose either to use dynamic paths (`dark`/`light`) based on the os theme color with "dynamic" or use "normal" image path
      image_path:
        dark: "$env:USERPROFILE/Pictures/Wallpapers/Home Screen/Dark"
        light: "$env:USERPROFILE/Pictures/Wallpapers/Home Screen/Light"
        normal: "$env:USERPROFILE/Pictures/Wallpapers/Home Screen"
      ...

Then gallery fetches then automatically based on the path provided. then the wallpaper changes on the event of theme color toggle.

Additional context

Nothing much, everything is explained above. Hope this possible to implement and taken into consideration for the upcoming major release.

[EmilBerbakov]

I made myself a light/dark switch that also changes the wallpaper using a CustomWidget and a PowerShell script.

You can maybe use it as a starting point to implement something like this without having an official widget.

Here's the relevant snippets. I named it light_switch:
The yaml portion of the config:

  light_switch:
    type: "yasb.custom.CustomWidget"
    options:
      class_name : "light_switch"
      label: "<span></span>"
      keybindings:
        - keys: "ctrl+alt+shift+d"
          action: "exec cmd /c pwsh -NoProfile -ExecutionPolicy Bypass -File <path to the yasb folder>/yasb/scripts/light-switch.ps1"

and then the PowerShell script:

$path = 'HKCU:\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize'
$sys = 'SystemUsesLightTheme'
$app = 'AppsUseLightTheme'

$sysVal = Get-ItemPropertyValue -Path $path -Name $sys
$appVal = Get-ItemPropertyValue -Path $path -Name $app

Set-ItemProperty -Path $path -Name $sys -Value $( 1-$sysVal)
Set-ItemProperty -Path $path -Name $app -Value $( 1-$appVal)

$wallpaper = "<path-to-wallpapers>\$(( 1-$sysVal -eq 1 ) ? 'light-mode.jpeg' : 'dark-mode.jpeg')"

Add-Type @"
using System;
using System.Runtime.InteropServices;
public static class NativeMethods {
  [DllImport("user32.dll",SetLastError=true)]
  public static extern bool SystemParametersInfo(int uAction, int uParam, string lpvParam, int fuWinIni);
}
"@

[NativeMethods]::SystemParametersInfo(20, 0, $wallpaper, 0x01 -bor 0x02) | Out-Null

Add-Type @"
using System;
using System.Runtime.InteropServices;
public static class WinAPI {
  [DllImport("user32.dll",CharSet=CharSet.Auto)]
  public static extern IntPtr SendMessageTimeout(IntPtr hWnd, uint Msg, UIntPtr wParam, string lParam, uint fuFlags, uint uTimeout, out UIntPtr lpdwResult);
}
"@
$HWND_BROADCAST = [IntPtr]0xffff
$WM_SETTINGCHANGE = 0x001A
$SMTO_ABORTIFHUNG = 0x2
[UIntPtr]$res = [UIntPtr]::Zero
[WinAPI]::SendMessageTimeout($HWND_BROADCAST, $WM_SETTINGCHANGE, [UIntPtr]::Zero, "ImmersiveColorSet", $SMTO_ABORTIFHUNG, 5000, [ref]$res) | Out-Null

With this setup, I can press ctrl+alt+shift+d to swap between light and dark mode, and also change my wallpaper and accent color:

My next step in this process is to have the script also change the colors of the YASB bar, so that it's white in dark mode and what I have now in dark mode.

[Louis047]

@EmilBerbakov Hey this sure looks good as a base to start with for the compatibility. But I would have to sacrifice the gallery option for this which i don't want. Hope the devs notice this feature and be considered for v2.

[EmilBerbakov]

So I ended up fiddling with this some more, and I ended up making a setup that uses the automatic accent color tech for Windows, shoves them into a CSS file, and then updates the colors of YASB according to that accent color. If you're curious, this is the updated PowerShell script:

$path = 'HKCU:\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize'
$sys = 'SystemUsesLightTheme'
$app = 'AppsUseLightTheme'

$sysVal = Get-ItemPropertyValue -Path $path -Name $sys
$appVal = Get-ItemPropertyValue -Path $path -Name $app

Set-ItemProperty -Path $path -Name $sys -Value $( 1-$sysVal)
Set-ItemProperty -Path $path -Name $app -Value $( 1-$appVal)

$isLightMode = 1-$sysVal -eq 1

$wallpaper = "C:\Users\8eber\Downloads\$(($isLightMode) ? 'light-mode.jpeg' : 'dark-mode.jpeg')"

Add-Type @"
using System;
using System.Runtime.InteropServices;
public static class NativeMethods {
  [DllImport("user32.dll",SetLastError=true)]
  public static extern bool SystemParametersInfo(int uAction, int uParam, string lpvParam, int fuWinIni);
}
"@

[NativeMethods]::SystemParametersInfo(20, 0, $wallpaper, 0x01 -bor 0x02) | Out-Null

Add-Type @"
using System;
using System.Runtime.InteropServices;
public static class WinAPI {
  [DllImport("user32.dll",CharSet=CharSet.Auto)]
  public static extern IntPtr SendMessageTimeout(IntPtr hWnd, uint Msg, UIntPtr wParam, string lParam, uint fuFlags, uint uTimeout, out UIntPtr lpdwResult);
}
"@
$HWND_BROADCAST = [IntPtr]0xffff
$WM_SETTINGCHANGE = 0x001A
$SMTO_ABORTIFHUNG = 0x2
[UIntPtr]$res = [UIntPtr]::Zero
[WinAPI]::SendMessageTimeout($HWND_BROADCAST, $WM_SETTINGCHANGE, [UIntPtr]::Zero, "ImmersiveColorSet", $SMTO_ABORTIFHUNG, 5000, [ref]$res) | Out-Null

# $AccentColor = Get-ItemPropertyValue -Path 'HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Accent' -Name 'AccentColorMenu'

# $AccentPalette = Get-ItemPropertyValue -Path 'HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Accent' -Name 'AccentPalette'
# $ColorBytes = $AccentPalette[0x10..0x13]
# # Set-Content -Path '~/.config/yasb/vars.css' -Value ":root { --main: #$([System.Convert]::ToString($AccentColor, 16).Substring(2)); }"
#
# $Color4 = "#{0:X2}{1:X2}{2:X2}" -f $ColorBytes[2], $ColorBytes[1], $ColorBytes[0]
#
# Set-Content -Path '~/.config/yasb/vars.css' -Value ":root { --color4: $($Color4); }"
$AccentPalette = Get-ItemProperty -Path "HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Accent" -Name "AccentPalette"
if ($AccentPalette) {
    $cssContent = ":root {"
    for ($i = 0; $i -lt 8; $i++) {
        $offset = $i * 4
        $r = $AccentPalette.AccentPalette[$offset]
        $g = $AccentPalette.AccentPalette[$offset + 1]
        $b = $AccentPalette.AccentPalette[$offset + 2]
        $hexColor = "#{0:X2}{1:X2}{2:X2}" -f $r, $g, $b
        $cssContent += " --color$($i): $($hexColor); "
    }
    $cssContent += "}"
    Set-Content -Path '~/.config/yasb/vars.css' -Value $cssContent
}

Right now I have it such that activating my custom widget switches between light and dark mode. On that switch, the wallpaper is swapped out, and seven colors are pulled out of the AccentPalette Registry Key. These colors are put into a CSS file as CSS variables named color0 through color7, and I have YASB using those variables throughout the style.css sheet:

Looking at your initial ask, I'm now wondering if it should be something else like, upon activating this theoretical theme switcher widget, you pick a wallpaper, choose light or dark mode, and then everything updates off of that choice.

I'm also wondering if, for this widget, instead of doing this whole "select wallpaper then select light or dark mode" thing, we instead integrate it with Window's already existing theme system, where the widget just swaps between the themes you have selected, and whether the theme is light or dark is dependent on how you set up the theme.

All of this to say, I am interested in working on a theming widget of some kind, but I'm still unsure how I exactly want this to work...

[Louis047]

So I ended up fiddling with this some more, and I ended up making a setup that uses the automatic accent color tech for Windows, shoves them into a CSS file, and then updates the colors of YASB according to that accent color. If you're curious, this is the updated PowerShell script

Damn, this is really cool! I love the idea that windows is becoming more customizable like linux. Would like to test this when I get enough time.

Looking at your initial ask, I'm now wondering if it should be something else like, upon activating this theoretical theme switcher widget, you pick a wallpaper, choose light or dark mode, and then everything updates off of that choice.

Yes, exactly! This is very achievable in linux easily with the help of quickshell and other dependencies to connect with but yeah it requires a steep learning curve which unfortunately doesn't align with me well as I'm lazy and want things to be done just like that, hope the customizations were easy like in windows 😅