feat: custom themes (#885)

Author: KaneFreeman

BREAKING_CHANGES.md

@@ -1,2 +1,3 @@
 View Filters config structure changed
-View Groups config structure changed
+View Groups config structure changed
+`theme` props removed (use new `useTheme` hook instead)

packages/core/dev-test/backends/gitlab/index.js

@@ -153,6 +153,8 @@ CMS.registerShortcode('youtube', {
     return [src];
   },
   control: ({ src, onChange, theme }) => {
+    const theme = useTheme();
+
     return h('span', {}, [
       h('input', {
         key: 'control-input',
@@ -162,8 +164,8 @@ CMS.registerShortcode('youtube', {
         },
         style: {
           width: '100%',
-          backgroundColor: theme === 'dark' ? 'rgb(30, 41, 59)' : 'white',
-          color: theme === 'dark' ? 'white' : 'black',
+          backgroundColor: theme.common.gray,
+          color: theme.text.primary,
           padding: '4px 8px',
         },
       }),

packages/core/dev-test/index.js

@@ -12,12 +12,13 @@ const PostPreview = ({ entry, widgetFor }) => {
 };
 
 const PostPreviewCard = ({ entry, theme, hasLocalBackup, collection }) => {
+  const theme = useTheme();
   const date = new Date(entry.data.date);
 
   const month = date.getMonth() + 1;
   const day = date.getDate();
 
-  const imageField = useMemo(() => collection.fields.find((f) => f.name === 'image'), []);
+  const imageField = useMemo(() => collection.fields.find(f => f.name === 'image'), []);
   const image = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return h(
@@ -49,7 +50,7 @@ const PostPreviewCard = ({ entry, theme, hasLocalBackup, collection }) => {
             justifyContent: 'space-between',
             alignItems: 'start',
             gap: '4px',
-            color: theme === 'dark' ? 'white' : 'inherit',
+            color: theme.text.primary,
           },
         },
         h(
@@ -268,6 +269,14 @@ CMS.registerAdditionalLink({
   },
 });
 
+CMS.registerTheme({
+  name: 'Custom Red Orange',
+  extends: 'dark',
+  primary: {
+    main: '#ff4500',
+  }
+});
+
 CMS.registerShortcode('youtube', {
   label: 'YouTube',
   openTag: '[',
@@ -284,6 +293,8 @@ CMS.registerShortcode('youtube', {
     return [src];
   },
   control: ({ src, onChange, theme }) => {
+    const theme = useTheme();
+
     return h('span', {}, [
       h('input', {
         key: 'control-input',
@@ -293,8 +304,8 @@ CMS.registerShortcode('youtube', {
         },
         style: {
           width: '100%',
-          backgroundColor: theme === 'dark' ? 'rgb(30, 41, 59)' : 'white',
-          color: theme === 'dark' ? 'white' : 'black',
+          backgroundColor: theme.common.gray,
+          color: theme.text.primary,
           padding: '4px 8px',
         },
       }),

packages/core/src/actions/globalUI.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import { THEME_CHANGE } from '../constants';
 
-export function changeTheme(theme: 'dark' | 'light') {
+export function changeTheme(theme: string) {
   return { type: THEME_CHANGE, payload: theme } as const;
 }
 

packages/core/src/bootstrap.tsx

@@ -23,9 +23,6 @@ import type { ConnectedProps } from 'react-redux';
 import type { BaseField, Config, UnknownField } from './interface';
 import type { RootState } from './store';
 
-import './styles/datetime/calendar.css';
-import './styles/datetime/clock.css';
-import './styles/datetime/datetime.css';
 import './styles/main.css';
 
 const ROOT_ID = 'nc-root';

packages/core/src/components/App.tsx

@@ -1,4 +1,3 @@
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
@@ -20,18 +19,21 @@ import { currentBackend } from '@staticcms/core/backend';
 import { changeTheme } from '../actions/globalUI';
 import { invokeEvent } from '../lib/registry';
 import { getDefaultPath } from '../lib/util/collection.util';
+import { isNotNullish } from '../lib/util/null.util';
+import { isEmpty } from '../lib/util/string.util';
 import { generateClassNames } from '../lib/util/theming.util';
-import { selectTheme } from '../reducers/selectors/globalUI';
-import { useAppDispatch, useAppSelector } from '../store/hooks';
+import { useAppDispatch } from '../store/hooks';
+import NotFoundPage from './NotFoundPage';
 import CollectionRoute from './collections/CollectionRoute';
 import { Alert } from './common/alert/Alert';
 import { Confirm } from './common/confirm/Confirm';
 import Loader from './common/progress/Loader';
 import EditorRoute from './entry-editor/EditorRoute';
 import MediaPage from './media-library/MediaPage';
-import NotFoundPage from './NotFoundPage';
 import Page from './page/Page';
 import Snackbars from './snackbar/Snackbars';
+import ThemeManager from './theme/ThemeManager';
+import useTheme from './theme/hooks/useTheme';
 
 import type { Credentials, TranslatedProps } from '@staticcms/core/interface';
 import type { RootState } from '@staticcms/core/store';
@@ -78,25 +80,7 @@ const App = ({
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
-  const mode = useAppSelector(selectTheme);
-
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary: {
-            main: 'rgb(37 99 235)',
-          },
-          ...(mode === 'dark' && {
-            background: {
-              paper: 'rgb(15 23 42)',
-            },
-          }),
-        },
-      }),
-    [mode],
-  );
+  const theme = useTheme();
 
   const configError = useCallback(
     (error?: string) => {
@@ -175,21 +159,6 @@ const App = ({
     dispatch(discardDraft());
   }, [dispatch, pathname, searchParams]);
 
-  useEffect(() => {
-    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-    if (
-      localStorage.getItem('color-theme') === 'dark' ||
-      (!('color-theme' in localStorage) &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      document.documentElement.classList.add('dark');
-      dispatch(changeTheme('dark'));
-    } else {
-      document.documentElement.classList.remove('dark');
-      dispatch(changeTheme('light'));
-    }
-  }, [dispatch]);
-
   const [prevUser, setPrevUser] = useState(user);
   useEffect(() => {
     if (!prevUser && user) {
@@ -255,6 +224,20 @@ const App = ({
     });
   }, []);
 
+  useEffect(() => {
+    const defaultTheme = config.config?.theme?.default_theme;
+    if (isEmpty(defaultTheme)) {
+      return;
+    }
+
+    const themeName = localStorage.getItem('color-theme');
+    if (isNotNullish(themeName)) {
+      return;
+    }
+
+    dispatch(changeTheme(defaultTheme));
+  }, [config.config?.theme?.default_theme, dispatch]);
+
   if (!config.config) {
     return configError(t('app.app.configNotFound'));
   }
@@ -268,7 +251,7 @@ const App = ({
   }
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeManager theme={theme} element={document.documentElement}>
       <ScrollSync key="scroll-sync" enabled={scrollSyncEnabled}>
         <>
           <div key="back-to-top-anchor" id="back-to-top-anchor" />
@@ -282,7 +265,7 @@ const App = ({
           </div>
         </>
       </ScrollSync>
-    </ThemeProvider>
+    </ThemeManager>
   );
 };
 

packages/core/src/components/ErrorBoundary.css

@@ -1,8 +1,8 @@
 .CMS_ErrorBoundary_root {
+  background: var(--background-dark);
+
   @apply flex
     flex-col
-    bg-slate-50
-    dark:bg-slate-900
     min-h-screen
     gap-2;
 }
@@ -21,8 +21,9 @@
 }
 
 .CMS_ErrorBoundary_report-link {
-  @apply text-blue-500
-    hover:underline;
+  color: var(--primary-main);
+
+  @apply hover:underline;
 }
 
 .CMS_ErrorBoundary_content {

packages/core/src/components/MainView.css

@@ -1,7 +1,7 @@
 .CMS_MainView_root {
-  @apply flex
-    bg-slate-50
-    dark:bg-slate-900;
+  background: var(--background-dark);
+
+  @apply flex;
 }
 
 .CMS_MainView_body {

packages/core/src/components/collections/Collection.css

@@ -60,12 +60,12 @@
 }
 
 .CMS_Collection_header {
+  color: var(--text-primary);
+
   @apply text-xl
     font-semibold
     flex
     items-center
-    text-gray-800
-    dark:text-gray-300
     gap-2
     md:w-auto;
 }

packages/core/src/components/collections/CollectionSearch.css

@@ -13,48 +13,47 @@
 }
 
 .CMS_CollectionSearch_icon {
+  color: var(--text-secondary);
+
   @apply w-5
-    h-5
-    text-gray-500
-    dark:text-gray-400;
+    h-5;
 }
 
 .CMS_CollectionSearch_input {
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--background-light) 50%, transparent);
+  border-color: color-mix(in srgb, var(--background-divider) 50%, transparent);
+
   @apply block
     w-full
     p-1.5
     pl-10
     text-sm
-    text-gray-800
     border
-    border-gray-300
     rounded-lg
-    bg-gray-50
     focus-visible:outline-none
-    focus:ring-4
-    focus:ring-gray-200
-    dark:bg-gray-700
-    dark:border-gray-600
-    dark:placeholder-gray-400
-    dark:text-white
-    dark:focus:ring-slate-700;
+    focus:ring-4;
+
+  &:placeholder {
+    color: var(--text-disabled);
+  }
+
+  &:focus {
+    --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);
+  }
 }
 
 .CMS_CollectionSearch_search-in {
+  background: var(--background-light);
+
   @apply absolute
     overflow-auto
     rounded-md
-    bg-white
     text-base
     shadow-md
-    ring-1
-    ring-black
-    ring-opacity-5
     focus:outline-none
     sm:text-sm
-    z-[1300]
-    dark:bg-slate-700
-    dark:shadow-lg;
+    z-[1300];
 }
 
 .CMS_CollectionSearch_search-in-content {
@@ -64,17 +63,22 @@
 }
 
 .CMS_CollectionSearch_search-in-label {
+  color: var(--text-secondary);
+
   @apply text-base
-    text-slate-500
-    dark:text-slate-400
     py-2
     px-3;
 }
 
 .CMS_CollectionSearch_search-in-option {
+  color: var(--text-primary);
+
+  &:hover {
+    color: var(--text-secondary);
+    background: var(--primary-main);
+  }
+
   @apply cursor-pointer
-    hover:bg-blue-500
-    hover:text-gray-100
     py-2
     px-3;
 }