[BUG]: Invalid theme values in localStorage cause UI breakage

[zaibamachhaliya]

Bug Description

The ThemeProvider component in src/context/ThemeContext.jsx directly reads the theme value from localStorage without validating it.

Currently, the application uses:

const [theme, setTheme] = useState(() => {
return localStorage.getItem('oe_theme') || 'dark'
})

Important Context:

• The UI only provides two theme options: Light and Dark
• Users cannot select invalid values through the UI
• However, localStorage can be modified externally in these scenarios:
  1. A user manually edits localStorage via browser DevTools
  2. Third-party browser extensions modify the stored value
  3. Another application using the same localStorage key 'oe_theme' writes different values
  4. Corrupted data due to race conditions or code bugs
  5. An older version of the app stores values in a different format

The Problem:

• If any invalid value (e.g., 'blue', 'red', 'light-mode', 'invalid') gets stored in oe_theme, the app uses it directly
• The application only defines theme styles for 'dark' and 'light'
• Invalid values cause CSS variables to fail, resulting in:
  • Incorrect background/foreground colors
  • Unreadable text due to poor contrast
  • Broken UI components
  • No user feedback about what went wrong

Expected Behavior:

• App should validate stored theme values
• Only accept 'dark' or 'light' as valid
• Fallback to 'dark' for any invalid value
• Log a warning in console for debugging

Steps to Reproduce

• Open the OrgExplorer application.
• Open the browser DevTools.
• Go to Application → Local Storage.
• Select the domain where OrgExplorer is running.
• Find the oe_theme key.
• Change its value to an invalid value, for example:

blue

• Refresh the page.
• Observe the UI.

Alternative Method

Open the browser console and run:

localStorage.setItem('oe_theme', 'invalid')

Then refresh the page.

Logs and Screenshots

Console Output

No error is currently shown in the console. The invalid value is silently accepted.

DOM Inspection

When an invalid value is stored:

Expected behavior:

CSS Variable Issue

Theme-related CSS variables may not be applied as expected when an unsupported data-theme value is used.

For example:

body {
background-color: var(--background);
color: var(--text);
}

With an invalid theme value, these variables may not resolve to the expected theme values.

Environment Details

• OS: Windows / macOS / Linux
• Browser: Chrome / Firefox / Safari / Edge
• Node.js: v18+
• OrgExplorer: Latest main branch
• Affected File: src/context/ThemeContext.jsx

The issue can affect pages and components that depend on the application's theme CSS variables.

Impact

Medium - Feature works but has issues

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates

[zaibamachhaliya]

Hi @Ri1tik
I would like to work on this issue. Please assign it to me.
Thank you!

[Ri1tik]

Hi @Ri1tik I would like to work on this issue. Please assign it to me. Thank you!

Assigned!!

[zaibamachhaliya]

Thanks @Ri1tik for assigning it to me. I’ll work on it and raise the PR in a few hours.