skills.rest
juice-shop
juice-shopOFFICIAL
Explore all skills by this author →
Website𝕏@owasp_juiceshopGitHub

create-m3-theme

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

13.6k|19.0k|Updated Sep 19, 2014
Search Tags:#theme tokens#ui customization#scss#angular material#configuration schema#m3 theme#legacy SSR colors
One-click install
npx skills add https://github.com/juice-shop/juice-shop --skill create-m3-theme-juice-shop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-m3-theme
Source: https://github.com/juice-shop/juice-shop/tree/main/.ai/skills/create-m3-theme
Command: npx skills add https://github.com/juice-shop/juice-shop --skill create-m3-theme-juice-shop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of adding a new Angular Material 3 (M3) UI theme in OWASP Juice Shop without missing the required client-side SCSS tokens, legacy/server-rendered theme mappings, and configuration wiring.

Core Features & Use Cases

  • Define an M3 theme in SCSS: Create a new theme configuration in frontend styles and ensure it generates the correct Material system tokens and CSS variables.
  • Integrate the theme into global styling: Apply the theme via theme overrides or targeted manual CSS variable and component overrides for customized looks.
  • Wire the theme into app configuration and legacy rendering: Register the theme name in config schema/defaults and add corresponding entries in the legacy SSR theme map used by older UI elements.

Quick Start

Use this Skill to create and integrate an M3 theme called mytheme by editing the SCSS theme definitions, registering it in config.schema.yml and config/default.yml, and adding matching color values in views/themes/themes.ts.

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 new Angular Material M3 theme to an existing project?▼

Adding a new Angular Material M3 theme requires defining SCSS theme tokens, applying them in global styles, registering the theme name in configuration schema files, and mapping corresponding colors for server-rendered UI elements.

What files need to be updated when wiring an M3 theme into a configuration schema?▼

Wiring an M3 theme into a configuration schema requires updating config.schema.yml and default.yml with new theme enums, modifying theme.scss for token definitions, and adding entries to legacy themes.ts for SSR color mapping.

How does the legacy SSR color mapping work when applying a customized M3 UI theme?▼

Legacy SSR color mapping works by adding corresponding color entries in views/themes/themes.ts, ensuring older server-rendered UI elements correctly match the new Angular Material M3 theme tokens defined in your SCSS files.

Can I override Material system tokens for complex customized UI themes in Angular Material?▼

Yes, you can override Material system tokens for complex customized UI themes by applying targeted manual CSS variable overrides and component-level adjustments within frontend/src/styles.scss to achieve your desired look.

Why does my new Angular Material M3 theme not apply to older UI components?▼

A new Angular Material M3 theme may not apply to older UI components if corresponding color values are missing from the legacy SSR theme map in views/themes/themes.ts, which is required for older UI elements.

Related Skills

Explore More Design & Creative Skills→
VitorM147VitorM147

create-m3-theme

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

Community
Intermediate
tolonlotolonlo

create-m3-theme

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

Community
Intermediate
syncfusionsyncfusion

syncfusion-javascript-themes

Apply and manage Syncfusion JavaScript control themes via npm or CDN.

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