Global Styles and Theming

Global styles apply to the entire application. They are loaded once and affect all components.

Adding Global Styles

In angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "src/theme.css"
            ]
          }
        }
      }
    }
  }
}

Global Styles File

/* styles.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg-color, #ffffff);
  color: var(--text-color, #333333);
}

h1, h2, h3 {
  margin: 0 0 0.5em;
}

a {
  color: var(--link-color, #0066cc);
  text-decoration: none;
}

When to Use Global Styles

• CSS resets and base styles
• Typography (font families, sizes)
• CSS custom properties (theming variables)
• Utility classes (flex, grid helpers)
• Third-party library styles

When NOT to Use Global Styles

• Component-specific styles (use component styles)
• Layout styles for specific components
• Any style that should be scoped

CSS custom properties (variables) enable runtime theming without recompiling styles.

Defining Theme Variables

/* styles.css */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  --bg-color: #ffffff;
  --surface-color: #f8fafc;
  --text-color: #1e293b;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --error-color: #ef4444;
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Dark Theme

/* styles.css */
[data-theme='dark'] {
  --bg-color: #0f172a;
  --surface-color: #1e293b;
  --text-color: #f1f5f9;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

Using Theme Variables in Components

@Component({
  selector: 'app-card',
  template: `<div class="card"><ng-content></ng-content></div>`,
  styles: [`
    .card {
      background: var(--surface-color);
      color: var(--text-color);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
    }
  `],
})
export class CardComponent {}

Theme Switching

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggleTheme()">
      {{ isDark ? 'Light' : 'Dark' }} Mode
    </button>
    <ng-content></ng-content>
  `,
})
export class AppComponent {
  isDark = false;

  toggleTheme(): void {
    this.isDark = !this.isDark;
    document.documentElement.setAttribute(
      'data-theme',
      this.isDark ? 'dark' : 'light'
    );
  }
}

SCSS Theming (Alternative)

// _variables.scss
$primary: #3b82f6;
$bg: #ffffff;
$text: #1e293b;

// _dark.scss
$bg: #0f172a;
$text: #f1f5f9;

// styles.scss
@use 'variables';

body {
  background: $bg;
  color: $text;
}