Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

Hi @raclim, @lindapaiste, @nickcombs32 we can get the system's mode and initialise the mode with the reducer we are using to set the theme.

Which will help us to get the system mode by default and when user select the mode from the option we will change the mode. below I have added the dummy code for it, also will be raising a PR for this issue.

// will get system mode from this function
const getSystemTheme = () => {
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)')
.matches;
return prefersDarkMode ? 'dark' : 'light';
};

// system mode is present in variable systemTheme
const systemTheme = getSystemTheme();

// initialising the theme variable with the system's mode
theme: systemTheme

Please do let me know if there is anything to improve...

Thanks