goose icon indicating copy to clipboard operation
goose copied to clipboard
Published 6 days ago • verified publisher icon block

feat: Add customizable inline code font colors

Open Shreyanshsingh23 opened this issue 1 month ago • 4 comments

Description

This PR addresses issue #4143 by adding the ability to customize inline code font colors, improving readability in dark mode.

Changes

  • ✨ Added FontColorSelector component with IDE-inspired color presets
  • 🎨 Updated CSS to use CSS variable (--code-font-color) with fallback to default orange
  • ⚙️ Integrated font color selector into Theme settings card
  • 💾 Implemented localStorage persistence for color preferences

Color Presets

The feature includes four presets optimized for readability:

  • Default - Original orange (#ff4f00)
  • VS Code Dark+ - Warm beige (#CE9178) - Better visibility in dark mode
  • IntelliJ Darcula - Light cyan/gray (#A9B7C6) - High contrast
  • Sublime Text - Off-white (#F8F8F2) - Excellent contrast

Users can also select any custom color using the color picker with hex input support.

Implementation Details

  • Colors are applied immediately via CSS variable override (--code-font-color)
  • Preference is stored in localStorage with key code_font_color
  • Falls back to default orange color if no preference is set
  • Works seamlessly with both light and dark themes

Testing

  • ✅ Color applies immediately when selected
  • ✅ Preference persists across application restarts
  • ✅ Fallback works correctly if localStorage is cleared
  • ✅ Both light and dark mode tested for readability
  • ✅ Custom color picker with hex input validated

Files Changed

  • ui/desktop/src/styles/main.css - Updated inline code color to use CSS variable
  • ui/desktop/src/components/settings/app/AppSettingsSection.tsx - Added FontColorSelector integration
  • ui/desktop/src/components/settings/app/FontColorSelector.tsx - New component (186 lines)

Screenshots

The font color selector appears in Settings > App > Theme section, below the theme selector, with a clean UI matching the existing design patterns.

Related Issue

Closes #4143

Shreyanshsingh23 avatar Oct 29 '25 15:10 Shreyanshsingh23

Hey @taniandjerry, please review this PR.

Shreyanshsingh23 avatar Oct 29 '25 15:10 Shreyanshsingh23

Thank you @Shreyanshsingh23 . Tagging teammates to review

taniandjerry avatar Oct 29 '25 19:10 taniandjerry

Unless @DOsinga @alexhancock @zanesq @jamadeo @michaelneale and team are able to review, this may not make it in time for hacktoberfest. 🥺

taniandjerry avatar Oct 30 '25 14:10 taniandjerry

@jamadeo 's concerns seem somewhat deep here, do we still want to get this in, or should we close this and do it a different way?

DOsinga avatar Nov 06 '25 21:11 DOsinga

closing this due to staleness

DOsinga avatar Nov 20 '25 18:11 DOsinga