The challenge of customizing the theme in Angular 18

I recently started updating my code from Angular 16 to the latest version, which is Angular 18.

Below is the snippet of code I've implemented, but it's causing compilation errors:

@use '@angular/material' as mat;

// Define custom palettes for NAPSA colors
$napsa-blue: (
  // color codes here
);

$napsa-orange: (
  // color codes here
);

// More code snippets follow...

I keep encountering this error:

Undefined function.
   ╷
72 │ $light-primary: mat.define-palette($napsa-blue);
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/napsa.scss 72:17  root stylesheet

./src/napsa.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
   ╷
71 │ $light-primary: mat.define-palette($napsa-blue);
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/napsa.scss 71:17  root stylesheet



** The Angular Live Development Server can be accessed at localhost:4200. Visit http://localhost:4200/ in your browser. **


✖ Compilation failed.
cssangularsassangular-material

Answer №1

Angular 18 is rolling out with the new M3 theming as the default option. For those who prefer to stick with M2 theming, simply add the m2- prefix to some Sass symbols (check out the M2 theming documentation):

@use '@angular/material' as mat;

$light-primary: mat.m2-define-palette($napsa-blue);
$light-accent: mat.m2-define-palette($napsa-orange);
$dark-primary: mat.m2-define-palette($napsa-blue);
$dark-accent: mat.m2-define-palette($napsa-orange);

$light-theme: mat.m2-define-light-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    background: mat.m2-define-palette(mat.$grey-palette),
  )
));

$dark-theme: mat.m2-define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    background: mat.m2-define-palette(mat.$grey-palette, 900),
  ),
));

If you're interested in crafting a custom M3 theme, utilize the Angular Material M3 theme creation schematics:

ng generate @angular/material:m3-theme

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My code is giving me a headache because it just refuses to cooperate

There is an issue with my HTML code for creating 5 sliders. The numbers are changing in the first slider, but not in the other sliders. <body> <div class="box"> <div class="slider"> <input type="range" name="e ...

htmlcss

Application with menu design, similar to the layout of google.com on mobile devices

Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...

javascriptandroidjqueryhtmlcss

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

javascriptjquerycss

The first-child and last-child selectors are not working properly in the CSS

In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...

css

Problem with full-page navigation sliding in and fading in and out

Upon the user's click on <a href="#slide-nav" class="slide-nav-trigger">, a full-page navigation smoothly slides into view. This animation is triggered by CSS and uses jQuery for event delegation. The Dilemma Instead of abruptly turning on and ...

javascriptjqueryhtmlcss

Enhance the user experience by incorporating a tooltip into the input field using Bootstrap 5

I have implemented custom CSS to display an error icon with a tooltip, but after upgrading to Bootstrap 5, I am unable to achieve the same result. Expected: https://i.sstatic.net/Mjvik.png .icon { position: absolute; bottom: 6px; right: 10.5px; ...

htmlcssangularbootstrap-5

What is the best way to store information in JSON format and transmit it to a server using an API?

I'm looking to save the form data in JSON format and send it from my UI to the server. I've searched through numerous sources but haven't found a solution yet. Struggling with the basic design structure, any help would be greatly appreciat ...

angulartypescript

Angular and the collection of viewChild elements

I have come across this code snippet that is functioning quite well... import { Component, ViewChild, ElementRef } from '@angular/core'; import { NavController } from 'ionic-angular'; declare var google; @Component({ selector: &apo ...

angularionic2

Exploring the world of dynamic form creation using Angular and Mat-select options

I'm working on an Angular application and I want to create a dynamic form using Mat-select for the type selection. Depending on the chosen type, I need to be able to add or remove fields dynamically. I also want to display a specific field if the typ ...

angular

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

Passing parameters to an Angular CLI ejected app

Currently, I am utilizing @angular/[email protected]. I have leveraged the new eject feature to modify the webpack configuration. Now, I find myself perplexed on how to pass parameters to my build process. For instance, how can I execute ng build --p ...

angularnpmwebpackangular-cli

How can I incorporate a placeholder using formcontrol in a select box?

Is there a way to display the placeholder text in a selectbox without it being selectable? I attempted using the disabled selected option value, but it did not work as expected. <div class="input-group"> <select class="form-control" formContro ...

angularionic3

css hover function not operational with back to top button

I have implemented a back to top button using the following resource: Although the button is functioning as expected, I am encountering an issue with the hover effect. In Chrome inspector, manually forcing hover on .cd-top does not apply the CSS style as ...

htmlcss

Achieve vertical center alignment for a flexible top navigation that adapts to different screen sizes

To vertically center the text in my top navigation, I attempted to set a height of 3em for my .header and use vertical-align: middle;. However, this caused an issue with my responsive fold-out menu as it could not handle the fixed height, resulting in the ...

htmlcssvertical-alignment

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

javascripthtmlcssvue.js

Creating a dynamic radio button feature in Angular with reactive forms

I am currently developing an Angular 12 application that includes a dynamic table with multiple rows. Each row consists of four columns, and the third column contains radio buttons for selecting Yes or No. Intended Output: For example, if there are three ...

angularangular-reactive-forms

Exploring the Process of Iterating Through a JSON Array in Angular

Within my angular application, I am utilizing an API to retrieve data regarding a chosen country. However, I am encountering difficulties in showcasing the "name" property from the languages section within the response data: [{ "name": "Colombia", ...

javascripthtmlangular

Is it possible to use uglifyjs to merge multiple files into a single minified file?

I attempted to compress multiple javascript files into one using the uglifyjs tool, but encountered an issue. I ran $node uglifyjs.js to execute the file. Below is the content of the uglify.js file: var fs = require('fs'); var uglifyjs = re ...

javascriptnode.jsangularexpressuglifyjs

Creating overlapping layouts with absolute positioning in Bootstrap leads to a visually appealing

I'm currently working on a layout that involves absolute positioning elements, similar to the one shown in this example: https://i.sstatic.net/TixbZ.jpg It seems like the elements are overlapping and not clearing properly. I've been looking for ...

htmlcsstwitter-bootstrapbootstrap-4sass

Different types of subscriptions for forkJoin observable

I am currently making two API requests with typed responses and combining them using the Observable.forkJoin method. My goal is to store each of the results in separate typed variables. var observableOrganization: Observable<Organization> = this.get ...

angulartypescriptrxjsobservable