Theme & Dark Mode

Scoriet supports multiple theme options to match your preferences and work environment. Whether you prefer a bright interface for daytime work or a dark theme for late-night coding sessions, Scoriet adapts to your needs.

Available Themes

Scoriet includes several carefully designed themes:

Light Theme

• Best for: Bright environments, daytime work, printing
• Features: Clean white backgrounds, high contrast text
• Eye strain: Minimal during daylight hours
• Code readability: Excellent in natural light

Dark Theme

• Best for: Low-light environments, eye comfort, night work
• Features: Dark backgrounds, soft text colors, reduced blue light
• Eye strain: Significantly reduced in dark environments
• Code readability: Excellent for syntax highlighting visibility

System Theme (Auto)

• Best for: Users who want Scoriet to match their OS preference
• Features: Automatically switches based on system settings
• Responsive: Changes when you switch OS dark mode on/off
• Consistency: Matches your entire desktop experience

Switching Themes

Via Settings Panel

The most reliable way to change themes:

1. Click Settings in the top navigation bar
2. Navigate to Appearance (or Display)
3. Select your preferred theme:
   • Light
   • Dark
   • System (follow OS preference)
4. Changes apply instantly - no restart needed

Screenshot: Settings > Appearance theme selector — settings-appearance.png

Via Quick Toggle (Top Right)

For fast theme switching without opening Settings:

1. Look in the top-right corner of the navigation bar
2. Click the theme toggle button (usually sun/moon icon)
3. Cycles through available themes on each click:
   • Light → Dark → System → Light (repeats)

tip

If you're constantly switching between light and dark, consider using the System theme that automatically adapts to your OS settings.

Light Theme Details

When Light Theme Works Best

• Morning and daytime work in bright offices or sunlit areas
• Printing documents - lighter background uses less ink
• Presenting to groups using projectors
• Standard business environments with bright fluorescent lighting
• Accessibility - some users find light text on light backgrounds easier to read

Light Theme Characteristics

Element	Color	Purpose
Background	White (#FFFFFF)	Main workspace
Panels	Light Gray (#F5F5F5)	Secondary areas
Text	Dark Gray (#333333)	Primary content
Accents	Brand Blue (#0066CC)	Buttons, links
Code Blocks	Light background with dark text	Source code display

Customizing Light Theme

From Settings > Appearance > Light Theme:

• Adjust brightness - If the pure white is too bright
• Increase contrast - For better readability
• Font size - Enlarge text if needed

Dark Theme Details

When Dark Theme Works Best

• Low-light environments - office with minimal lighting
• Night work - reduces eye strain when working late
• Reduced blue light - easier on circadian rhythm
• Presentation monitors - reduced glare on reflective screens
• Battery life - on OLED screens, dark pixels use less power

Dark Theme Characteristics

Element	Color	Purpose
Background	Very Dark Gray (#1E1E1E)	Main workspace
Panels	Dark Gray (#2D2D2D)	Secondary areas
Text	Light Gray (#E0E0E0)	Primary content
Accents	Brand Blue (#4A9FFF)	Buttons, links
Code Blocks	Dark background with light text	Source code display

Customizing Dark Theme

From Settings > Appearance > Dark Theme:

• Adjust darkness - Choose from various dark shades
• Blue light reduction - Enable warm color filter
• Contrast level - Choose between normal and high contrast
• Font size - Enlarge text for readability

Eye Comfort Features in Dark Theme

Scoriet's dark theme includes built-in comfort features:

• No pure black - Uses deep gray (#1E1E1E) instead of #000000 for less harsh contrast
• Reduced blue light - Option to enable warm color filter
• Soft shadows - Gentle shadows for depth without harsh outlines
• Easy-on-eyes colors - Colors chosen scientifically for dark environment viewing

System Theme (Auto)

How System Theme Works

System theme automatically matches your operating system preference:

1. You enable System theme in Scoriet Settings
2. Scoriet detects your OS theme (light or dark)
3. Instantly applies matching theme
4. Automatically switches when you change your OS settings

Setting Up System Theme

1. Click Settings in top navigation
2. Go to Appearance
3. Select "System" or "Auto"
4. Confirm - Changes apply immediately

Windows Users

Windows 10/11 Settings:

• Settings > Personalization > Colors
• Choose Light, Dark, or Custom
• Scoriet automatically matches your choice

macOS Users

macOS System Preferences:

• System Preferences > General
• Set "Appearance" to Light or Dark
• Scoriet automatically follows your preference

Linux Users

Theme detection depends on your desktop environment:

• GNOME - Detected automatically
• KDE Plasma - Usually detected automatically
• Others - Set in your desktop environment preferences

Theme Switching During Work

Changing Themes Mid-Session

You can change themes anytime without losing work:

1. Your open panels remain open and unchanged
2. All unsaved work is preserved
3. The theme switches instantly
4. No need to restart Scoriet or your projects

What Happens to Open Panels?

When you switch themes:

• ✅ Panels stay open and in their current layout
• ✅ Unsaved changes remain in form fields
• ✅ Code in editors is preserved
• ✅ Database connections stay active
• ✅ Code generation history is preserved

info

Switching themes is completely safe mid-work. It's purely a visual change with no effect on your data or active sessions.

Accessibility and Theme

High Contrast Mode

For users with visual impairments:

1. Settings > Appearance > High Contrast
2. Increased contrast ratios for better readability
3. Works with both light and dark themes
4. Meets WCAG AAA standards

Color-Blind Friendly Themes

Scoriet includes themes designed for different types of color blindness:

1. Settings > Appearance > Color Blind Mode
2. Select your type:
   • Protanopia (red-blind)
   • Deuteranopia (green-blind)
   • Tritanopia (blue-blind)
3. Colors adjust for better distinction

Font and Text Size

Combine theme selection with text sizing:

1. Settings > Accessibility > Font Size
2. Choose: Small, Medium, Large, Extra Large
3. Works with any theme

Code Syntax Highlighting

Syntax Highlighting in Light Theme

Code blocks display with:

• Dark syntax keywords for visibility
• Colored strings, numbers, and variables
• Light background for contrast
• Standard IDE-style highlighting

Syntax Highlighting in Dark Theme

Code blocks display with:

• Bright syntax keywords for visibility
• Colorized strings, numbers, and variables
• Dark background to match theme
• High-contrast colors suitable for dark viewing

Customizing Syntax Colors

From Settings > Editor > Syntax Highlighting:

1. Choose a color scheme:
   • Default
   • Monokai
   • Solarized
   • Dracula
   • Others...
2. Themes are theme-aware (light theme ↔ dark theme)
3. Click "Customize" to modify individual colors

Saving Theme Preference

Per-User Settings

Your theme choice is saved:

• Per account - Each user has independent preferences
• Across sessions - Theme persists when you close/reopen
• Cloud synced - If using cloud storage, preference syncs across devices
• Project independent - Theme applies to all projects, not per-project

Resetting Theme to Default

If theme settings become corrupted:

1. Settings > Appearance > Reset to Default
2. Resets to Light theme (default)
3. All customizations are cleared
4. You can reconfigure after reset

Performance Impact

Does Dark Theme Affect Performance?

Both light and dark themes have identical performance:

• Rendering speed - Same for both themes
• Memory usage - No difference
• CPU usage - No difference
• Battery usage - Dark is slightly better on OLED, negligible on LCD

Code Generation Speed

Theme has no impact on code generation:

• Template execution - Same speed regardless of theme
• Database parsing - No performance change
• File I/O - Theme doesn't affect operations

Troubleshooting Theme Issues

Theme Not Changing?

Try these steps:

1. Refresh the page (F5 or Cmd+R)
2. Clear browser cache if using web version
3. Log out and log back in
4. Check Settings > Appearance - Confirm selection saved

Text Hard to Read?

Solutions:

1. Increase text size (Settings > Accessibility > Font Size)
2. Enable high contrast mode (Settings > Appearance > High Contrast)
3. Switch themes - Try the other theme
4. Adjust brightness - Check monitor display settings

System Theme Not Auto-Switching?

Windows troubleshooting:

1. Confirm Settings > Appearance shows "System" selected
2. Check Windows theme (Settings > Personalization > Colors)
3. Close and reopen Scoriet after changing Windows theme
4. Restart if Scoriet doesn't detect change within 1 minute

macOS troubleshooting:

1. Confirm Settings > Appearance shows "System" selected
2. Check System Preferences > General
3. Close and reopen Scoriet after changing macOS theme
4. Check OS theme - Some apps may show different theme than general setting

Theme Best Practices

Choosing a Theme for Your Environment

• Bright office environment → Light theme
• Dim office environment → Dark theme
• Variable lighting → System theme (auto-adapt)
• Night shift work → Dark theme with blue light reduction
• Screen recording/demos → Light theme (better visibility)

Setting Up Your Team

For consistent team appearance in shared spaces:

1. Establish team preference (light, dark, or system)
2. Document in team guidelines
3. Share settings - Export settings from Settings > Export

Combining with Other Settings

For optimal comfort:

• Dark theme + Large text = Night work comfort
• Light theme + Standard text = Daytime presentation
• System theme + High contrast = Accessibility focused
• Dark theme + Blue light filter = Late night work comfort

---

Related Topics:

• Understanding the Workspace
• Settings for more configuration options