Skip to content

fix(discord-midnight): improve channel text contrast and accent color mappings#27

Open
the-daonm wants to merge 1 commit into
noctalia-dev:mainfrom
the-daonm:fix-midnight-contrast
Open

fix(discord-midnight): improve channel text contrast and accent color mappings#27
the-daonm wants to merge 1 commit into
noctalia-dev:mainfrom
the-daonm:fix-midnight-contrast

Conversation

@the-daonm

Copy link
Copy Markdown

This pull request resolves contrast and color mapping issues in the discord-midnight community template when rendered with different color palettes (e.g. Gruvbox Material).

Changes Made

1. Text Contrast Fix (--text-4, --text-5)

  • Issue: The template previously mapped channel list text/icons (--text-4) and muted chats/timestamps (--text-5) directly to colors.outline and colors.outline_variant. In dark mode, these resolve to very dark grey/near-black border colors, making the channel list text and timestamps completely unreadable.
  • Fix: Replaced outline mappings with custom HSL/RGB color mixes:
    • --text-4 mixes 65% of the primary foreground (on_surface) with 35% outline, creating a legible cream-grey.
    • --text-5 mixes 40% foreground with 60% outline, producing a clean, muted, yet readable gray.
  • This logic matches the robust mixes implemented in other templates like discord-system24 and works correctly for both light and dark shell modes.

2. Accent Mappings Fix (--accent-2, --accent-4)

  • Issue: --accent-2 (small accent elements, such as chosen/selected channel indicators) was mapped to a dark container background color (primary_container), which was invisible on dark backgrounds. --accent-4 (hovered accent buttons) was mapped to a light text color (on_secondary_container), causing harsh brightness inconsistencies.
  • Fix:
    • Re-mapped --accent-2 to the primary accent color (colors.primary), keeping active channel selections highlighted in the theme's primary accent color (e.g. Gruvbox green).
    • Re-mapped --accent-4 to a 80% secondary accent mix, creating a smooth and cohesive color shift on hover.

Type of Change

  • Bug fix

How Has This Been Tested?

  • Generated and loaded the theme (noctalia.theme.css) locally on Vesktop using the Gruvbox Material palette (both dark and light modes).
  • Verified that channel list names, icons, muted channels, active channels, and hovered buttons are fully legible and cohesive.

@notiant

notiant commented Jun 24, 2026

Copy link
Copy Markdown

I think normal text also has a bad contrast in dark mode. Maybe change text-3 to color-mix(in srgb, {{colors.on_surface.default.hex}} 85%, {{colors.outline.default.hex}}) as well?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants