UBCSailbot · fyang151 · Aug 26, 2025 · Aug 31, 2025 · Aug 31, 2025 · Sep 3, 2025
@@ -43,37 +43,37 @@
         "yzhang.markdown-all-in-one",
         // "zachflower.uncrustify",
 
-				// UBCSailbot
-				"awesomektvn.toggle-semicolon",
-				"bierner.github-markdown-preview",
-				"christian-kohler.path-intellisense",
-				"cschlosser.doxdocgen",
-				"DavidAnson.vscode-markdownlint",
-				"eamodio.gitlens",
-				// "github.copilot",
-				"github.vscode-github-actions",
-				"Gruntfuggly.todo-tree",
-				"jebbs.plantuml",
-				"jeff-hykin.better-cpp-syntax",
-				"KevinRose.vsc-python-indent",
-				"llvm-vs-code-extensions.vscode-clangd",
-				"matepek.vscode-catch2-test-adapter",
-				"mechatroner.rainbow-csv",
-				"mongodb.mongodb-vscode",
-				"ranch-hand-robotics.rde-ros-2",
-				"ms-python.black-formatter",
-				"ms-python.isort",
-				"ms-python.vscode-pylance",
-				"ms-toolsai.jupyter",
-				"ms-vsliveshare.vsliveshare",
-				"ms-python.mypy-type-checker",
-				"njpwerner.autodocstring",
-				"randomfractalsinc.geo-data-viewer",
-				"stevejpurves.cucumber",
-				"streetsidesoftware.code-spell-checker",
-				"vscode-icons-team.vscode-icons",
-				"zxh404.vscode-proto3"
-			]
-		}
-	}
+        // UBCSailbot
+        "awesomektvn.toggle-semicolon",
+        "bierner.github-markdown-preview",
+        "christian-kohler.path-intellisense",
+        "cschlosser.doxdocgen",
+        "DavidAnson.vscode-markdownlint",
+        "eamodio.gitlens",
+        // "github.copilot",
+        "github.vscode-github-actions",
+        "Gruntfuggly.todo-tree",
+        "jebbs.plantuml",
+        "jeff-hykin.better-cpp-syntax",
+        "KevinRose.vsc-python-indent",
+        "llvm-vs-code-extensions.vscode-clangd",
+        "matepek.vscode-catch2-test-adapter",
+        "mechatroner.rainbow-csv",
+        "mongodb.mongodb-vscode",
+        "ranch-hand-robotics.rde-ros-2",
+        "ms-python.black-formatter",
+        "ms-python.isort",
+        "ms-python.vscode-pylance",
+        "ms-toolsai.jupyter",
+        "ms-vsliveshare.vsliveshare",
+        "ms-python.mypy-type-checker",
+        "njpwerner.autodocstring",
+        "randomfractalsinc.geo-data-viewer",
+        "stevejpurves.cucumber",
+        "streetsidesoftware.code-spell-checker",
+        "vscode-icons-team.vscode-icons",
+        "zxh404.vscode-proto3"
+      ]
+    }
+  }
 }
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Providers } from '@/lib/providers';
-import '../styles/globals.css';
+import { SET_THEME } from './themeNoFlashScript';
+import '@/styles/variables.css';
+import '@/styles/globals.css';
 
 export default function RootLayout({
   children,
@@ -9,6 +11,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang='en'>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: SET_THEME }} />
+      </head>
       <body>
         <Providers>{children}</Providers>
       </body>

@@ -0,0 +1,9 @@
+// this is a very gimmicky way of setting theme without using cookies
+// i dont think its worth it so we should just use cookies instead lol
+
+export const SET_THEME = `
+(function(){
+  var stored = localStorage.getItem('theme');
+  document.documentElement.classList.toggle(stored ?? 'dark');
+})();
+`;
@@ -0,0 +1,29 @@
+'use client';
+
+// very strange component.
+// it doesnt return anything, we just need this to be a component because we need to use react hooks
+
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setTheme, Theme } from '@/lib/redux/theme/themeSlice';
+
+export function ThemeSyncListener() {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === 'theme' && e.newValue) {
+        const newTheme = e.newValue === 'dark' ? Theme.Dark : Theme.Light;
+        dispatch(setTheme(newTheme));
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [dispatch]);
+
+  return null;
+}
@@ -5,7 +5,13 @@ import { Provider } from 'react-redux';
 
 /* Instruments */
 import { reduxStore } from '@/lib/redux';
+import { ThemeSyncListener } from '@/lib/ThemeSyncListener';
 
 export const Providers = (props: React.PropsWithChildren) => {
-  return <Provider store={reduxStore}>{props.children}</Provider>;
+  return (
+    <Provider store={reduxStore}>
+      <ThemeSyncListener />
+      {props.children}
+    </Provider>
+  );
 };
@@ -1,5 +1,6 @@
 /* Instruments */
 import { combineReducers } from 'redux';
+import themeReducer from './theme/themeSlice';
 import GPSReducer from '@/stores/GPS/GPSReducers';
 import GlobalPathReducer from '@/stores/GlobalPath/GlobalPathReducers';
 import AISShipsReducer from '@/stores/AISShips/AISShipsReducers';
@@ -12,6 +13,7 @@ import DataFilterReducer from '@/stores/DataFilter/DataFilterReducers';
 
 export function rootReducer() {
   const reducerMap = {
+    theme: themeReducer,
     gps: new GPSReducer().reducer,
     aisShips: new AISShipsReducer().reducer,
     localPath: new LocalPathReducer().reducer,

@@ -16,11 +16,35 @@ import createSagaMiddleware from 'redux-saga';
 import { rootReducer } from './rootReducer';
 import { middleware } from './middleware';
 import { rootSaga } from './rootSaga';
+import { Theme } from './theme/themeSlice';
+
+const getPreloadedTheme = () => {
+  if (typeof window === 'undefined') {
+    return Theme.Dark;
+  }
+
+  try {
+    const stored = localStorage.getItem('theme');
+    if (stored === 'dark') return Theme.Dark;
+    if (stored === 'light') return Theme.Light;
+  } catch {
+    // may error out if user disables localstorage or something. thats fine.
+  }
+
+  return Theme.Dark;
+};
 
 const createReduxStore = () => {
   const sagaMiddleWare = createSagaMiddleware();
+  const preloadedState =
+    typeof window !== 'undefined'
+      ? {
+          theme: { current: getPreloadedTheme() },
+        }
+      : undefined;
   const store = configureStore({
     reducer: rootReducer(),
+    preloadedState,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware().concat([sagaMiddleWare, ...middleware]),
     enhancers: [applyMiddleware(sagaMiddleWare)],

@@ -0,0 +1,46 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export enum Theme {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+interface ThemeState {
+  current: Theme;
+}
+
+export const themeSlice = createSlice({
+  name: 'theme',
+  initialState: {
+    current: Theme.Dark,
+  },
+  reducers: {
+    setTheme: (state, action: PayloadAction<Theme>) => {
+      state.current = action.payload;
+      document.documentElement.classList.toggle(
+        'dark',
+        action.payload === Theme.Dark,
+      );
+      localStorage.setItem(
+        'theme',
+        action.payload === Theme.Dark ? 'dark' : 'light',
+      );
+    },
+    toggleTheme: (state) => {
+      const newTheme = state.current === Theme.Light ? Theme.Dark : Theme.Light;
+      state.current = newTheme;
+      document.documentElement.classList.toggle(
+        'dark',
+        newTheme === Theme.Dark,
+      );
+      localStorage.setItem('theme', newTheme === Theme.Dark ? 'dark' : 'light');
+    },
+  },
+});
+
+export const { setTheme, toggleTheme } = themeSlice.actions;
+
+export default themeSlice.reducer;
+
+export const selectTheme = (state: { theme: ThemeState }) =>
+  state.theme.current;
@@ -3,8 +3,8 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  background-color: #090909;
-  color: #ffffff;
+  background-color: var(--accent-color-1);
+  color: var(--accent-color-2);
 }
 
 html,
@@ -31,5 +31,5 @@ a {
 }
 
 svg {
-  fill: white;
+  fill: var(--accent-color-2);
 }
@@ -0,0 +1,27 @@
+:root {
+  --light-accent-1: white;
+  --light-accent-2: #090909;
+  --light-accent-3: #262626;
+
+  --dark-accent-1: #090909;
+  --dark-accent-2: white;
+  --dark-accent-3: #6b6b6b;
+
+  --blue: #0059EB;
+  --purple: #8F42D9;
+  --pink: #E7006E;
+  --red: #E60F26;
+  --yellow: #FF9200;
+  --green: #009534;
+  --teal: #00937C;
+
+  --accent-color-1: var(--light-accent-1);
+  --accent-color-2: var(--light-accent-2);
+  --accent-color-3: var(--light-accent-3);
+}
+
+.dark {
+  --accent-color-1: var(--dark-accent-1);
+  --accent-color-2: var(--dark-accent-2);
+  --accent-color-3: var(--dark-accent-3);
+}