Add option to automatically switch light/dark theme to match system theme

[jlorenzetti]

🚀 Feature Request

📝 Description

Some macOS apps (like Chrome or GitHub Desktop) make it possible to automatically switch their color scheme (Light/Dark) to match system wide appearance preferences.

If the system appearance preference is set to Auto, then the dark color scheme is adopted system wide at night.

It would be nice if Responsively could support this too.

✨ Describe the solution you'd like

There could be a third option named "System" in the Preferences pane, under Appearence > Theme.

[open-collective-bot]

Hey @jlorenzetti 👋,

Thank you for opening an issue. We will get back to you as soon as we can. Have you seen our Open Collective page? Please consider contributing financially to our project. This will help us involve more contributors and get to issues like yours faster.

https://opencollective.com/responsively

We offer priority support for all financial contributors. Don't forget to add priority label once you become one! 😄

[pranshul98]

Hi there, 👋 I am new to open source contribution, wanted to pick this issue, as it is labeled "Good First Issue" for beginners,
I read about the project and really liked the idea, I'd love to contribute and add this feature mentioned in #619
Can you please provide me a heads-up on where to start from?
Thanks 😃

[jjavierdguezas]

Hi there, 👋 I am new to open source contribution, wanted to pick this issue, as it is labeled "Good First Issue" for beginners,
I read about the project and really liked the idea, I'd love to contribute and add this feature mentioned in #619
Can you please provide me a heads-up on where to start from?
Thanks 😃

Hi @pranshul98 thanks for considering solving this

We have two "kind" of theme switch inside Responsively
1- For responsively UI:

in app\components\UserPreferences\index.js

2- For devices:

in app\components\PrefersColorSchemeSwitch\index.js (and app\main.dev.js)

So we need to add a new option in both like "Match OS Theme" (for devices button switch, maybe a third icon)

to detect the OS color theme with electron you can use electron.nativeTheme

// this has not been tested!!

import { nativeTheme } from "electron";
const current = nativeTheme.themeSource ;
nativeTheme.themeSource  = 'system'; // changes to system's defaults
const  isDarkMode = nativeTheme.shouldUseDarkColors;
nativeTheme.themeSource  = current;

Here

responsively-app/desktop-app/app/main.dev.js

Lines 278 to 282 in ff5ac81

	// Set theme based on user preference
	const themeSource = (settings.get(USER_PREFERENCES) || {}).theme;
	if (themeSource) {
	nativeTheme.themeSource = themeSource;
	}

The UI theme is set based on user preferences, there you should do something like:

 // Set theme based on user preference
  const themeSource = (settings.get(USER_PREFERENCES) || {}).theme;
  if (themeSource) {
    if (themeSource === 'Match OS')
       // detect and set theme from OS
    else
        nativeTheme.themeSource = themeSource;
  }

and similar to devices theme

we can detect OS theme on startup and use that value when "Match OS Theme" is selected (ideally detect OS theme when the option is set)

If you still want to solve this, let me know and I'll assign this to you

cc: @manojVivek

[pranshul98]

Surely, I'll start working on this issue please assign it to me 👍