Having difficulty loading themes in AngularJS Material

I have added Angular (1) Material (v.1.1.5) to my Visual Studio project using NuGet and followed their instructions for referencing it:

<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-animate.min.js"></script>
<script src="scripts/angular-aria.min.js"></script>
<script src="scripts/angular-messages.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
<script src="scripts/angular-material.min.js"></script>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<link href="content/angular-material.min.css" rel="stylesheet" />

According to their documentation:

If you're using the Angular CLI, include this in your styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Or you can directly link the file like this:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

I'm unable to find the prebuilt themes .css files after installing via NuGet. Am I missing something? Shouldn't these themes be included in the angular-material.min.css file?

EDIT: @Edric: I have already set up my mdThemeProvider:

<body ng-app="myApp" ng-controller="MainCtrl" md-theme="ccc" md-theme-watch="true">

&

var myApp = angular.module("MyApp", ['ngAnimate', 'ngAria', 'ngMessages', 'ngMaterial', 'ngRoute', 'ngSanitize']);

rcaApp.config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('ccc')
      .primaryPalette('pink')
      .accentPalette('orange')
      .dark();
});

Answer №1

You are currently viewing the documentation for Angular Material. However, it is recommended to refer to the documentation for AngularJS Material instead.

Nevertheless, here is the accurate method of defining a theme using $mdThemeProvider:

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
        $mdThemingProvider.theme('default')
            .primaryPalette('pink')
            .accentPalette('orange');
});

For further details on theming, click here

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

Show two choices in a select box next to each other

I've been attempting to display a select box with two options side by side in a list format. Struggling to find any libraries that can achieve this functionality. Here is an example: <select> <option x><option y> <optio ...

Angular JS is throwing an error because angular.model is not recognized as a function

I am experimenting with some angular JS examples, but I have encountered an error that is causing me some trouble. Can someone please assist me in resolving this issue? <html> <head> <script src="http://ajax.googleapis.com/ajax/li ...

Stopping a jQuery function from executing multiple times while it is already active - is it possible?

Currently, I am utilizing the http://jsfiddle.net/CqAU2/ plugin for image rotation on my website. The issue I am facing is that when the user clicks on the image box multiple times, it continues rotating each time. I want the click action to only be regi ...

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

I am facing an issue where my website switches to mobile design at 850px, but the button I have on both desktop and mobile mode gets hidden under the header banner when it transitions to mobile design. I want to adjust the main body content of the website ...

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap. Desired Layout Structure: Row1: Consists of a fixed header 64px in heigh ...

What is the process of incorporating data from PHP into AngularJS?

Looking for ways to transfer data from a PHP array to AngularJS. I attempted the following: HTML <? foreach ($new->images as $val): ?> <div ng-init="func(<?=$val?>)"></div> <? endforeach; ?> AngularJS: $ ...

When using the <a> tag in an ASP.NET MVC view, the hyperlink may be missing

When utilizing ASP.NET MVC 5, I encountered an issue within my view where I am attempting to incorporate "Edit | Delete" functionality within a table. Strangely, I am able to generate a hyperlink for the Edit function, but not for the Delete function. Wit ...

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

I am trying to create a function that can take a string of text and wrap each letter within that string with an HTML tag such as <i> or <span>. Although I have made some progress, the current solution is not working as expected. The issue I a ...

I'm having difficulty grasping the concept of creating a responsive design

I've been working on making this video embed responsive, and I've got it working for tablets. Now, my next challenge is optimizing it for phones and handling browser window resizing dynamically. Here's the desired layout: https://i.sstatic. ...

Creating a custom form validation within a modal window featuring tab navigation, all styled with the latest Bootstrap

Within a modal, I have incorporated a header with tabs and tab content in the body, following the structure of Bootstrap 5. The modal footer includes buttons separated by dots. When encapsulating the modal body and footer within a form tag for validation ...

Anchors that need to be clicked multiple times before activating

'I recently encountered a strange bug. My CSS3 anchors/buttons, which I have been simplifying by removing properties, sometimes require multiple clicks to function. This is completely new to me and quite perplexing. The issue seems to occur randomly, ...

PHP page showcasing a dynamic list of products

Hello, I am fairly new to this platform. I have a question regarding how to display product data dynamically from a database in one row with 4 different products side by side rather than in one column. <div class="row"> <div class="col-sm-12 co ...

Fully responsive header designed for optimal experience at any screen height

I am facing issues with the header and cannot seem to find a solution. My goal is to make the header span 100% of the window screen height. I need a responsive header that adjusts to 100% height, and when resizing for a smaller viewport, nothing should sho ...

Tips for assigning an AngularJS data-bound value to the href attribute of an anchor tag

I need to include multiple email ids separated by commas from an angularjs binded value in the mailto field of an anchor tag. The team.emails variable can contain either a single email id or multiple email ids separated by commas. <tr ng-repeat="team ...

What is causing the text to not wrap around properly?

I'm currently facing an issue where the text that should not wrap around the image is wrapping, while the text that should be wrapped isn't. This is causing a layout problem in my coding section as shown here: https://i.sstatic.net/2oMn1.png The ...

Is it possible to eliminate the port number in Angular 7?

Currently, I am utilizing Angular in conjunction with an ASP.Net Web application. One interesting observation I've made is that when I use ng build, the app builds and runs on a URL without any port number. However, if I run the app using ng serve, it ...

Error: The use of import statement is not allowed outside a module in JavaScript due to a Syntax

I'm just beginning my journey with React, starting from scratch without setting up all the necessary dependencies. Initially, I used CDNs in my html file but now I want to learn how to import React and ReactDOM into my local setup and also link CSS fi ...

Struggling to successfully toggle the visibility of items

I am currently facing an issue with displaying different sets of data based on button clicks. The first block of information is showing correctly upon page load, but when I try to display other blocks by clicking on the corresponding buttons, the info cont ...

Creating unique CSS div designs based on the nth-child selector

I have created a website layout. https://i.stack.imgur.com/6FSEb.png I have included the file showing the design. The data in the boxes will come from a MySQL database. My query is, can it be done with just one query? Currently, I am running separate q ...

Limiting a text based on spaces or at the completion of a word within a string or sentence

Currently, I am utilizing a LimitTo filter to generate excerpts of article descriptions for display on the homepage of a website as snippets in the feature section. The LimitTo filter is set at a maximum of "100 characters," but it sometimes cuts off word ...