Dark/Light mode for apps based on Windows system theme as a keyboard shortcut
Tags: windows, theme, css
Published: 2023-06-07 09:06:10

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.

![Shortcut file properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgluww1r81v14gz6ahs4.png)
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:


![vscode theme settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svuzb920g8iyfyb41vpz.png)


## As a web developer how do I support this?
CSS has very handy [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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

![work in sunlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyygvgcjz5efs2do4vwc.jpg)