Fixes #2655, Cant find setting button on examples page

client/modules/IDE/actions/ide.js

@@ -1,6 +1,7 @@
 import * as ActionTypes from '../../../constants';
 import { clearConsole } from './console';
 import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher';
+import { updatePreferences } from './preferences';
 
 export function startVisualSketch() {
   return {
@@ -293,3 +294,25 @@ export function createError(error) {
     error
   };
 }
+
+export function setTheme(value) {
+  // return {
+  //   type: ActionTypes.SET_THEME,
+  //   value
+  // };
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_THEME,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          theme: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}

client/modules/IDE/actions/preferences.js

@@ -2,7 +2,7 @@ import i18next from 'i18next';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 
-function updatePreferences(formParams, dispatch) {
+export function updatePreferences(formParams, dispatch) {
   apiClient
     .put('/preferences', formParams)
     .then(() => {})

client/modules/IDE/components/Header/Nav.jsx

@@ -25,7 +25,8 @@ import {
   newFolder,
   showKeyboardShortcutModal,
   startSketch,
-  stopSketch
+  stopSketch,
+  setTheme
 } from '../../actions/ide';
 import { logoutUser } from '../../../User/actions';
 import { CmControllerContext } from '../../pages/IDEView';
@@ -260,11 +261,29 @@ const LanguageMenu = () => {
   );
 };
 
+const ThemeMenu = () => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  return (
+    <NavDropdownMenu id="theme" title={t('Preferences.Theme')}>
+      <NavMenuItem onClick={() => dispatch(setTheme('light'))}>
+        {t('Nav.Theme.LightTheme')}
+      </NavMenuItem>
+      <NavMenuItem onClick={() => dispatch(setTheme('dark'))}>
+        {t('Nav.Theme.DarkTheme')}
+      </NavMenuItem>
+      <NavMenuItem onClick={() => dispatch(setTheme('contrast'))}>
+        {t('Nav.Theme.HighContrastTheme')}
+      </NavMenuItem>
+    </NavDropdownMenu>
+  );
+};
 const UnauthenticatedUserMenu = () => {
   const { t } = useTranslation();
   return (
     <ul className="nav__items-right" title="user-menu">
       {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
+      <ThemeMenu />
       <li className="nav__item">
         <Link to="/login" className="nav__auth-button">
           <span className="nav__item-header" title="Login">
@@ -293,6 +312,7 @@ const AuthenticatedUserMenu = () => {
   return (
     <ul className="nav__items-right" title="user-menu">
       {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
+      <ThemeMenu />
       <NavDropdownMenu
         id="account"
         title={

translations/locales/en-US/translations.json

@@ -30,6 +30,12 @@
       "About": "About"
     },
     "Lang": "Language",
+    "Theme": {
+      "Title": "Theme",
+      "LightTheme": "Light",
+      "DarkTheme": "Dark",
+      "HighContrastTheme": "High Contrast"
+    },
     "BackEditor": "Back to Editor",
     "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
     "Login": "Log in",