Skip to content

feat(theme): add cyberdream and cyberdream_light themes (@ahashim)#8203

Open
ahashim wants to merge 2 commits into
monkeytypegame:masterfrom
ahashim:theme/add-cyberdream
Open

feat(theme): add cyberdream and cyberdream_light themes (@ahashim)#8203
ahashim wants to merge 2 commits into
monkeytypegame:masterfrom
ahashim:theme/add-cyberdream

Conversation

@ahashim

@ahashim ahashim commented Jul 6, 2026

Copy link
Copy Markdown

Description

Adds cyberdream and its light variant cyberdream_light, ported from the cyberdream.nvim colorscheme. cyberdream is a high-contrast dark theme built around a bright cyan accent on a near-black background; cyberdream_light is the same idea inverted onto white using the plugin's official light palette. Neither overlaps with the existing themes (the closest is cyberspace, which is green-on-dark and reads very differently).

How I mapped the palette onto Monkeytype's colors (dark / light):

  • bg #16181a / #ffffff and subAlt #1e2124 / #eaeaea — the background and its slightly offset surface color.
  • main / caret #5ef1ff / #008c99 — the signature cyan in each variant.
  • sub #7b8496 (shared) — the palette's grey, used for the untyped text.
  • text #ffffff / #16181a — white on the dark theme, near-black on the light one, per the theme guidelines.
  • error #ff6e5e / #d11500, with a dimmer errorExtra (#b24d42 / #920f00) so extra letters read as secondary.
  • For colorful mode I used the palette's pink and magenta (#ff5ea0 / #ff5ef1 on dark, #f40064 / #d100bf on light) so errors stay vibrant and clearly distinct from the plain red.

Each theme also has a small CSS file that gives the nav items their own accents pulled from the palette, since those distinct saturated colors are really the whole identity of cyberdream.

I checked both variants for readability with colorful mode and flip test colors on and off (screenshots below).

Screenshots

cyberdream (dark)

normal colorful mode flip test colors
cyberdream normal cyberdream colorful cyberdream flip

cyberdream_light

normal colorful mode flip test colors
cyberdream_light normal cyberdream_light colorful cyberdream_light flip

Checks

  • Adding a theme?
    • Followed the themes documentation
    • Add theme to packages/schemas/src/themes.ts
    • Add theme to frontend/src/ts/constants/themes.ts
    • (optional) Add theme css file to frontend/static/themes
    • Add some screenshots of the theme, especially with different test settings (colorful, flip colors)
  • Make sure the PR title follows the Conventional Commits standard.
  • Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

Port of the cyberdream.nvim colorscheme (scottmckendry/cyberdream.nvim): a high-contrast, futuristic and vibrant dark theme. Includes a theme CSS file for per-nav-item accent colors.
Copilot AI review requested due to automatic review settings July 6, 2026 21:56
@monkeytypegeorge monkeytypegeorge added frontend User interface or web stuff assets Languages, themes, layouts, etc. packages Changes in local packages labels Jul 6, 2026
@github-actions github-actions Bot added the waiting for review Pull requests that require a review before continuing label Jul 6, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds new built-in theme cyberdream (ported palette + optional theme CSS) to expand Monkeytype’s theme catalog with a high-contrast cyan-on-near-black option.

Changes:

  • Register cyberdream in shared schema theme enum.
  • Add cyberdream color tokens to frontend theme constants (incl. hasCss: true).
  • Add frontend/static/themes/cyberdream.css for per-nav-item accent colors.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
packages/schemas/src/themes.ts Adds cyberdream to the canonical ThemeName enum.
frontend/src/ts/constants/themes.ts Defines cyberdream theme palette and marks it as CSS-backed.
frontend/static/themes/cyberdream.css Implements cyberdream-specific nav accent styling.

Light variant of the cyberdream port, using cyberdream.nvim's light palette.
@ahashim ahashim changed the title feat(theme): add cyberdream theme (@ahashim) feat(theme): add cyberdream and cyberdream_light themes (@ahashim) Jul 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

assets Languages, themes, layouts, etc. frontend User interface or web stuff packages Changes in local packages waiting for review Pull requests that require a review before continuing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants