#34

frontend/src/pages/users/SettingPage.tsx

@@ -454,7 +454,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
       () => getResolvedThemeFromSelection (draftActiveThemeId, draftCustomThemes),
       [draftActiveThemeId, draftCustomThemes],
   )
-  const draftTagColours = selectedTheme.tagColours
+  const draftTagColours = selectedTheme.tokens.tagColours
 
   const setActiveTab = (tab: SettingsTab) => {
     const params = new URLSearchParams (location.search)
@@ -498,7 +498,10 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 
     const customTheme = createCustomThemeFromBase (
 	selectedTheme.baseTheme,
-	{ ...selectedTheme.tagColours },
+	{
+	    ...selectedTheme.tokens,
+	    tagColours: { ...selectedTheme.tokens.tagColours },
+	},
     )
     const nextCustomThemes = {
 	...draftCustomThemes,
@@ -681,9 +684,12 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 	      ...editable.customThemes,
 	      [editable.activeThemeId]: {
 		  ...editableTheme,
-		  tagColours: {
-		      ...editableTheme.tagColours,
-		      [category]: colour,
+		  tokens: {
+		      ...editableTheme.tokens,
+		      tagColours: {
+			  ...editableTheme.tokens.tagColours,
+			  [category]: colour,
+		      },
 		  },
 	      },
 	  }
@@ -699,8 +705,11 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 		  ...draftCustomThemes,
 		  [draftActiveThemeId]: {
 		      ...draftCustomThemes[draftActiveThemeId],
-		      tagColours: {
-			  ...defaultThemeTagColoursFor (selectedTheme.baseTheme),
+		      tokens: {
+			  ...draftCustomThemes[draftActiveThemeId].tokens,
+			  tagColours: {
+			      ...defaultThemeTagColoursFor (selectedTheme.baseTheme),
+			  },
 		      },
 		  },
 	      },
@@ -716,10 +725,13 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 		  ...draftCustomThemes,
 		  [draftActiveThemeId]: {
 		      ...draftCustomThemes[draftActiveThemeId],
-		      tagColours: {
-			  ...draftCustomThemes[draftActiveThemeId].tagColours,
-			  [category]:
-			      defaultThemeTagColoursFor (selectedTheme.baseTheme)[category],
+		      tokens: {
+			  ...draftCustomThemes[draftActiveThemeId].tokens,
+			  tagColours: {
+			      ...draftCustomThemes[draftActiveThemeId].tokens.tagColours,
+			      [category]:
+				  defaultThemeTagColoursFor (selectedTheme.baseTheme)[category],
+			  },
 		      },
 		  },
 	      },