Dark Mode

​

Overview

​

Features

• 🌙 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

​

How It Works

​

Automatic Theme Detection

1. Confluence Theme Changes → App detects the change
2. Automatic Update → Equations update colors instantly
3. No Configuration → Works out of the box

​

Theme Support

• Dark text on light background
• High contrast for readability
• Standard mathematical typography

• Light text on dark background
• Reduced eye strain
• Adjusted contrast ratios

​

Enabling Dark Mode

​

In Confluence

1. Click your profile picture (top right)
2. Select Settings
3. Go to Theme
4. Choose:
   • Light - Light mode
   • Dark - Dark mode
   • System - Follow OS settings

​

The App Adapts Automatically

• ✅ All LaTeX equations update instantly
• ✅ Editor interface matches theme
• ✅ Preview pane updates
• ✅ No page refresh needed

​

Visual Examples

​

Light Mode Appearance

• Black text on white background
• Clear, crisp rendering
• Optimal daytime viewing

• Centered with standard typography
• High contrast
• Professional appearance

​

Dark Mode Appearance

• Light text on dark background
• Reduced eye strain
• Comfortable nighttime viewing

• Adjusted contrast
• Softer colors
• Maintains readability

​

Editor Experience

​

Light Mode Editor

• Light background
• Dark text
• Syntax highlighting optimized for light mode

• White background
• Black equations
• Simulates light mode Confluence page

​

Dark Mode Editor

• Dark background
• Light text
• Syntax highlighting optimized for dark mode

• Dark background
• Light equations
• Simulates dark mode Confluence page

​

Color Adjustments

​

Text Colors

​

Accent Colors

• Automatically adjusted for each theme
• Maintains brand consistency
• Ensures proper contrast

​

Accessibility

​

Contrast Ratios

• Text contrast: 21:1 (exceeds WCAG AAA)
• High readability

• Text contrast: 15:1 (exceeds WCAG AAA)
• Reduced glare
• Comfortable for extended reading

​

Benefits

• ✅ Reduced eye strain in low light
• ✅ Better for nighttime work
• ✅ Improved focus on equations
• ✅ Accessibility compliant

​

Best Practices

​

✅ Do’s

1. Test both themes - Verify equations look good in both
2. Use standard LaTeX - Avoids rendering issues
3. Leverage automatic detection - Don’t fight the theme
4. Consider your audience - Many users prefer dark mode

​

❌ Don’ts

1. Don’t hardcode colors - Let the app handle theme colors
2. Don’t use color for meaning - Some users can’t distinguish
3. Don’t override theme - Respect user preferences
4. Don’t assume light mode - Test in both themes

​

Troubleshooting

​

Equations Not Updating Theme

1. Hard refresh the page (Ctrl/Cmd + Shift + R)
2. Clear cache and reload
3. Check Confluence theme is actually set to dark
4. Verify browser supports theme detection
5. Contact support if issue persists

​

Poor Contrast

1. Adjust monitor brightness
2. Try Confluence’s theme settings
3. Verify no custom CSS is interfering
4. Report issue to support with screenshots

​

Editor Theme Not Matching

1. Close and reopen the editor
2. Refresh the Confluence page
3. Check browser console for errors
4. Try different browser

​

Colors Look Wrong

1. Verify theme is properly set in Confluence
2. Check for browser extensions affecting colors
3. Disable custom styles if any
4. Compare with other Confluence content

​

Theme Switching

​

Instant Updates

1. No page refresh required
2. All macros update simultaneously
3. Editor adjusts if open
4. Smooth transition - no flashing

​

Performance

• ⚡ Updates in less than 100ms
• 🚀 No performance impact
• 💾 No additional load time
• ✅ Works with hundreds of equations

​

Technical Details

​

CSS Variables

--foreground: Theme text color
--background: Theme background color
--muted: Secondary colors
--border: Border colors

​

Theme Detection API

useThemeObserver() // Detects theme changes

​

Color Inversion

• Custom color palette for dark mode
• Optimized contrast ratios
• Maintains mathematical typography

​

Mobile Support

​

Responsive Theme Detection

• 📱 iOS devices (system theme)
• 🤖 Android devices (system theme)
• 💻 Tablets (Confluence theme)
• 🖥️ Desktop browsers

​

Battery Saving

• Reduce screen power consumption (OLED displays)
• Extend battery life on mobile
• Less eye strain

​

System Theme Integration

​

”Follow System” Option

1. OS changes theme (day/night)
2. Confluence updates automatically
3. LaTeX equations adapt instantly
4. Seamless experience

​

Supported Operating Systems

• ✅ Windows 10+ (Dark Mode)
• ✅ macOS 10.14+ (Dark Mode)
• ✅ Linux (Desktop Environment dependent)
• ✅ iOS 13+ (Dark Mode)
• ✅ Android 10+ (Dark Theme)

​

Custom Confluence Themes

​

Third-Party Themes

• Detects custom color schemes
• Adjusts equation colors
• May require manual testing

​

Known Limitations

• Have non-standard contrast
• Use unexpected color schemes
• Require additional adjustments

💡 Tip: Test your equations in your custom theme and report any issues.

​

Future Enhancements

​

Planned Features

• 🎨 Custom color schemes
• 🌈 High contrast mode option
• ⚡ Color customization
• 📊 Accessibility improvements

​

Request Features

​

Comparison with Other Apps

​

LaTeX Math for Confluence

• ✅ Automatic theme detection
• ✅ Instant switching
• ✅ Optimized contrast
• ✅ No configuration needed
• ✅ Mobile support

​

Traditional LaTeX Renderers

• ❌ Manual theme selection
• ❌ Page refresh required
• ❌ Poor dark mode support
• ❌ Fixed colors
• ❌ Desktop only

​

Related Documentation

• 📖 Live Preview - Editor features
• 📖 Inline Macro - Inline equations
• 📖 Block Macro - Display equations
• ❓ FAQ

​

Need Help?

• 💬 Contact Support
• 📚 View All Documentation
• 🎨 Report Theme Issues