diff --git a/reflex/.templates/jinja/web/utils/context.js.jinja2 b/reflex/.templates/jinja/web/utils/context.js.jinja2
index 5f734a0c3..8faecd9d2 100644
--- a/reflex/.templates/jinja/web/utils/context.js.jinja2
+++ b/reflex/.templates/jinja/web/utils/context.js.jinja2
@@ -7,7 +7,7 @@ export const initialState = {{ initial_state|json_dumps }}
 export const initialState = {}
 {% endif %}
 
-export const defaultColorMode = "{{ default_color_mode }}"
+export const defaultColorMode = {{ default_color_mode }}
 export const ColorModeContext = createContext(null);
 export const UploadFilesContext = createContext(null);
 export const DispatchContext = createContext(null);
diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py
index 525f75cfb..00d4acc22 100644
--- a/reflex/compiler/compiler.py
+++ b/reflex/compiler/compiler.py
@@ -17,7 +17,7 @@ from reflex.components.component import (
     StatefulComponent,
 )
 from reflex.config import get_config
-from reflex.ivars.base import ImmutableVar
+from reflex.ivars.base import LiteralVar
 from reflex.state import BaseState
 from reflex.style import SYSTEM_COLOR_MODE
 from reflex.utils.exec import is_prod_mode
@@ -81,8 +81,8 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None)
         The compiled context file.
     """
     appearance = getattr(theme, "appearance", None)
-    if appearance is None or str(ImmutableVar.create_safe(appearance)) == "inherit":
-        appearance = SYSTEM_COLOR_MODE
+    if appearance is None or str(LiteralVar.create(appearance)) == '"inherit"':
+        appearance = LiteralVar.create(SYSTEM_COLOR_MODE)
 
     last_compiled_time = str(datetime.now())
     return (