Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

Question

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, those custom colors also change accordingly. For example, if I have a file that outlines the colors for each theme, I would like to import it into any scss file and use these colors to style different elements:

@import "custom-colors"

.my-elem {
 color: $textColor;
}

When switching themes, I envision applying a particular class to the top-level container of the app. Afterwards, I expect $textColor to take on a new value so that the color of .my-elem updates as well.

Is there a way to accomplish this without having to manually write out different styles for each component affected by the theme change?

css angular sass angular-material

Answer 1

Answer №1

Discover 2 different methods to update themes:
1. Implementing a parent class in the root component
2. Renaming files (similar to what angular material does)

1. Applying CSS using a parent class (See example below)

.light {
 mat-form-field {
  color: white;
 }
 my-custom-element {
 color: white;
 }
}
.dark {
 mat-form-field {
  color: black;
 }
 my-custom-element {
  color: black;
 }
}

When a user switches the theme, simply change the class on your root element like so:

<app-component class="light">

There are multiple approaches for achieving this: Using global variables, Utilizing Event Emitters

2. Renaming file names - splitting the same file into light.css and dark.css

Upon changing the theme, swap out

<link ref="stylesheet" href="light.css">

The Angular approach involves using Renderer 2 Set Attribute

Answer 2

Discover 2 different methods to update themes:
1. Implementing a parent class in the root component
2. Renaming files (similar to what angular material does)

1. Applying CSS using a parent class (See example below)

.light {
 mat-form-field {
  color: white;
 }
 my-custom-element {
 color: white;
 }
}
.dark {
 mat-form-field {
  color: black;
 }
 my-custom-element {
  color: black;
 }
}

When a user switches the theme, simply change the class on your root element like so:

<app-component class="light">

There are multiple approaches for achieving this: Using global variables, Utilizing Event Emitters

2. Renaming file names - splitting the same file into light.css and dark.css

Upon changing the theme, swap out

<link ref="stylesheet" href="light.css">

The Angular approach involves using Renderer 2 Set Attribute

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

Answer №1

Similar questions

Deciding Between Utilizing Observables or Promises in Angular

Enhance web design with dynamic size pseudo elements using only CSS, no

Steps for adding a stroke to just the left and right sides of an SVG wave:

Having trouble with the position function in JavaScript?

How can I use Bootstrap and PHP to style future posts in separate rows on a website?

Having trouble with CSS :before pseudo-element and sibling selector?

What is the method to deactivate multiple links using jQuery?

The select dropdown default choice is not appearing as expected

The custom component is not updating the NgIf directive in HTML even though it receives a boolean variable

Icon with label and border using Font Awesome

Is there a way to have a button function as a submit button for a form even when it is located in a separate component within a react application?

Learning how to effectively utilize the tap and map functions in Angular

Filling a table cell with a div that spans 100% height

Frontend Development with Angular 7+: A Modular Approach

Is there a way to incorporate a dropdown feature into a search bar using Ant Design?

Mix div borders with varying border radius for child elements

Issue with alignment of divs causing them to stack in a strange manner instead of floating left and

What is the best way to add spacing between the fields within a Bootstrap 4 form row that spans across 2 rows when viewed on small displays?

Switching the color of the placeholder text on a credit card

"An error occurred stating that _co.JSON is not defined in