Skip to content

console: Fix code editor comment color in dark mode - #8045

Open
R-zin wants to merge 1 commit into
TheThingsNetwork:v3.37from
R-zin:main
Open

R-zin wants to merge 1 commit into
TheThingsNetwork:v3.37from
R-zin:main

Conversation

@R-zin

@R-zin R-zin commented Oct 3, 2026

Copy link
Copy Markdown

Summary

Fixes an issue where JavaScript comments in the payload formatter code editor are unreadable in dark mode due to dark grey text on a black background.

Changes

  • Update .ace-ttn-dark .ace_comment color from var(--c-text-neutral-extralight) to var(--c-text-neutral-semilight) in pkg/webui/components/code-editor/ttn-theme.js.
  • Fix typos in CSS variable references in ttn-dark theme definition (--c-bg-neutral-extalight → --c-bg-neutral-extralight, --c-border-brand-norma → --c-border-brand-normal, and --c-text-neutral-max → --c-text-neutral-heavy).
  • Add an entry under [Unreleased] in CHANGELOG.md.

Testing

Steps
  1. Set the browser (e.g., Firefox) or OS appearance to dark mode, or configure the Console theme to dark in user preferences.
  2. Navigate to an Application or End Device -> Payload formatters -> Uplink (or Downlink).
  3. Select Custom Javascript formatter.
  4. Enter JavaScript code containing comments (e.g., // Single-line comment or /* Multi-line comment */).
  5. Observe the text color and readability of the comments.
Results
  • Before: Comments were styled with --c-text-neutral-extralight, resolving to $c.neutral-900 (#1C293F), appearing dark grey on a black (#000000) background with a contrast ratio of ~1.3:1 (unreadable).
  • After: Comments are styled with --c-text-neutral-semilight, resolving to $c.neutral-400 (#B2BAC8), rendering in light grey with a contrast ratio of ~10.9:1 (WCAG AAA compliant and clearly legible).
Regressions
  • Verified light mode (ttn-light) styling is untouched (#8E908C).
  • Verified that other syntax highlighting elements in dark mode (strings, keywords, numbers, functions) continue to display as expected.

Notes for Reviewers

In tokens.styl, theme-dark.color['text-neutral-extralight'] is mapped to $c.neutral-900 (#1C293F), representing minimum contrast on dark surfaces. Using var(--c-text-neutral-semilight) ($c.neutral-400 / #B2BAC8) provides a distinct light grey appearance that is clearly readable while remaining visually secondary to primary code text (var(--c-text-neutral-heavy) / #EBEEF3).

Checklist

  • Scope: The referenced issue is addressed, there are no unrelated changes.
  • Compatibility: The changes are backwards compatible with existing API, storage, configuration and CLI, according to the compatibility commitments in README.md for the chosen target branch.
  • Documentation: Relevant documentation is added or updated.
  • Testing: The steps/process to test this feature are clearly explained including testing for regressions.
  • Infrastructure: If infrastructural changes (e.g., new RPC, configuration) are needed, a separate issue is created in the infrastructural repositories.
  • Changelog: Significant features, behavior changes, deprecations and fixes are added to CHANGELOG.md.
  • Commits: Commit messages follow guidelines in CONTRIBUTING.md, there are no fixup commits left.

@R-zin
R-zin requested a review from a team as a code owner October 3, 2026 08:06
@R-zin
R-zin requested a review from mjamescompton October 3, 2026 08:06

This branch has not been deployed

No deployments
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.

1 participant