skills.rest
VitorM147
VitorM147COMMUNITY
Explore all skills by this author →
GitHub

create-m3-theme

Integrates Angular-Material-M3 themes into Juice Shop's frontend and legacy systems.

Updated May 14, 2026
Search Tags:#angular#configuration#theme tokens#scss#ui theming#material m3#owasp juice shop
One-click install
npx skills add https://github.com/VitorM147/juice-shop-private --skill create-m3-theme-vitorm147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-m3-theme
Source: https://github.com/VitorM147/juice-shop-private/tree/main/.ai/skills/create-m3-theme
Command: npx skills add https://github.com/VitorM147/juice-shop-private --skill create-m3-theme-vitorm147

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of integrating a custom Angular Material M3 look consistently across OWASP Juice Shop without breaking UI tokens or legacy server-rendered pages.

Core Features & Use Cases

  • SCSS-driven M3 theme definition: Add a new M3 theme configuration in frontend/src/styles/theme.scss, then wire it into frontend/src/styles.scss to apply Material system tokens and CSS variables.
  • Theme-overrides integration for standard palettes: Use theme-overrides to map M3 tokens (primary, tertiary, surfaces, text) to Juice Shop’s expected variables for consistent styling.
  • Legacy SSR/compatibility color mapping: Register an equivalent entry in views/themes/themes.ts so server-side rendered pages and legacy UI elements match the new theme’s primary/surface intent.
  • Use case: When branding a deployment for a security workshop, you can create a new theme name, update the config schema and defaults, and ensure both the Angular UI and legacy/SSR pages use the same color system.

Quick Start

Ask the AI to generate the exact file edits needed to add a new M3 theme named mytheme to OWASP Juice Shop, including SCSS theme config, config schema/default updates, and the legacy themes.ts entry.

Frequently Asked Questions about create-m3-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom Angular Material M3 theme to OWASP Juice Shop?▼

To add a custom Angular Material M3 theme to OWASP Juice Shop, you define the palette in `frontend/src/styles/theme.scss`, wire it into `styles.scss`, update the config schema, and register a legacy color mapping in `views/themes/themes.ts`.

Why do my legacy server-rendered pages not match my new M3 theme colors?▼

Legacy server-rendered pages fail to match new M3 theme colors because they require an equivalent entry registered in `views/themes/themes.ts` to map the primary and surface intents for SSR compatibility.

How do I map Material M3 system tokens to Juice Shop CSS variables?▼

You map Material M3 system tokens to Juice Shop CSS variables by using the `theme-overrides` mechanism to connect M3 tokens like primary, tertiary, surfaces, and text to the expected variables for consistent styling.

Can I customize light and dark theme palettes using Angular Material M3 tokens?▼

Yes, you can customize light and dark theme palettes using Angular Material M3 tokens by defining the configurations in your SCSS files and applying them via Material system tokens during development.

What is the best way to ensure consistent UI theming across Angular and legacy components?▼

The best way to ensure consistent UI theming across Angular and legacy components is to align Material system tokens with Juice Shop CSS variables using `theme-overrides` and register an equivalent entry in `views/themes/themes.ts`.

Do I need to update the config schema when adding a new theme selection option?▼

Yes, you need to update the config schema and defaults for theme selection to ensure the new theme name is recognized and can be selected as the active theme for the deployment.

Related Skills

Explore More Software Engineering Skills→
tolonlotolonlo

create-m3-theme

Create and register an Angular Material 3 theme for OWASP Juice Shop.

Community
Intermediate
juice-shopjuice-shop
13.6k

create-m3-theme

Create and integrate Angular Material M3 themes in Juice Shop SCSS and configuration.

Official
Intermediate
rodydavisrodydavis
58

material-3-to-material-2-theme-adapter

Map Material Design 3 color tokens to Material Design 2 theme variables via CSS overrides.

Community
Basic
ishiyanishiyan

m3-web-angular

Applies Material Design 3 themes to Angular apps via SCSS mixins and CLI schematics.

Community
Advanced