Skip to content

feat(settings): add swatch previews to theme settings#1931

Merged
bajrangCoder merged 1 commit intoAcode-Foundation:mainfrom
bajrangCoder:feat/theme-setting-swatch-preview
Mar 8, 2026
Merged

feat(settings): add swatch previews to theme settings#1931
bajrangCoder merged 1 commit intoAcode-Foundation:mainfrom
bajrangCoder:feat/theme-setting-swatch-preview

Conversation

@bajrangCoder
Copy link
Copy Markdown
Member

@bajrangCoder bajrangCoder commented Mar 8, 2026

  • add square swatch previews to app theme items
  • add square swatch previews to editor theme items

Demo

Before After
Screenshot_20260308-182233 Acode Screenshot_20260308-182144 Acode
Screenshot_20260308-182248 Acode Screenshot_20260308-182203 Acode

@github-actions github-actions bot added the enhancement New feature or request label Mar 8, 2026
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 8, 2026

Greptile Summary

This PR replaces the single-color icon indicator in the theme settings list with a compact 3-color square swatch preview for both app themes and editor themes. The implementation is straightforward and well-structured:

Changes:

  • The Item component now receives a swatches array instead of color/isDark props, delegating swatch rendering to the new createSwatchPreview helper.
  • getAppThemeSwatches extracts the three primary colors from app theme objects.
  • getEditorThemeSwatches reads swatch colors from theme config objects.
  • The SCSS adds styling for the swatch grid layout (60×60 px flex container with a 1.5rem × 1.5rem grid).

The UI enhancement is clean, self-contained, and integrates well with the existing theme system without introducing functional issues.

Confidence Score: 5/5

  • Safe to merge — no functional issues or regressions identified.
  • The PR implements a well-scoped UI enhancement without introducing bugs. The swatch preview logic correctly handles both configured app themes (using their actual colors) and editor themes (using theme config values). The CSS changes are minimal and focused. All code paths are consistent with the existing theme system design.
  • No files require special attention.

Last reviewed commit: bd025aa

Copy link
Copy Markdown
Member

@UnschooledGamer UnschooledGamer left a comment

Choose a reason for hiding this comment

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

LGTM

@bajrangCoder bajrangCoder merged commit 2c7d05a into Acode-Foundation:main Mar 8, 2026
5 checks passed
@bajrangCoder bajrangCoder deleted the feat/theme-setting-swatch-preview branch March 8, 2026 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants