Dark Mode Support
LaTeX Math for Confluence automatically adapts to your Confluence theme with full dark mode support.
Dark mode support ensures your mathematical equations remain readable and aesthetically pleasing in both light and dark themes. The app automatically detects and adapts to Confluence's theme settings.
- 🌙 Automatic Detection - Detects Confluence theme automatically
- 🎨 Seamless Integration - Equations blend with Confluence's color scheme
- ⚡ Instant Switching - No refresh needed when changing themes
- 👁️ Optimized Contrast - Readable in all lighting conditions
- 🎯 Consistent Experience - Same quality in light and dark modes
The app uses Atlassian's theme detection API:
- Confluence Theme Changes → App detects the change
- Automatic Update → Equations update colors instantly
- No Configuration → Works out of the box
Light Mode
- Dark text on light background
- High contrast for readability
- Standard mathematical typography
Dark Mode
- Light text on dark background
- Reduced eye strain
- Adjusted contrast ratios
- Click your profile picture (top right)
- Select Settings
- Go to Theme
- Choose:
- Light - Light mode
- Dark - Dark mode
- System - Follow OS settings
Once you change Confluence's theme:
- ✅ All LaTeX equations update instantly
- ✅ Editor interface matches theme
- ✅ Preview pane updates
- ✅ No page refresh needed
Inline Equations:
- Black text on white background
- Clear, crisp rendering
- Optimal daytime viewing
Block Equations:
- Centered with standard typography
- High contrast
- Professional appearance
Inline Equations:
- Light text on dark background
- Reduced eye strain
- Comfortable nighttime viewing
Block Equations:
- Adjusted contrast
- Softer colors
- Maintains readability
Code Pane:
- Light background
- Dark text
- Syntax highlighting optimized for light mode
Preview Pane:
- White background
- Black equations
- Simulates light mode Confluence page
Code Pane:
- Dark background
- Light text
- Syntax highlighting optimized for dark mode
Preview Pane:
- Dark background
- Light equations
- Simulates dark mode Confluence page
Text Colors
| Element |
Light Mode |
Dark Mode |
| Main equation |
Black (#000) |
Light (#E8E8E8) |
| Operators |
Black (#000) |
Light (#E8E8E8) |
| Variables |
Black (#000) |
Light (#E8E8E8) |
| Background |
White (#FFF) |
Dark (#1F1F21) |
Primary colors (like links) use Confluence's theme colors:
- Automatically adjusted for each theme
- Maintains brand consistency
- Ensures proper contrast
Light Mode:
- Text contrast: 21:1 (exceeds WCAG AAA)
- High readability
Dark Mode:
- Text contrast: 15:1 (exceeds WCAG AAA)
- Reduced glare
- Comfortable for extended reading
- ✅ Reduced eye strain in low light
- ✅ Better for nighttime work
- ✅ Improved focus on equations
- ✅ Accessibility compliant
- Test both themes - Verify equations look good in both
- Use standard LaTeX - Avoids rendering issues
- Leverage automatic detection - Don't fight the theme
- Consider your audience - Many users prefer dark mode
- Don't hardcode colors - Let the app handle theme colors
- Don't use color for meaning - Some users can't distinguish
- Don't override theme - Respect user preferences
- Don't assume light mode - Test in both themes
Problem: Equations stay in light mode when switching to dark
Solutions:
- Hard refresh the page (Ctrl/Cmd + Shift + R)
- Clear cache and reload
- Check Confluence theme is actually set to dark
- Verify browser supports theme detection
- Contact support if issue persists
Problem: Equations are hard to read in dark mode
Solutions:
- Adjust monitor brightness
- Try Confluence's theme settings
- Verify no custom CSS is interfering
- Report issue to support with screenshots
Problem: Editor doesn't match Confluence theme
Solutions:
- Close and reopen the editor
- Refresh the Confluence page
- Check browser console for errors
- Try different browser
Problem: Equation colors don't match expectations
Solutions:
- Verify theme is properly set in Confluence
- Check for browser extensions affecting colors
- Disable custom styles if any
- Compare with other Confluence content
When switching themes:
- No page refresh required
- All macros update simultaneously
- Editor adjusts if open
- Smooth transition - no flashing
Theme switching is optimized:
- ⚡ Updates in <100ms
- 🚀 No performance impact
- 💾 No additional load time
- ✅ Works with hundreds of equations
The app uses CSS variables for theme colors:
--foreground: Theme text color
--background: Theme background color
--muted: Secondary colors
--border: Border colors
Uses Atlassian's @atlaskit/tokens:
useThemeObserver() // Detects theme changes
Not a simple color inversion:
- Custom color palette for dark mode
- Optimized contrast ratios
- Maintains mathematical typography
Dark mode works on:
- 📱 iOS devices (system theme)
- 🤖 Android devices (system theme)
- 💻 Tablets (Confluence theme)
- 🖥️ Desktop browsers
Dark mode can help:
- Reduce screen power consumption (OLED displays)
- Extend battery life on mobile
- Less eye strain
If Confluence is set to follow system:
- OS changes theme (day/night)
- Confluence updates automatically
- LaTeX equations adapt instantly
- Seamless experience
- ✅ Windows 10+ (Dark Mode)
- ✅ macOS 10.14+ (Dark Mode)
- ✅ Linux (Desktop Environment dependent)
- ✅ iOS 13+ (Dark Mode)
- ✅ Android 10+ (Dark Theme)
The app attempts to adapt to custom Confluence themes:
- Detects custom color schemes
- Adjusts equation colors
- May require manual testing
Some custom themes may:
- Have non-standard contrast
- Use unexpected color schemes
- Require additional adjustments
💡 Tip: Test your equations in your custom theme and report any issues.
- 🎨 Custom color schemes
- 🌈 High contrast mode option
- ⚡ Color customization
- 📊 Accessibility improvements
Have suggestions? Contact us
- ✅ Automatic theme detection
- ✅ Instant switching
- ✅ Optimized contrast
- ✅ No configuration needed
- ✅ Mobile support
- ❌ Manual theme selection
- ❌ Page refresh required
- ❌ Poor dark mode support
- ❌ Fixed colors
- ❌ Desktop only
|