skills.rest
tolonlo
tolonloCOMMUNITY
Explore all skills by this author →
GitHub

create-m3-theme

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of implementing a consistent, branded Angular Material 3 (M3) theme across both client-side SCSS and legacy server-side/SSR theme configuration.

Core Features & Use Cases

  • Define a new M3 theme in SCSS: Create a theme configuration in frontend/src/styles/theme.scss, then wire it into frontend/src/styles.scss so Material tokens and custom CSS variables are applied correctly.
  • Update app configuration schema and defaults: Extend config.schema.yml and config/default.yml so the new theme can be selected via application.theme.
  • Add a legacy SSR/older UI mapping: Register matching color tokens in views/themes/themes.ts for server-rendered pages and non-M3/legacy UI elements.

Use case: You want the OWASP Juice Shop UI to reflect a new brand identity (primary/surface/nav/text colors) while keeping component styling consistent and ensuring legacy pages use the same palette.

Quick Start

Add your theme name to the SCSS theme definitions in frontend/src/styles/theme.scss and frontend/src/styles.scss, then register the same theme colors in config.schema.yml, config/default.yml, and 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 create a custom Angular Material 3 theme for OWASP Juice Shop?▼

To create a custom Angular Material 3 theme, define Material palettes and generate CSS variables in frontend/src/styles/theme.scss, then wire it into frontend/src/styles.scss to apply the tokens correctly across the application.

How do I keep legacy SSR pages consistent with a new Angular UI theme?▼

To keep legacy SSR pages consistent with a new Angular UI theme, register matching color tokens in views/themes/themes.ts using bgColor, textColor, navColor, primLight, and primDark mappings for server-rendered views.

Do I need to update config.schema.yml to add a new Angular M3 theme?▼

Yes, you need to update config.schema.yml and config/default.yml to extend the configuration schema and defaults, allowing the new Angular M3 theme to be selected via the application.theme property.

What is the best way to apply custom Material palettes and CSS variables in Angular?▼

The best way to apply custom Material palettes and CSS variables in Angular is to configure them directly in frontend/src/styles/theme.scss, ensuring both modern component styling and legacy views share the same color definitions.

Can I map theme colors for both modern Angular components and server-rendered views?▼

Yes, you can map theme colors for both modern Angular components and server-rendered views by defining SCSS variables for the frontend and mapping equivalent tokens in views/themes/themes.ts for legacy UI elements.

Related Skills

Explore More Design & Creative Skills→
juice-shopjuice-shop
13.6k

create-m3-theme

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

Official
Intermediate
googlegoogle
172

pinpoint webui contributor

Guide Angular component structure, styling, and architecture for Pinpoint Web UI contributions.

Official
Intermediate
VitorM147VitorM147

create-m3-theme

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

Community
Intermediate
jhd3197jhd3197
666

audit-less

Scan LESS stylesheets for variable errors and report fixes.

Community
Intermediate