diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
index e38debae83..26fb6f7823 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
@@ -1,5 +1,6 @@
 // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
 
+import { useToken } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store';
 import { useAppSelector } from 'app/storeHooks';
@@ -22,13 +23,6 @@ const selector = createSelector(
   }
 );
 
-const gridLinesColor = {
-  dark: 'rgba(255, 255, 255, 0.2)',
-  green: 'rgba(255, 255, 255, 0.2)',
-  light: 'rgba(0, 0, 0, 0.2)',
-  ocean: 'rgba(136, 148, 184, 0.2)',
-};
-
 const IAICanvasGrid = () => {
   const currentTheme = useAppSelector(
     (state: RootState) => state.ui.currentTheme
@@ -37,6 +31,8 @@ const IAICanvasGrid = () => {
     useAppSelector(selector);
   const [gridLines, setGridLines] = useState<ReactNode[]>([]);
 
+  const [gridLineColor] = useToken('colors', ['gridLineColor']);
+
   const unscale = useCallback(
     (value: number) => {
       return value / stageScale;
@@ -45,9 +41,6 @@ const IAICanvasGrid = () => {
   );
 
   useLayoutEffect(() => {
-    const gridLineColor =
-      gridLinesColor[currentTheme as keyof typeof gridLinesColor];
-
     const { width, height } = stageDimensions;
     const { x, y } = stageCoordinates;
 
@@ -112,7 +105,14 @@ const IAICanvasGrid = () => {
     ));
 
     setGridLines(xLines.concat(yLines));
-  }, [stageScale, stageCoordinates, stageDimensions, currentTheme, unscale]);
+  }, [
+    stageScale,
+    stageCoordinates,
+    stageDimensions,
+    currentTheme,
+    unscale,
+    gridLineColor,
+  ]);
 
   return <Group>{gridLines}</Group>;
 };
diff --git a/invokeai/frontend/web/src/theme/colors/greenTea.ts b/invokeai/frontend/web/src/theme/colors/greenTea.ts
index 6da7fa3b82..06476c0513 100644
--- a/invokeai/frontend/web/src/theme/colors/greenTea.ts
+++ b/invokeai/frontend/web/src/theme/colors/greenTea.ts
@@ -1,10 +1,12 @@
+import { InvokeAIThemeColors } from 'theme/themeTypes';
 import { generateColorPalette } from '../util/generateColorPalette';
 
-export const greenTeaThemeColors = {
+export const greenTeaThemeColors: InvokeAIThemeColors = {
   base: generateColorPalette(223, 10),
   accent: generateColorPalette(155, 80),
   working: generateColorPalette(47, 68),
   warning: generateColorPalette(28, 75),
   ok: generateColorPalette(122, 49),
   error: generateColorPalette(0, 50),
+  gridLineColor: 'rgba(255, 255, 255, 0.2)',
 };
diff --git a/invokeai/frontend/web/src/theme/colors/invokeAI.ts b/invokeai/frontend/web/src/theme/colors/invokeAI.ts
index cf5b4221b7..a523ae38c8 100644
--- a/invokeai/frontend/web/src/theme/colors/invokeAI.ts
+++ b/invokeai/frontend/web/src/theme/colors/invokeAI.ts
@@ -1,10 +1,12 @@
+import { InvokeAIThemeColors } from 'theme/themeTypes';
 import { generateColorPalette } from 'theme/util/generateColorPalette';
 
-export const invokeAIThemeColors = {
+export const invokeAIThemeColors: InvokeAIThemeColors = {
   base: generateColorPalette(225, 15),
   accent: generateColorPalette(250, 50),
   working: generateColorPalette(47, 67),
   warning: generateColorPalette(28, 75),
   ok: generateColorPalette(113, 70),
   error: generateColorPalette(0, 76),
+  gridLineColor: 'rgba(255, 255, 255, 0.2)',
 };
diff --git a/invokeai/frontend/web/src/theme/colors/lightTheme.ts b/invokeai/frontend/web/src/theme/colors/lightTheme.ts
index 3a4d3b8747..8fdf199bb8 100644
--- a/invokeai/frontend/web/src/theme/colors/lightTheme.ts
+++ b/invokeai/frontend/web/src/theme/colors/lightTheme.ts
@@ -1,10 +1,12 @@
+import { InvokeAIThemeColors } from 'theme/themeTypes';
 import { generateColorPalette } from '../util/generateColorPalette';
 
-export const lightThemeColors = {
+export const lightThemeColors: InvokeAIThemeColors = {
   base: generateColorPalette(223, 10, true),
   accent: generateColorPalette(40, 80, true),
   working: generateColorPalette(47, 68, true),
   warning: generateColorPalette(28, 75, true),
   ok: generateColorPalette(122, 49, true),
   error: generateColorPalette(0, 50, true),
+  gridLineColor: 'rgba(0, 0, 0, 0.2)',
 };
diff --git a/invokeai/frontend/web/src/theme/colors/oceanBlue.ts b/invokeai/frontend/web/src/theme/colors/oceanBlue.ts
index 1f29def485..3462459c1c 100644
--- a/invokeai/frontend/web/src/theme/colors/oceanBlue.ts
+++ b/invokeai/frontend/web/src/theme/colors/oceanBlue.ts
@@ -1,10 +1,12 @@
+import { InvokeAIThemeColors } from 'theme/themeTypes';
 import { generateColorPalette } from '../util/generateColorPalette';
 
-export const oceanBlueColors = {
+export const oceanBlueColors: InvokeAIThemeColors = {
   base: generateColorPalette(220, 30),
   accent: generateColorPalette(210, 80),
   working: generateColorPalette(47, 68),
   warning: generateColorPalette(28, 75),
   ok: generateColorPalette(122, 49),
   error: generateColorPalette(0, 100),
+  gridLineColor: 'rgba(136, 148, 184, 0.2)',
 };
diff --git a/invokeai/frontend/web/src/theme/themeTypes.d.ts b/invokeai/frontend/web/src/theme/themeTypes.d.ts
new file mode 100644
index 0000000000..aeb7ae0411
--- /dev/null
+++ b/invokeai/frontend/web/src/theme/themeTypes.d.ts
@@ -0,0 +1,33 @@
+export declare type InvokeAIThemeColors = {
+  base: Partial<InvokeAIPaletteSteps>;
+  accent: Partial<InvokeAIPaletteSteps>;
+  working: Partial<InvokeAIPaletteSteps>;
+  warning: Partial<InvokeAIPaletteSteps>;
+  ok: Partial<InvokeAIPaletteSteps>;
+  error: Partial<InvokeAIPaletteSteps>;
+  gridLineColor: string;
+};
+
+export declare type InvokeAIPaletteSteps = {
+  0: string;
+  50: string;
+  100: string;
+  150: string;
+  200: string;
+  250: string;
+  300: string;
+  350: string;
+  400: string;
+  450: string;
+  500: string;
+  550: string;
+  600: string;
+  650: string;
+  700: string;
+  750: string;
+  800: string;
+  850: string;
+  900: string;
+  950: string;
+  1000: string;
+};
diff --git a/invokeai/frontend/web/src/theme/util/generateColorPalette.ts b/invokeai/frontend/web/src/theme/util/generateColorPalette.ts
index abd7939fa1..ed346c684a 100644
--- a/invokeai/frontend/web/src/theme/util/generateColorPalette.ts
+++ b/invokeai/frontend/web/src/theme/util/generateColorPalette.ts
@@ -1,26 +1,4 @@
-type paletteSteps = {
-  0: string;
-  50: string;
-  100: string;
-  150: string;
-  200: string;
-  250: string;
-  300: string;
-  350: string;
-  400: string;
-  450: string;
-  500: string;
-  550: string;
-  600: string;
-  650: string;
-  700: string;
-  750: string;
-  800: string;
-  850: string;
-  900: string;
-  950: string;
-  1000: string;
-};
+import { InvokeAIPaletteSteps } from 'theme/themeTypes';
 
 /**
  * Add two numbers together
@@ -61,8 +39,8 @@ export function generateColorPalette(
     '100',
   ];
 
-  const darkPalette: Partial<paletteSteps> = {};
-  const lightPalette: Partial<paletteSteps> = {};
+  const darkPalette: Partial<InvokeAIPaletteSteps> = {};
+  const lightPalette: Partial<InvokeAIPaletteSteps> = {};
 
   colorSteps.forEach((colorStep, index) => {
     darkPalette[