Dark/Light mode for apps based on Windows system theme as a keyboard shortcut

Hi friends, George here.

Have you ever taken your laptop from your dark programmer's office to a sunny rooftop to enjoy some fresh air, grab a beer and do some work?

Sure George, sounds like a great idea however, I can't see anything on my screen on that sunny rooftop!

Well, could the problem be that you have a dark mode active in all your apps? What if there was a way to quickly toggle system settings to light mode and all the apps will adjust their themes?

That exactly is what we are going to do!

Step 1

create a PowerShell script .ps1 file with following code (thanks chatGPT!):

$RegKeyPath = "HKCU:\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize"
$AppsUseLightTheme = Get-ItemProperty -Path $RegKeyPath -Name "AppsUseLightTheme"
$SystemUsesLightTheme = Get-ItemProperty -Path $RegKeyPath -Name "SystemUsesLightTheme"
if ($AppsUseLightTheme.AppsUseLightTheme -eq 1 -and $SystemUsesLightTheme.SystemUsesLightTheme -eq 1) {
Set-ItemProperty -Path $RegKeyPath -Name "AppsUseLightTheme" -Value 0
Set-ItemProperty -Path $RegKeyPath -Name "SystemUsesLightTheme" -Value 0
} else {
Set-ItemProperty -Path $RegKeyPath -Name "AppsUseLightTheme" -Value 1
Set-ItemProperty -Path $RegKeyPath -Name "SystemUsesLightTheme" -Value 1
}
Restart-Process -ProcessName explorer

Step 2

create a shorcut file in a convenient location and name it toggle.exe 

Step 3

Open your shortcut's file properties.
Add a target for your shortcut like this:
C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -ExecutionPolicy Bypass -File "C:\path\to\your\theme\toggle\script.ps1"
Also add a keyboard shortut you'd like to switch your themes.

Now half of the work is done! Let's test it. Press the keyboard shortcut and your Windows theme will toggle beteween dark/light mode.

Step 4

Set your apps to follow System theme. Many windows apps supports this options in their settings. For example: vscode allows you to set preffered light and dark themes when you turn on Auto Detect Color Scheme:

As a web developer how do I support this?

CSS has very handy prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
  .theme {
    background: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  .theme {
    background: white;
    color: black;
  }
}

In Angular, you can create service that will expose a signal like this

@Injectable({
  providedIn: 'root',
})
export class SystemMediaService {
  #query = '(prefers-color-scheme: dark)';
  #prefersColorScheme = signal<'dark' | 'light'>(window.matchMedia(this.#query).matches ? 'dark' : 'light');
  prefersColorScheme = computed(() => this.#prefersColorScheme());

  constructor() {
    window.matchMedia(this.#query).addEventListener('change', event => {
      this.#prefersColorScheme.set(event.matches ? 'dark' : 'light');
    });
  }
}

Enjoy your work in the sunlight