Designing a Custom Angular Theme with CSS Variables

{
  "title": "Designing a Custom Angular Theme with CSS Variables",
  "description": "Learn how to create a customizable theme for your Angular application using CSS variables for easier maintenance.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-theme-css-variables",
      "description": "Ensure that CSS variables are used for theming to allow dynamic and maintainable styling in Angular applications.",
      "severity": "warning",
      "condition": {
        "type": "css",
        "pattern": ":root\\s*{[^}]*}"
      },
      "actions": [
        {
          "type": "add",
          "content": ":root {\n  --primary-color: #6200ea;\n  --secondary-color: #03dac6;\n  --background-color: #ffffff;\n  --text-color: #000000;\n}\n\nbody {\n  background-color: var(--background-color);\n  color: var(--text-color);\n}\n\nbutton {\n  background-color: var(--primary-color);\n  color: var(--text-color);\n}\n\nbutton.secondary {\n  background-color: var(--secondary-color);\n  color: var(--text-color);\n}"
        }
      ]
    },
    {
      "id": "angular-theme-service",
      "description": "Implement a ThemeService to manage and switch themes dynamically in Angular applications.",
      "severity": "warning",
      "condition": {
        "type": "typescript",
        "pattern": "class\\s+ThemeService\\s*{[^}]*}"
      },
      "actions": [
        {
          "type": "add",
          "content": "import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ThemeService {\n  private currentTheme = 'default';\n\n  setTheme(theme: string) {\n    this.currentTheme = theme;\n    const themeProperties = this.getThemeProperties(theme);\n    Object.keys(themeProperties).forEach((property) => {\n      document.documentElement.style.setProperty(property, themeProperties[property]);\n    });\n  }\n\n  private getThemeProperties(theme: string): { [key: string]: string } {\n    const themes = {\n      default: {\n        '--primary-color': '#6200ea',\n        '--secondary-color': '#03dac6',\n        '--background-color': '#ffffff',\n        '--text-color': '#000000',\n      },\n      dark: {\n        '--primary-color': '#bb86fc',\n        '--secondary-color': '#03dac6',\n        '--background-color': '#121212',\n        '--text-color': '#ffffff',\n      },\n    };\n    return themes[theme] || themes['default'];\n  }\n}"
        }
      ]
    },
    {
      "id": "angular-theme-usage",
      "description": "Ensure that components use CSS variables for styling to maintain consistency and support dynamic theming.",
      "severity": "warning",
      "condition": {
        "type": "css",
        "pattern": "background-color:\\s*#[0-9a-fA-F]{3,6};"
      },
      "actions": [
        {
          "type": "replace",
          "pattern": "background-color:\\s*#[0-9a-fA-F]{3,6};",
          "replacement": "background-color: var(--primary-color);"
        }
      ]
    }
  ]
}