Themes
OpenAlgo Themes
OpenAlgo features a sophisticated theming system powered by DaisyUI, offering 30 professionally designed themes that enhance your trading experience with beautiful, consistent, and accessible user interfaces.

Overview
The OpenAlgo theming system provides:
30 Professional Themes: Extensive color schemes from minimalist to vibrant
Mode-Specific Themes: Visual distinction between Live and Analyze modes
Instant Switching: Real-time theme changes without page reload
Persistent Preferences: Your theme selection is saved across sessions
Responsive Design: All themes are optimized for desktop, tablet, and mobile
Accessibility: WCAG-compliant color contrasts and ARIA-friendly components
Available Themes
OpenAlgo includes 30 carefully crafted themes to suit every preference:
Light Themes
light - Clean, professional white interface
cupcake - Soft pastels with warm tones
bumblebee - Energetic yellow and black
emerald - Fresh green with modern aesthetics
corporate - Professional blue-gray palette
retro - Nostalgic warm tones
valentine - Romantic pink and red
garden - Natural green and earthy colors
aqua - Cool cyan and blue tones
lofi - Muted, relaxed colors
pastel - Gentle rainbow pastels
fantasy - Whimsical purple and pink
wireframe - Minimalist black and white
cmyk - Vibrant print-inspired colors
autumn - Warm orange and brown
acid - Bright neon green and yellow
lemonade - Refreshing yellow and white
winter - Cool blues and whites
nord - Scandinavian-inspired palette
sunset - Warm orange to purple gradient
Dark Themes
dark - Classic dark gray interface
synthwave - Retro 80s neon aesthetics
cyberpunk - Futuristic yellow and magenta
halloween - Spooky orange and purple
luxury - Elegant dark with gold accents
dracula - (Analyze Mode Only) Deep purple vampire theme
business - Professional dark blue-gray
coffee - Rich brown and cream
night - Deep blue-black palette
dim - Muted dark gray
Theme Usage
Live Mode (Production Trading)
When trading with real money in Live Mode, you have access to 29 themes (all except dracula).
Quick Theme Toggle (Navbar)
The navbar includes a convenient theme switcher that toggles between:
Light Theme - Default bright interface
Dark Theme - Reduced eye strain for extended trading sessions
Simply click the sun/moon icon in the navigation bar to instantly switch.
Full Theme Selection (Profile Page)
For access to all 29 themes:
Navigate to Settings → Profile
Click the Theme Preferences tab
Browse the complete theme gallery
Click any theme to apply instantly
Your selection is automatically saved
Note: The dracula theme is not available in Live Mode as it is exclusively reserved for Analyze Mode.
Analyze Mode (Sandbox Environment)
The Analyze Mode provides a risk-free testing environment for validating strategies and API requests without executing real trades.
Fixed Dracula Theme
When you enter Analyze Mode:
Auto-Switch: Theme automatically changes to
dracula
Visual Indicator: The distinctive purple dracula theme clearly signals you're in a safe testing environment
Locked Theme: Theme switcher is disabled to prevent confusion
Safety Feature: This ensures you always know when you're in test mode vs. live trading
Why a Fixed Theme?
The locked dracula theme in Analyze Mode serves critical purposes:
Visual Confirmation: Instantly recognize you're in test mode
Prevent Confusion: Avoid accidentally thinking you're in Live Mode
Consistent Experience: All users see the same interface in documentation and support
Safety First: Clear distinction reduces risk of accidental live trading
Returning to Live Mode
When you exit Analyze Mode:
Your previous theme is automatically restored
Theme switching becomes available again
All 29 Live Mode themes are accessible
How to Change Themes
Method 1: Quick Toggle (Navbar)
Locate the theme switcher icon in the navigation bar (sun/moon icon)
Click to toggle between light and dark themes
Change applies instantly
Best For: Quick switching during different times of day
Method 2: Full Selection (Profile Page)
Click Settings in the navigation menu
Select Profile from the dropdown
Navigate to the Theme Preferences tab
Browse the theme gallery showing all available themes
Click any theme card to preview and apply
Current theme is highlighted with a primary ring
Preview the color palette (primary, secondary, accent, success, error)
Best For: Exploring all themes and finding your perfect match
Method 3: Programmatic (Advanced)
Developers can change themes programmatically using the theme manager:
// Set a specific theme
window.themeManager.setTheme('cyberpunk');
// Get current theme
const currentTheme = window.themeManager.getCurrentTheme();
// Check if in Analyze Mode
const isAnalyze = window.themeManager.isAnalyzeMode();
// Restore previous theme (after Analyze Mode)
window.themeManager.restorePreviousTheme();
Technical Details
Technology Stack
OpenAlgo's theming system is built on modern web technologies:
DaisyUI:
5.1.27
- Component library providing the 30 themesTailwind CSS:
4.1.14
- Utility-first CSS framework foundationPostCSS:
8.4.49
- CSS processing and optimizationAutoprefixer:
10.4.20
- Cross-browser compatibility
Theme Implementation
Themes are implemented using pure CSS custom properties (CSS variables):
<!-- Theme is applied via data attribute -->
<html data-theme="cyberpunk">
This approach provides:
Zero Runtime JavaScript: Themes are pure CSS, no JS overhead
Instant Switching: CSS variable changes are immediate
Better Performance: No JavaScript recalculation on theme change
SSR Compatible: Themes work with server-side rendering
Storage & Persistence
Theme preferences are stored in two locations:
localStorage: Persists across browser sessions
localStorage.getItem('theme') // e.g., "dark"
sessionStorage: Maintains consistency during navigation
sessionStorage.getItem('theme') // Current session theme
Cross-Tab Synchronization
Theme changes automatically sync across browser tabs:
Open multiple OpenAlgo tabs
Change theme in one tab
All other tabs update instantly via storage events
Flash Prevention
OpenAlgo prevents theme "flash" on page load using an Immediately Invoked Function Expression (IIFE):
(function() {
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
})();
This sets the theme before the page renders, eliminating white flashes when using dark themes.
Why We Chose DaisyUI
OpenAlgo selected DaisyUI as the UI component library for several strategic reasons:
1. Extensive Theme Collection
DaisyUI provides 30+ professionally designed themes out of the box, allowing traders to customize their trading experience without requiring custom CSS development.
2. Component-Rich Library
As the most popular component library for Tailwind CSS, DaisyUI offers:
Pre-built, production-ready components
Consistent design language across the platform
Reduced development time for new features
3. Performance Optimized
Zero Runtime JavaScript: Components are pure CSS
Smaller Bundle Size: No heavy JavaScript libraries
Faster Page Loads: Critical for real-time trading applications
4. Accessibility First
All DaisyUI components follow accessibility best practices:
ARIA-compliant markup
Keyboard navigation support
Screen reader friendly
WCAG color contrast standards
5. Tailwind Integration
Seamless integration with Tailwind CSS utilities:
Use both DaisyUI components and Tailwind utilities
Consistent spacing, sizing, and color systems
Full customization capability
6. Mobile Responsive
Every theme and component works flawlessly across devices:
Desktop trading stations
Tablet interfaces
Mobile trading on the go
7. Active Development
DaisyUI is actively maintained with regular updates, bug fixes, and new features, ensuring OpenAlgo stays modern and secure.
Customizing Themes (Advanced)
Tailwind Configuration
OpenAlgo's Tailwind configuration is minimal and extensible:
// tailwind.config.mjs
import daisyui from 'daisyui';
export default {
content: [
"./templates/**/*.html",
"./static/**/*.js",
],
theme: {
extend: {}
},
plugins: [daisyui]
}
Adding Custom Themes
Developers can add custom themes by extending the DaisyUI configuration:
// tailwind.config.mjs
export default {
plugins: [daisyui],
daisyui: {
themes: [
"light",
"dark",
// ... other themes
{
mytheme: {
"primary": "#0000ff",
"secondary": "#ff00ff",
"accent": "#00ffff",
"neutral": "#3d4451",
"base-100": "#ffffff",
},
},
],
},
}
Theme Color Palette
Each DaisyUI theme includes these semantic color tokens:
primary
Main brand color
Buttons, links, active states
secondary
Supporting color
Secondary buttons, accents
accent
Highlight color
Badges, special notifications
neutral
Neutral elements
Borders, dividers, disabled
base-100
Background color
Page background
base-200
Subtle background
Cards, containers
base-300
Borders & dividers
Input borders, separators
base-content
Text color
Body text, labels
info
Informational
Info alerts, messages
success
Success states
Profit, completed orders
warning
Warning states
Pending, caution messages
error
Error states
Loss, failed orders
Browser Compatibility
OpenAlgo themes work across all modern browsers:
✅ Chrome/Edge 90+
✅ Firefox 88+
✅ Safari 14+
✅ Opera 76+
✅ Mobile browsers (iOS Safari, Chrome Mobile)
Note: Internet Explorer is not supported as it lacks CSS custom property support.
Troubleshooting
Theme Not Changing
If your theme doesn't change:
Clear Browser Cache: Hard reload with
Ctrl+Shift+R
(Windows/Linux) orCmd+Shift+R
(Mac)Check localStorage: Open DevTools → Application → Local Storage → verify
theme
key existsDisable Browser Extensions: Some extensions may interfere with theme switching
Try Incognito Mode: Rules out extension conflicts
Theme Flashing on Page Load
If you see a white flash before the theme loads:
Ensure JavaScript is enabled in your browser
Check that the theme IIFE in
theme.js
is loading before the page rendersVerify no browser extensions are blocking inline scripts
Analyze Mode Theme Won't Change
This is expected behavior. The dracula theme is locked in Analyze Mode for safety. To change themes:
Exit Analyze Mode
Return to Live Mode
Select your preferred theme
Theme will be restored when you exit Analyze Mode again
Custom Theme Not Appearing
If you've added a custom theme:
Verify
tailwind.config.mjs
syntax is correctRebuild CSS:
npm run build:css
Add theme name to
themes
array instatic/js/theme.js
Restart the application server
Credits & Acknowledgments
DaisyUI
OpenAlgo extends deep gratitude to Pouya Saadeghi and the DaisyUI team for creating an exceptional component library.
Project: github.com/saadeghi/daisyui
License: MIT
Version: 5.1.27
Purpose: Powers the entire OpenAlgo user interface with beautiful, accessible components and extensive theming capabilities
Tailwind CSS
Thanks to Tailwind Labs for the utility-first CSS framework that forms the foundation of our design system.
Project: github.com/tailwindlabs/tailwindcss
License: MIT
Version: 4.1.14
Purpose: Provides the utility classes and build system for rapid, consistent UI development
Community
Special thanks to the OpenAlgo community for feedback on themes, accessibility improvements, and user experience suggestions that make our platform better for everyone.
Resources
Official Documentation
DaisyUI Themes: daisyui.com/docs/themes
DaisyUI Components: daisyui.com/components
Tailwind CSS: tailwindcss.com/docs
OpenAlgo Documentation
Getting Started: docs.openalgo.in/getting-started
Last updated
Was this helpful?