Configure themes for readability and usability
Themes affect readability and usability across the UI and documentation. They are not just aesthetic choices—they directly impact how quickly you can parse information and how comfortable extended work sessions are.
The default theme in QuantenRam is designed for clarity and reduced eye strain during long coding sessions. Whether you prefer light or dark mode, the key considerations are the same: sufficient contrast for text readability, clear visual hierarchy, and consistent color semantics.
Check contrast for light and dark
Text must remain readable in both light and dark modes. The contrast ratio between text and background should meet WCAG AA standards at minimum. This is especially important for code snippets and documentation.
Keep interaction states visible
Users need to know what's interactive and what's not. Hover states, focus indicators, and active states should be clearly distinguishable. Don't rely solely on color—use borders, shadows, or size changes as well.
Use semantic colors
Colors should convey meaning, not just decoration. Red for errors, green for success, yellow for warnings—these conventions help users understand status at a glance. Don't repurpose semantic colors for purely aesthetic reasons.
Theme configuration in QuantenRam
QuantenRam supports both light and dark themes, with automatic detection based on system preferences. You can override this in your settings if you have a strong preference.
// Theme configuration
{
"theme": {
"mode": "auto",
// Options: "light", "dark", "auto"
"accent_color": "blue",
// Options: "blue", "green", "purple", "orange"
"font_size": "medium",
// Options: "small", "medium", "large"
"code_theme": "github-dark"
// Options for dark: "github-dark", "monokai", "dracula"
// Options for light: "github-light", "solarized-light"
}
}The auto setting respects your system's color scheme preference. If you work across different environments, this ensures consistent theming without manual adjustment.
Custom themes and CSS variables
For advanced users, QuantenRam exposes CSS variables that can be customized. This allows you to create a personalized theme that matches your preferences or corporate branding.
/* Custom theme override */
:root {
--primary-color: #1a73e8;
--success-color: #34a853;
--warning-color: #fbbc04;
--error-color: #ea4335;
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #202124;
--text-secondary: #5f6368;
}
html.dark {
--bg-primary: #1a1a1a;
--bg-secondary: #252525;
--text-primary: #e8eaed;
--text-secondary: #9aa0a6;
}When customizing themes, always test both light and dark variants. A color that looks good in one mode may be illegible in the other. Test with actual content, not just placeholder text.
Themes are functional, not decorative. A well-configured theme reduces cognitive load and prevents eye strain during long work sessions. Choose for readability, not just aesthetics.