♻️ Use color scheme on board customize page

src/components/Board/Customize/Appearance/AppearanceCustomization.tsx

@@ -3,6 +3,7 @@ import {
   ColorSwatch,
   Group,
   Input,
+  MantineTheme,
   Slider,
   Stack,
   Text,
@@ -14,6 +15,8 @@ import {
 import { useTranslation } from 'next-i18next';
 import { highlight, languages } from 'prismjs';
 import Editor from 'react-simple-code-editor';
+import { useColorScheme } from '~/hooks/use-colorscheme';
+import { useColorTheme } from '~/tools/color';
 
 import { useBoardCustomizationFormContext } from '../form';
 
@@ -44,6 +47,7 @@ const ColorSelector = ({ type }: ColorSelectorProps) => {
   const { t } = useTranslation('boards/customize');
   const theme = useMantineTheme();
   const form = useBoardCustomizationFormContext();
+  const { setPrimaryColor, setSecondaryColor } = useColorTheme();
 
   const colors = Object.keys(theme.colors).map((color) => ({
     swatch: theme.colors[color][6],
@@ -58,7 +62,14 @@ const ColorSelector = ({ type }: ColorSelectorProps) => {
             key={color}
             component="button"
             type="button"
-            onClick={() => form.getInputProps(`appearance.${type}`).onChange(color)}
+            onClick={() => {
+              form.getInputProps(`appearance.${type}`).onChange(color);
+              if (type === 'primaryColor') {
+                setPrimaryColor(color);
+              } else {
+                setSecondaryColor(color);
+              }
+            }}
             color={swatch}
             style={{ cursor: 'pointer' }}
           >
@@ -73,6 +84,7 @@ const ColorSelector = ({ type }: ColorSelectorProps) => {
 const ShadeSelector = () => {
   const form = useBoardCustomizationFormContext();
   const theme = useMantineTheme();
+  const { setPrimaryShade } = useColorTheme();
 
   const primaryColor = form.values.appearance.primaryColor;
   const primaryShades = theme.colors[primaryColor].map((_, shade) => ({
@@ -88,7 +100,10 @@ const ShadeSelector = () => {
             key={shade}
             component="button"
             type="button"
-            onClick={() => form.getInputProps(`appearance.shade`).onChange(shade)}
+            onClick={() => {
+              form.getInputProps(`appearance.shade`).onChange(shade);
+              setPrimaryShade(shade as MantineTheme['primaryShade']);
+            }}
             color={swatch}
             style={{ cursor: 'pointer' }}
           >

src/config/provider.tsx

@@ -39,9 +39,10 @@ export const ConfigProvider = ({
 
   useEffect(() => {
     const config = currentConfig ?? fallbackConfig;
-    setPrimaryColor(config?.settings.customization.colors.primary || 'red');
+    if (!config) return;
-    setSecondaryColor(config?.settings.customization.colors.secondary || 'orange');
+    setPrimaryColor(config?.settings.customization.colors.primary ?? 'red');
-    setPrimaryShade(config?.settings.customization.colors.shade || 6);
+    setSecondaryColor(config?.settings.customization.colors.secondary ?? 'orange');
+    setPrimaryShade(config?.settings.customization.colors.shade ?? 6);
     return () => {
       setPrimaryColor('red');
       setSecondaryColor('orange');

src/pages/_app.tsx

@@ -40,19 +40,22 @@ function App(
     packageAttributes: ServerSidePackageAttributesType;
     editModeEnabled: boolean;
     config?: ConfigType;
+    primaryColor?: MantineTheme['primaryColor'];
+    secondaryColor?: MantineTheme['primaryColor'];
+    primaryShade?: MantineTheme['primaryShade'];
     session: Session;
   }>
 ) {
   const { Component, pageProps } = props;
 
   const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(
-    props.pageProps.config?.settings.customization.colors.primary || 'red'
+    props.pageProps.primaryColor ?? 'red'
   );
   const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(
-    props.pageProps.config?.settings.customization.colors.secondary || 'orange'
+    props.pageProps.secondaryColor ?? 'orange'
   );
   const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(
-    props.pageProps.config?.settings.customization.colors.shade || 6
+    props.pageProps.primaryShade ?? 6
   );
   const colorTheme = {
     primaryColor,

src/pages/board/[slug].tsx

@@ -57,6 +57,9 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   return {
     props: {
       config,
+      primaryColor: config.settings.customization.colors.primary,
+      secondaryColor: config.settings.customization.colors.secondary,
+      primaryShade: config.settings.customization.colors.shade,
       ...translations,
     },
   };

src/pages/board/[slug]/customize.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'next-i18next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { z } from 'zod';
 import { AppearanceCustomization } from '~/components/Board/Customize/Appearance/AppearanceCustomization';
 import { GridstackCustomization } from '~/components/Board/Customize/Gridstack/GridstackCustomization';
@@ -28,8 +28,8 @@ import {
 import { MainLayout } from '~/components/layout/Templates/MainLayout';
 import { createTrpcServersideHelpers } from '~/server/api/helper';
 import { getServerAuthSession } from '~/server/auth';
+import { useColorTheme } from '~/tools/color';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
-import { boardNamespaces } from '~/tools/server/translation-namespaces';
 import { firstUpperCase } from '~/tools/shared/strings';
 import { api } from '~/utils/api';
 import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
@@ -212,7 +212,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
 
   const helpers = await createTrpcServersideHelpers({ req, res });
 
-  helpers.config.byName.prefetch({ name: routeParams.data.slug });
+  const config = await helpers.config.byName.fetch({ name: routeParams.data.slug });
 
   const translations = await getServerSideTranslations(
     [
@@ -231,6 +231,9 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
 
   return {
     props: {
+      primaryColor: config.settings.customization.colors.primary,
+      secondaryColor: config.settings.customization.colors.secondary,
+      primaryShade: config.settings.customization.colors.shade,
       trpcState: helpers.dehydrate(),
       ...translations,
     },

src/pages/board/index.tsx

@@ -47,6 +47,9 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   return {
     props: {
       config,
+      primaryColor: config.settings.customization.colors.primary,
+      secondaryColor: config.settings.customization.colors.secondary,
+      primaryShade: config.settings.customization.colors.shade,
       ...translations,
     },
   };