[Feature]: Persistent Light/Dark Theme Preference for Graph Visualization

[esmaeelE]

Description

The generated graph.html visualization currently defaults to a dark theme. It would be useful to support a persistent light/dark theme preference, especially for users working in environments where light mode is preferred.

Ideally, Graphify should provide a theme toggle in the generated visualization and remember the user's selection between sessions.

Proposed behavior

Add a theme selector/toggle with at least:

• ☀️ Light
• 🌙 Dark
• 🖥️ System

The selected theme should be persisted using browser storage (for example, localStorage) so that reopening the generated graph.html preserves the user's preference.

Expected behavior

For example:

First visit
    ↓
Use system preference
    ↓
User selects "Light"
    ↓
Save preference to localStorage
    ↓
Next time graph.html is opened
    ↓
Automatically use Light mode

Additional considerations

The theme should apply consistently to:

• Graph/canvas background
• Sidebar
• Search box
• Search results
• Node/edge information panels
• Legend
• Statistics panel
• Checkboxes and controls
• Text and secondary text
• Borders and separators
• Hover/selected states

It would also be useful if the default behavior could follow the operating system's prefers-color-scheme setting when no explicit preference has been saved.

Possible implementation

A simple implementation could use CSS variables:

:root {
    --bg: #ffffff;
    --panel-bg: #f8f9fa;
    --text: #222222;
    --secondary-text: #666666;
    --border: #d9dee5;
}

[data-theme="dark"] {
    --bg: #0f0f1a;
    --panel-bg: #1a1a2e;
    --text: #e0e0e0;
    --secondary-text: #aaa;
    --border: #333;
}

And persist the selection:

localStorage.setItem("graphify-theme", theme);

On startup:

const savedTheme = localStorage.getItem("graphify-theme");

if (savedTheme) {
    document.documentElement.dataset.theme = savedTheme;
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches

Proposed solution

Proposed solution

Add a theme selector to the generated graph.html with three options:

• Light
• Dark
• System — follows the user's OS/browser preference

The selected theme should be stored in localStorage so the preference persists when the generated HTML file is reopened.

The implementation could use CSS variables for theme-dependent colors and JavaScript to switch between themes. When no preference has been saved, Graphify should respect the browser's prefers-color-scheme setting.

The theme should cover the entire visualization UI, including the graph background, sidebar, search, legend, statistics, controls, text, borders, and hover/selection states.

This would allow users to choose their preferred appearance without modifying the generated HTML or Graphify's source code.

Alternatives considered

No response

Area

Graph building or querying

Are you willing to submit a PR?

Yes, but I will need guidance

Compatibility / behavior impact

Additional context

No response

[github-actions]

Thanks for opening this issue, @esmaeelE. A maintainer will take a look soon.

If you would like to discuss it in real time, come say hi on our Discord server. For longer-form questions and ideas there is also GitHub Discussions.

To help us triage, please make sure the report includes what you expected, what actually happened, and the steps (and a small sample) to reproduce it.