Skip to content

feat(theme): add per-color reset button to Theme picker (@Ammarfrfr) - #8298

Open
Ammarfrfr wants to merge 1 commit into
monkeytypegame:masterfrom
Ammarfrfr:feat/theme-per-color-reset
Open

feat(theme): add per-color reset button to Theme picker (@Ammarfrfr)#8298
Ammarfrfr wants to merge 1 commit into
monkeytypegame:masterfrom
Ammarfrfr:feat/theme-per-color-reset

Conversation

@Ammarfrfr

@Ammarfrfr Ammarfrfr commented Jul 28, 2026

Copy link
Copy Markdown
Screen Recording 2026-07-28 at 6 58 45 PM **Summary** Adds a small per-color reset (undo) button next to each color input in Settings → Theme → Custom that resets only that color to the currently selected preset value.

Motivation
Users often tweak individual colors and want to revert one value without losing the rest of their custom theme.

Approach
Added resetColor() in Picker which finds the current preset (getConfig.theme) and falls back to the current theme color; calls updateThemeColor() to apply.
Added an undo Button with a tooltip (balloon.text) next to the hex input and kept the existing color input/palette flow for live preview.

How to test locally

cd frontend
pnpm dev
# Open the app at the Vite URL -> Settings  Theme  Custom
# Change a color and click the undo (fa-undo) button next to that color
# Only that color should revert to the preset value

Files changed
Theme.tsx

Checklist

  • Lints pass (pnpm run lint / pnpm run lint-fe)
  • Type checks pass (pnpm run ts-check)
  • Manual verification completed

Copilot AI review requested due to automatic review settings July 28, 2026 13:13
@monkeytypegeorge monkeytypegeorge added the frontend User interface or web stuff label Jul 28, 2026
@github-actions github-actions Bot added the waiting for review Pull requests that require a review before continuing label Jul 28, 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 per-color reset control in Settings → Theme → Custom so a single tweaked color can be reverted to the currently selected preset without wiping other custom edits.

Changes:

  • Add resetColor() in Picker to pull preset color (ThemesList + getConfig.theme) and apply via updateThemeColor.
  • Add icon-only undo button with tooltip next to the hex input.
  • Adjust picker grid columns to fit the new button.

Comment on lines +519 to +527
const resetColor = () => {
const presetTheme = ThemesList.find(
(theme) => theme.name === getConfig.theme,
);
const fallbackColor = getTheme()[props.color];
const nextColor = presetTheme?.[props.color] ?? fallbackColor;

updateThemeColor(props.color, nextColor);
};
@Ammarfrfr Ammarfrfr changed the title feat(theme): add per-color reset button to Theme picker feat(theme): add per-color reset button to Theme picker (@Ammarfrfr) Jul 28, 2026
@Ammarfrfr
Ammarfrfr requested a review from Copilot July 28, 2026 13:48

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

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

Comments suppressed due to low confidence (1)

frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx:527

  • resetColor() silently no-ops if current preset not found in ThemesList (e.g. corrupted/legacy config). Elsewhere in this file ("load from preset") the same lookup shows an error; do same here so reset is not a confusing no-op.
  const resetColor = () => {
    const presetTheme = ThemesList.find(
      (theme) => theme.name === getConfig.theme,
    );
    const fallbackColor = getTheme()[props.color];
    const nextColor = presetTheme?.[props.color] ?? fallbackColor;

    updateThemeColor(props.color, nextColor);
  };

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

Labels

frontend User interface or web stuff 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