Added accesibility for default system theme to p5.js-web-editor

client/jest.setup.js

@@ -5,3 +5,35 @@ import 'regenerator-runtime/runtime';
 // See: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
+
+// Mock matchMedia
+window.matchMedia = jest.fn().mockImplementation((query) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: jest.fn(), // Deprecated
+  removeListener: jest.fn(), // Deprecated
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  dispatchEvent: jest.fn()
+}));
+
+// Mock localStorage
+const localStorageMock = (function () {
+  let store = {};
+  return {
+    getItem: jest.fn((key) => store[key] || null),
+    setItem: jest.fn((key, value) => {
+      store[key] = value.toString();
+    }),
+    removeItem: jest.fn((key) => {
+      delete store[key];
+    }),
+    clear: jest.fn(() => {
+      store = {};
+    })
+  };
+})();
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock
+});

client/modules/App/components/ThemeProvider.jsx

@@ -1,11 +1,62 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
-import theme from '../../../theme';
+import theme, { Theme } from '../../../theme';
+import { setTheme } from '../../IDE/actions/preferences';
 
 const Provider = ({ children }) => {
   const currentTheme = useSelector((state) => state.preferences.theme);
+  const dispatch = useDispatch();
+
+  // Detect system color scheme preference on initial load
+  useEffect(() => {
+    // Only apply system preference if the user hasn't explicitly set a theme
+    const userHasExplicitlySetTheme =
+      localStorage.getItem('has_set_theme') === 'true';
+    if (!userHasExplicitlySetTheme) {
+      const prefersDarkMode =
+        window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      if (prefersDarkMode) {
+        dispatch(setTheme(Theme.dark, { isSystemPreference: true }));
+      } else {
+        dispatch(setTheme(Theme.light, { isSystemPreference: true }));
+      }
+    }
+
+    // Listen for changes to system color scheme preference
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e) => {
+      if (localStorage.getItem('has_set_theme') !== 'true') {
+        dispatch(
+          setTheme(e.matches ? Theme.dark : Theme.light, {
+            isSystemPreference: true
+          })
+        );
+      }
+    };
+
+    // Add event listener with modern API if available
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+    } else {
+      // Fallback for older browsers
+      mediaQuery.addListener(handleChange);
+    }
+
+    // Clean up event listener
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener('change', handleChange);
+      } else {
+        mediaQuery.removeListener(handleChange);
+      }
+    };
+  }, [dispatch]);
+
   return (
     <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
   );

client/modules/IDE/actions/preferences.js

@@ -184,7 +184,7 @@ export function setGridOutput(value) {
   };
 }
 
-export function setTheme(value) {
+export function setTheme(value, { isSystemPreference = false } = {}) {
   // return {
   //   type: ActionTypes.SET_THEME,
   //   value
@@ -194,6 +194,13 @@ export function setTheme(value) {
       type: ActionTypes.SET_THEME,
       value
     });
+
+    // If this is a user-initiated theme change (not from system preference),
+    // mark that the user has explicitly set a theme
+    if (!isSystemPreference) {
+      localStorage.setItem('has_set_theme', 'true');
+    }
+
     const state = getState();
     if (state.user.authenticated) {
       const formParams = {

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -256,9 +256,27 @@ describe('<Preferences />', () => {
   };
 
   describe('testing theme switching', () => {
+    beforeEach(() => {
+      // Mock localStorage for theme tests
+      Object.defineProperty(window, 'localStorage', {
+        value: {
+          getItem: jest.fn().mockImplementation((key) => {
+            if (key === 'has_set_theme') return 'true';
+            return null;
+          }),
+          setItem: jest.fn(),
+          removeItem: jest.fn()
+        },
+        writable: true
+      });
+    });
+
     describe('dark mode', () => {
       it('switch to light', () => {
-        subject({ theme: 'dark' });
+        const { store } = subject({ theme: 'dark' });
+
+        // Ensure the theme is actually set to dark in the Redux store
+        expect(store.getState().preferences.theme).toBe('dark');
 
         const themeRadioCurrent = screen.getByRole('radio', {
           name: /dark theme on/i

client/modules/IDE/components/Preferences/index.jsx

@@ -172,6 +172,29 @@ export default function Preferences() {
           <div className="preference">
             <h4 className="preference__title">{t('Preferences.Theme')}</h4>
             <fieldset className="preference__options">
+              <input
+                type="radio"
+                onChange={() => {
+                  localStorage.removeItem('has_set_theme');
+                  const prefersDarkMode =
+                    window.matchMedia &&
+                    window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  dispatch(
+                    setTheme(prefersDarkMode ? 'dark' : 'light', {
+                      isSystemPreference: true
+                    })
+                  );
+                }}
+                aria-label={t('Preferences.SystemThemeARIA')}
+                name="system theme"
+                id="system-theme-on"
+                className="preference__radio-button"
+                value="system"
+                checked={localStorage.getItem('has_set_theme') !== 'true'}
+              />
+              <label htmlFor="system-theme-on" className="preference__option">
+                {t('Preferences.SystemTheme')}
+              </label>
               <input
                 type="radio"
                 onChange={() => dispatch(setTheme('light'))}
@@ -180,7 +203,10 @@ export default function Preferences() {
                 id="light-theme-on"
                 className="preference__radio-button"
                 value="light"
-                checked={theme === 'light'}
+                checked={
+                  theme === 'light' &&
+                  localStorage.getItem('has_set_theme') === 'true'
+                }
               />
               <label htmlFor="light-theme-on" className="preference__option">
                 {t('Preferences.LightTheme')}
@@ -193,7 +219,10 @@ export default function Preferences() {
                 id="dark-theme-on"
                 className="preference__radio-button"
                 value="dark"
-                checked={theme === 'dark'}
+                checked={
+                  theme === 'dark' &&
+                  localStorage.getItem('has_set_theme') === 'true'
+                }
               />
               <label htmlFor="dark-theme-on" className="preference__option">
                 {t('Preferences.DarkTheme')}
@@ -206,7 +235,10 @@ export default function Preferences() {
                 id="high-contrast-theme-on"
                 className="preference__radio-button"
                 value="contrast"
-                checked={theme === 'contrast'}
+                checked={
+                  theme === 'contrast' &&
+                  localStorage.getItem('has_set_theme') === 'true'
+                }
               />
               <label
                 htmlFor="high-contrast-theme-on"

client/modules/IDE/pages/FullView.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import PreviewFrame from '../components/PreviewFrame';

client/modules/Legal/pages/Legal.jsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import RouterTab from '../../../common/RouterTab';