diff --git a/shared/contexts/ColorSchemeContext.tsx b/shared/contexts/ColorSchemeContext.tsx
index ef8c34c0..d5cc75a1 100644
--- a/shared/contexts/ColorSchemeContext.tsx
+++ b/shared/contexts/ColorSchemeContext.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { useStorage } from 'tailchat-shared';
+import { parseColorScheme } from '../../web/src/utils/color-scheme-helper';
 
 const ColorSchemeContext = React.createContext<{
   /**
@@ -28,5 +29,8 @@ export const ColorSchemeContextProvider: React.FC = React.memo((props) => {
 ColorSchemeContextProvider.displayName = 'ColorSchemeContextProvider';
 
 export function useColorScheme() {
-  return useContext(ColorSchemeContext);
+  const { colorScheme, setColorScheme } = useContext(ColorSchemeContext);
+  const { isDarkMode, extraSchemeName } = parseColorScheme(colorScheme);
+
+  return { colorScheme, setColorScheme, isDarkMode, extraSchemeName };
 }
diff --git a/web/src/App.tsx b/web/src/App.tsx
index c7265c27..3b9add33 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -34,8 +34,7 @@ const AppProvider: React.FC = React.memo((props) => {
 AppProvider.displayName = 'AppProvider';
 
 const AppContainer: React.FC = React.memo((props) => {
-  const { colorScheme } = useColorScheme();
-  const { isDarkMode, extraSchemeName } = parseColorScheme(colorScheme);
+  const { isDarkMode, extraSchemeName } = useColorScheme();
 
   return (
     <div