Implementing a Material Angular Theme Switching Component

jesserules — Mon, 12 Jun 2023 18:00:45 +0000

Angular 16 Theme Switching

A quick knowledge drop on implementing theming

Below is what the final outcome is and the end goal of this walkthrough.

Since I am not trying to sling more ads than a recipe website here's the Git Repo upfront: Git Repo

You can see on this website, my photography website, that you can switch out themes by clicking the icon at the top.

First I created the app with the angular cli: ng new ThemePicker.

I left the default to build it with css files instead of scss files to show how to migrate this.

This is a common scenario I have ran into, where old apps are written with css files instead of using scss. So, let's fix this.

To fix this flub of css instead of scss we are going to use a handy npm package Scss Migrate: SCSS Migrate Git

Once you have this installed you can run the command:

ng g schematics-scss-migrate:scss-migrate

The command from above will have you select the "from" and the "to." In our case this is "CSS" to "SCSS"

But make sure you run it from the parent of the /src file or it will only swap out styles.css to styles.scss.

Running it from the parent of /src updates all the component modules as well.

Run the script and select CSS to Scss for steps 1 & 2

The third step will ask you for your app's name, you can find this in the angular.json file:

That's it! We are now switched over to scss.

Make sure your angluar.json was updated with the scss schematics:

            "projectType": "application",
            "schematics": {
                "@schematics/angular:application": {
                    "strict": true
                },
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },

Let's get to theming!

First, let's use an awesome NPM package to do this AngularMaterialCSSVars: Git Repo

Install the NPM Package:

npm i angular-material-css-vars -S

Update your index file to include the background color class:

Next update your App Module to use the Angular Material CSSVars:

To make an easy to use component to let the user change the theme on the front end lets build a standalone component:

You can find the code for this component Here

And we want the user to be able to set the theme and have it stay between sessions so lets create a storage service:

You can find the code for this service Here

Next in the styles.scss file we can add in the default scss variables:

@use "angular-material-css-vars" as mat-css-vars;
@use "@angular/material" as mat;
@import "@angular/material/theming";
@include mat-css-vars.init-material-css-vars();

@include mat-css-vars.mat-css-set-palette-defaults(
  mat.$light-blue-palette,
  "primary"
);
@include mat-css-vars.mat-css-set-palette-defaults(mat.$pink-palette, "accent");
@include mat-css-vars.mat-css-set-palette-defaults(mat.$red-palette, "warn");

Then we can add in specific style classes for each theme, like:

.isLightTheme .logonav {
  background-size: 65px;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-image: url(https://media.jessecarlbergphotography.com/images/logo.png);
}

.isDarkTheme .logonav {
  background-size: 65px;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-image: url(https://media.jessecarlbergphotography.com/images/logowhite.png);
}

And that's it. Easy peasy.

-J

Building a Photography site in Angular

jesserules — Mon, 12 Jun 2023 17:54:24 +0000

I'm new here, so hopefully I'm doing this right. I've been spending my free time working on my side hustle as a photographer and decided to marry the two by building myself a new website.
https://jessecarlbergphotography.com
My current stack is:
Angular 16,
Angular Material,
Bootstrap,
Asp.net,
Entity Framework,
SQL Server and Mongo DBs,
Image and Media CDN on Azure,
all above hosted on Azure Cloud.
I'm building out a user management and auth system now to share galleries and photos, etc.
I thought I'd document some of the progress and share it as I go. Let me know if there's any specific interests I should focus on.
My most recent addition was theming if you're interested check it out in my walkthrough here:
https://jessecarlbergphotography.com/news/648731df22607f04324d6ffa

But I'm looking for suggestions on cool features I should build out!

DEV Community: jesserules

Implementing a Material Angular Theme Switching Component

Angular 16 Theme Switching

A quick knowledge drop on implementing theming

Building a Photography site in Angular