Skip to content

feat: add tailwind with toggle theme#7

Merged
paul58914080 merged 4 commits into
mainfrom
technical/theme
May 11, 2026
Merged

feat: add tailwind with toggle theme#7
paul58914080 merged 4 commits into
mainfrom
technical/theme

Conversation

@paul58914080
Copy link
Copy Markdown
Contributor

Checklist:

  • My code follows the contribution guidelines of this project
  • I have performed a self-review of my own code
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • My commits follow conventional commit message guidelines

Copilot AI review requested due to automatic review settings May 11, 2026 01:56
@paul58914080 paul58914080 requested a review from a team as a code owner May 11, 2026 01:56
@paul58914080 paul58914080 self-assigned this May 11, 2026
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adds Tailwind CSS v4 styling support and a light/dark theme toggle to the Angular UI, including global design tokens (CSS variables) and an early theme bootstrap to avoid flash-of-incorrect-theme.

Changes:

  • Integrated Tailwind via PostCSS and added a Tailwind entrypoint stylesheet.
  • Implemented a theme service + toggle component and wired it into the root app shell.
  • Updated global styles and HTML lint rules to accommodate Tailwind utility class naming.

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
yarn.lock Adds Tailwind/PostCSS-related dependency resolutions.
package.json Adds Tailwind + PostCSS dev dependencies.
angular.json Registers Tailwind stylesheet in the global styles pipeline.
.postcssrc.json Configures PostCSS to run the Tailwind v4 plugin.
.lint/.htmlhintrc Disables id-class-value rule to allow Tailwind class naming.
src/tailwind.css Tailwind entrypoint + custom dark variant + theme tokens.
src/styles.scss Defines global CSS variables for light/dark palettes and base element styling.
src/index.html Adds font loading and an early inline script to set the initial theme class.
src/app/core/theme/theme.service.ts Adds ThemeService to manage theme state, persistence, and DOM class toggling.
src/app/core/theme/theme-toggle.ts Adds a theme toggle button component with accessible labeling.
src/app/app.ts Imports the toggle component and wires theme support into the root component.
src/app/app.html Introduces a basic app shell layout with header, toggle, and router outlet.
src/app/app.scss Adds app-shell styling (currently unused by the template).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/styles.scss Outdated
Comment thread src/app/app.scss Outdated
@paul58914080 paul58914080 added the enhancement New feature or request label May 11, 2026
@paul58914080 paul58914080 merged commit 6b8f0c3 into main May 11, 2026
1 check passed
@paul58914080 paul58914080 deleted the technical/theme branch May 11, 2026 02:07
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