@strapi/admin 4.2.0-alpha.5 → 4.2.0-alpha.6

package/admin/src/StrapiApp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { lightTheme } from '@strapi/design-system/themes';
+import { lightTheme, darkTheme } from '@strapi/design-system/themes';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
@@ -13,7 +13,6 @@ import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
 import Providers from './components/Providers';
-import Theme from './components/Theme';
 import languageNativeNames from './translations/languageNativeNames';
 import {
   INJECT_COLUMN_IN_TABLE,
@@ -34,7 +33,7 @@ class StrapiApp {
       locales: ['en'],
       menuLogo: MenuLogo,
       notifications: { releases: true },
-      theme: lightTheme,
+      themes: { light: lightTheme, dark: darkTheme },
       translations: {},
       tutorials: true,
     };
@@ -226,7 +225,7 @@ class StrapiApp {
     }
 
     if (this.customConfigurations?.theme) {
-      this.configurations.theme = merge(this.configurations.theme, this.customConfigurations.theme);
+      merge(this.configurations.themes.light, this.customConfigurations.theme);
     }
 
     if (this.customConfigurations?.notifications?.releases !== undefined) {
@@ -427,44 +426,43 @@ class StrapiApp {
     } = this.library;
 
     return (
-      <Theme theme={this.configurations.theme}>
-        <Providers
-          authLogo={this.configurations.authLogo}
-          components={components}
-          fields={fields}
-          localeNames={localeNames}
-          getAdminInjectedComponents={this.getAdminInjectedComponents}
-          getPlugin={this.getPlugin}
-          messages={this.configurations.translations}
-          menu={this.menu}
-          menuLogo={this.configurations.menuLogo}
-          plugins={this.plugins}
-          runHookParallel={this.runHookParallel}
-          runHookWaterfall={(name, initialValue, async = false) => {
-            return this.runHookWaterfall(name, initialValue, async, store);
-          }}
-          runHookSeries={this.runHookSeries}
-          settings={this.settings}
-          showTutorials={this.configurations.tutorials}
-          showReleaseNotification={this.configurations.notifications.releases}
-          store={store}
-        >
-          <>
-            <Helmet
-              link={[
-                {
-                  rel: 'icon',
-                  type: 'image/png',
-                  href: this.configurations.head.favicon,
-                },
-              ]}
-            />
-            <BrowserRouter basename={basename}>
-              <App store={store} />
-            </BrowserRouter>
-          </>
-        </Providers>
-      </Theme>
+      <Providers
+        authLogo={this.configurations.authLogo}
+        components={components}
+        fields={fields}
+        localeNames={localeNames}
+        getAdminInjectedComponents={this.getAdminInjectedComponents}
+        getPlugin={this.getPlugin}
+        messages={this.configurations.translations}
+        menu={this.menu}
+        menuLogo={this.configurations.menuLogo}
+        plugins={this.plugins}
+        runHookParallel={this.runHookParallel}
+        runHookWaterfall={(name, initialValue, async = false) => {
+          return this.runHookWaterfall(name, initialValue, async, store);
+        }}
+        runHookSeries={this.runHookSeries}
+        themes={this.configurations.themes}
+        settings={this.settings}
+        showTutorials={this.configurations.tutorials}
+        showReleaseNotification={this.configurations.notifications.releases}
+        store={store}
+      >
+        <>
+          <Helmet
+            link={[
+              {
+                rel: 'icon',
+                type: 'image/png',
+                href: this.configurations.head.favicon,
+              },
+            ]}
+          />
+          <BrowserRouter basename={basename}>
+            <App store={store} />
+          </BrowserRouter>
+        </>
+      </Providers>
     );
   }
 }

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -17,7 +17,7 @@ const ModalWrapper = styled(Flex)`
   z-index: 4;
   inset: 0;
   /* this is theme.colors.neutral800 with opacity */
-  background: ${({ theme }) => `${theme.colors.neutral800}33`};
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
 `;
 
 const Modal = ({ onClose, onSkip, children, hideSkip }) => {

package/admin/src/components/Providers/index.js

@@ -9,6 +9,8 @@ import GuidedTour from '../GuidedTour';
 import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
 import Notifications from '../Notifications';
 import OverlayBlocker from '../OverlayBlocker';
+import ThemeToggleProvider from '../ThemeToggleProvider';
+import Theme from '../Theme';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,41 +38,45 @@ const Providers = ({
   settings,
   showReleaseNotification,
   showTutorials,
-
   store,
+  themes,
 }) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <Provider store={store}>
-        <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-          <ConfigurationsContext.Provider
-            value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
-          >
-            <StrapiAppProvider
-              getPlugin={getPlugin}
-              menu={menu}
-              plugins={plugins}
-              runHookParallel={runHookParallel}
-              runHookWaterfall={runHookWaterfall}
-              runHookSeries={runHookSeries}
-              settings={settings}
-            >
-              <LibraryProvider components={components} fields={fields}>
-                <LanguageProvider messages={messages} localeNames={localeNames}>
-                  <AutoReloadOverlayBlockerProvider>
-                    <OverlayBlocker>
-                      <GuidedTour>
-                        <Notifications>{children}</Notifications>
-                      </GuidedTour>
-                    </OverlayBlocker>
-                  </AutoReloadOverlayBlockerProvider>
-                </LanguageProvider>
-              </LibraryProvider>
-            </StrapiAppProvider>
-          </ConfigurationsContext.Provider>
-        </AdminContext.Provider>
-      </Provider>
-    </QueryClientProvider>
+    <ThemeToggleProvider themes={themes}>
+      <Theme>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store}>
+            <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+              <ConfigurationsContext.Provider
+                value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
+              >
+                <StrapiAppProvider
+                  getPlugin={getPlugin}
+                  menu={menu}
+                  plugins={plugins}
+                  runHookParallel={runHookParallel}
+                  runHookWaterfall={runHookWaterfall}
+                  runHookSeries={runHookSeries}
+                  settings={settings}
+                >
+                  <LibraryProvider components={components} fields={fields}>
+                    <LanguageProvider messages={messages} localeNames={localeNames}>
+                      <AutoReloadOverlayBlockerProvider>
+                        <OverlayBlocker>
+                          <GuidedTour>
+                            <Notifications>{children}</Notifications>
+                          </GuidedTour>
+                        </OverlayBlocker>
+                      </AutoReloadOverlayBlockerProvider>
+                    </LanguageProvider>
+                  </LibraryProvider>
+                </StrapiAppProvider>
+              </ConfigurationsContext.Provider>
+            </AdminContext.Provider>
+          </Provider>
+        </QueryClientProvider>
+      </Theme>
+    </ThemeToggleProvider>
   );
 };
 
@@ -104,6 +110,33 @@ Providers.propTypes = {
   showReleaseNotification: PropTypes.bool.isRequired,
   showTutorials: PropTypes.bool.isRequired,
   store: PropTypes.object.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
 };
 
 export default Providers;

package/admin/src/components/Theme/index.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
 import PropTypes from 'prop-types';
-import { lightTheme } from '@strapi/design-system/themes';
+import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 
-const Theme = ({ children, theme }) => (
-  <ThemeProvider theme={theme}>
-    {children}
-    <GlobalStyle />
-  </ThemeProvider>
-);
+const Theme = ({ children }) => {
+  const { currentTheme, themes } = useThemeToggle();
 
-Theme.propTypes = {
-  children: PropTypes.element.isRequired,
-  theme: PropTypes.object,
+  return (
+    <ThemeProvider theme={themes[currentTheme] || themes.light}>
+      {children}
+      <GlobalStyle />
+    </ThemeProvider>
+  );
 };
 
-Theme.defaultProps = {
-  theme: lightTheme,
+Theme.propTypes = {
+  children: PropTypes.element.isRequired,
 };
 
 export default Theme;

package/admin/src/components/ThemeToggleProvider/index.js

@@ -0,0 +1,66 @@
+/**
+ *
+ * ThemeToggleProvider
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeToggleContext } from '../../contexts';
+
+const THEME_KEY = 'STRAPI_THEME';
+
+const getDefaultTheme = () => {
+  const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  const persistedTheme = localStorage.getItem(THEME_KEY);
+
+  return persistedTheme || browserTheme;
+};
+
+const ThemeToggleProvider = ({ children, themes }) => {
+  const [currentTheme, setCurrentTheme] = useState(getDefaultTheme());
+
+  const handleChangeTheme = nextTheme => {
+    setCurrentTheme(nextTheme);
+    localStorage.setItem(THEME_KEY, nextTheme);
+  };
+
+  return (
+    <ThemeToggleContext.Provider value={{ currentTheme, onChangeTheme: handleChangeTheme, themes }}>
+      {children}
+    </ThemeToggleContext.Provider>
+  );
+};
+
+ThemeToggleProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
+};
+
+export default ThemeToggleProvider;

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -49,6 +49,8 @@ const getSelectStyles = theme => {
         ...base,
         width: '100%',
         marginTop: theme.spaces[1],
+        backgroundColor: theme.colors.neutral0,
+        color: theme.colors.neutral800,
         borderRadius: '4px !important',
         borderTopLeftRadius: '4px !important',
         borderTopRightRadius: '4px !important',
@@ -76,7 +78,7 @@ const getSelectStyles = theme => {
       return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
     },
     placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0 }),
+    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
     valueContainer: base => ({
       ...base,
       padding: 0,

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -29,7 +29,8 @@ export const EditorStylesContainer = styled.div`
 
   .CodeMirror-scrollbar-filler,
   .CodeMirror-gutter-filler {
-    background-color: white; /* The little square between H and V scrollbars */
+    /* The little square between H and V scrollbars */
+    background-color: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   /* GUTTER */
@@ -158,7 +159,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     position: relative;
     overflow: hidden;
-    background: white;
+    background: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   .CodeMirror-scroll {
@@ -292,6 +293,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror-cursor {
     position: absolute;
     pointer-events: none;
+    border-color: ${({ theme }) => `${theme.colors.neutral800}`};
   }
   .CodeMirror-measure pre {
     position: static;

package/admin/src/contexts/ThemeToggle/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeToggleContext = createContext({});
+
+export default ThemeToggleContext;

package/admin/src/contexts/index.js

@@ -1,3 +1,4 @@
 export { default as AdminContext } from './Admin';
 export { default as ConfigurationsContext } from './Configurations';
 export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';
+export { default as ThemeToggleContext } from './ThemeToggle';

package/admin/src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useSettingsMenu } from './useSettingsMenu';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useReleaseNotification } from './useReleaseNotification';
+export { default as useThemeToggle } from './useThemeToggle';

package/admin/src/hooks/useThemeToggle/index.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ThemeToggleContext } from '../../contexts';
+
+const useThemeToggle = () => {
+  const context = useContext(ThemeToggleContext);
+
+  return context;
+};
+
+export default useThemeToggle;

package/admin/src/pages/Admin/Onboarding/index.js

@@ -21,7 +21,7 @@ const Button = styled.button`
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
   svg {
-    color: ${({ theme }) => theme.colors.neutral0};
+    color: ${({ theme }) => theme.colors.buttonNeutral0};
   }
 `;
 

package/admin/src/pages/HomePage/SocialLinks.js

@@ -30,9 +30,6 @@ const StyledReddit = styled(Reddit)`
   > path:first-child {
     fill: #ff4500;
   }
-  > path:last-child {
-    fill: ${({ theme }) => theme.colors.neutral0};
-  }
 `;
 const StyledStrapi = styled(Strapi)`
   > path:first-child {

package/admin/src/pages/ProfilePage/index.js

@@ -9,12 +9,13 @@ import {
   useNotification,
   useOverlayBlocker,
   auth,
+  useTracking,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { Formik } from 'formik';
+import upperFirst from 'lodash/upperFirst';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import pick from 'lodash/pick';
-import omit from 'lodash/omit';
 import { Helmet } from 'react-helmet';
 import { Main } from '@strapi/design-system/Main';
 import { Typography } from '@strapi/design-system/Typography';
@@ -31,10 +32,15 @@ import Eye from '@strapi/icons/Eye';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Check from '@strapi/icons/Check';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
+import { useThemeToggle } from '../../hooks';
 import { fetchUser, putUser } from './utils/api';
 import schema from './utils/schema';
 import { getFullName } from '../../utils';
 
+const DocumentationLink = styled.a`
+  color: ${({ theme }) => theme.colors.primary600};
+`;
+
 const PasswordInput = styled(TextInput)`
   ::-ms-reveal {
     display: none;
@@ -59,9 +65,11 @@ const ProfilePage = () => {
   const { setUserDisplayName } = useAppInfos();
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { notifyStatus } = useNotifyAT();
+  const { currentTheme, themes: allApplicationThemes, onChangeTheme } = useThemeToggle();
   useFocusWhenNavigate();
 
   const { status, data } = useQuery('user', () => fetchUser(), {
@@ -83,14 +91,18 @@ const ProfilePage = () => {
 
   const isLoading = status !== 'success';
 
-  const submitMutation = useMutation(body => putUser(omit(body, 'confirmPassword')), {
+  const submitMutation = useMutation(body => putUser(body), {
     onSuccess: async data => {
       await queryClient.invalidateQueries('user');
 
-      auth.setUserInfo(data);
+      auth.setUserInfo(
+        pick(data, ['email', 'firstname', 'lastname', 'username', 'preferedLanguage'])
+      );
       const userDisplayName = data.username || getFullName(data.firstname, data.lastname);
       setUserDisplayName(userDisplayName);
       changeLocale(data.preferedLanguage);
+      onChangeTheme(data.currentTheme);
+      trackUsage('didChangeMode', { newMode: data.currentTheme });
 
       toggleNotification({
         type: 'success',
@@ -128,9 +140,16 @@ const ProfilePage = () => {
     );
   };
 
-  const fieldsToPick = ['email', 'firstname', 'lastname', 'username', 'preferedLanguage'];
+  const fieldsToPick = [
+    'currentTheme',
+    'email',
+    'firstname',
+    'lastname',
+    'username',
+    'preferedLanguage',
+  ];
 
-  const initialData = pick(data, fieldsToPick);
+  const initialData = pick({ ...data, currentTheme }, fieldsToPick);
 
   if (isLoading) {
     return (
@@ -154,6 +173,10 @@ const ProfilePage = () => {
     );
   }
 
+  const themesToDisplay = Object.keys(allApplicationThemes).filter(
+    themeName => allApplicationThemes[themeName]
+  );
+
   return (
     <Main aria-busy={isSubmittingForm}>
       <Helmet
@@ -424,20 +447,20 @@ const ProfilePage = () => {
                                 id:
                                   'Settings.profile.form.section.experience.interfaceLanguageHelp',
                                 defaultMessage:
-                                  'Selection will change the interface language only for you. Please refer to this {documentation} to make other languages available for your team.',
+                                  'Preference changes will apply only to you. More information is available {here}.',
                               },
                               {
-                                documentation: (
-                                  <a
+                                here: (
+                                  <DocumentationLink
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                                   >
                                     {formatMessage({
                                       id: 'Settings.profile.form.section.experience.documentation',
-                                      defaultMessage: 'documentation',
+                                      defaultMessage: 'here',
                                     })}
-                                  </a>
+                                  </DocumentationLink>
                                 ),
                               }
                             )}
@@ -487,6 +510,47 @@ const ProfilePage = () => {
                               })}
                             </Select>
                           </GridItem>
+                          <GridItem s={12} col={6}>
+                            <Select
+                              label={formatMessage({
+                                id: 'Settings.profile.form.section.experience.mode.label',
+                                defaultMessage: 'Interface mode',
+                              })}
+                              placeholder={formatMessage({
+                                id: 'components.Select.placeholder',
+                                defaultMessage: 'Select',
+                              })}
+                              hint={formatMessage({
+                                id: 'Settings.profile.form.section.experience.mode.hint',
+                                defaultMessage: 'Displays your interface in the chosen mode.',
+                              })}
+                              value={values.currentTheme}
+                              onChange={e => {
+                                handleChange({
+                                  target: { name: 'currentTheme', value: e },
+                                });
+                              }}
+                            >
+                              {themesToDisplay.map(theme => {
+                                const label = formatMessage(
+                                  {
+                                    id:
+                                      'Settings.profile.form.section.experience.mode.option-label',
+                                    defaultMessage: '{name} mode',
+                                  },
+                                  {
+                                    name: upperFirst(theme),
+                                  }
+                                );
+
+                                return (
+                                  <Option value={theme} key={theme}>
+                                    {label}
+                                  </Option>
+                                );
+                              })}
+                            </Select>
+                          </GridItem>
                         </Grid>
                       </Stack>
                     </Box>

package/admin/src/pages/ProfilePage/utils/api.js

@@ -1,3 +1,4 @@
+import omit from 'lodash/omit';
 import { axiosInstance } from '../../../core/utils';
 
 const fetchUser = async () => {
@@ -7,9 +8,10 @@ const fetchUser = async () => {
 };
 
 const putUser = async body => {
-  const { data } = await axiosInstance.put('/admin/users/me', body);
+  const dataToSend = omit(body, ['confirmPassword', 'currentTheme']);
+  const { data } = await axiosInstance.put('/admin/users/me', dataToSend);
 
-  return data.data;
+  return { ...data.data, currentTheme: body.currentTheme };
 };
 
 export { fetchUser, putUser };

package/admin/src/translations/en.json

@@ -133,10 +133,13 @@
   "Settings.permissions.users.tabs.label": "Tabs Permissions",
   "Settings.profile.form.notify.data.loaded": "Your profile data has been loaded",
   "Settings.profile.form.section.experience.clear.select": "Clear the interface language selected",
-  "Settings.profile.form.section.experience.documentation": "documentation",
+  "Settings.profile.form.section.experience.here": "here",
   "Settings.profile.form.section.experience.interfaceLanguage": "Interface language",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "This will only display your own interface in the chosen language.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Selection will change the interface language only for you. Please refer to this {documentation} to make other languages available for your team.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Preference changes will apply only to you. More information is available {here}.",
+  "Settings.profile.form.section.experience.mode.label": "Interface mode",
+  "Settings.profile.form.section.experience.mode.hint": "Displays your interface in the chosen mode.",
+  "Settings.profile.form.section.experience.mode.option-label": "{name} mode",
   "Settings.profile.form.section.experience.title": "Experience",
   "Settings.profile.form.section.helmet.title": "User profile",
   "Settings.profile.form.section.password.title": "Change password",