Unlock the full potential of Angular Material Framework by leveraging Custom Palettes

I'm experiencing some issues implementing Custom Palettes with Angular Material Framework. I'm still trying to grasp the concept of using a custom theme.

In the Angular configuration file.

$mdThemingProvider.definePalette('crmPalette', {
    '50': 'fafafa',
    '100': 'ffcdd2',
    '200': '000000',
    '300': 'e57373',
    '400': 'ef5350',
    '500': 'f44336',
    '600': 'e53935',
    '700': 'd32f2f',
    '800': 'c62828',
    '900': 'b71c1c',
    'A100': 'ff8a80',
    'A200': 'ff5252',
    'A400': 'ff1744',
    'A700': 'd50000',
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50', '100', '200'],
    'contrastLightColors': undefined
});

$mdThemingProvider.theme('crmPaletteTheme')
    .primaryPalette('crmPalette');

In a View file

<div md-theme="crmPaletteTheme">
    <md-button class="md-raised">Login</md-button>
</div>

I have some questions

Once a custom theme is defined, how do I use 'fafafa' and 'ffcdd2' to set the background color and text color of a md-button?

javascriptangularjsangular-material

Answer №1

give this a shot.

angular.module('App', ['ngMaterial']).config(
function ($mdThemingProvider) {

    $mdThemingProvider.definePalette('colormaterial', {
        '50': '14f9fc',
        '100': '1949a8',
        '200': 'ef9a9a',
        '300': 'e57373',
        '400': 'ef5350',
        '500': 'f44336',
        '600': 'e53935',
        '700': 'd32f2f',
        '800': 'c62828',
        '900': 'b71c1c',
        'A100': 'ff8a80',
        'A200': 'ff5252',
        'A400': 'ff1744',
        'A700': 'd50000',
    });
    $mdThemingProvider.theme('default')
      .primaryPalette('colormaterial')
}).controller('appController', function ($scope) {

});

within the html

       <md-input-container class="sin-margin ancho-total-element">
           <md-button md-colors="{'background-color': 'colormaterial-100'}" class="md-raised md-primary" type="submit"> Sign In </md-button>
       </md-input-container>

Tested it out and it's effective

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

Transfer groups between divisions

In my HTML structure, I have two main divs named Group1 and Group2. Each of these group divs contains at least two inner divs, all with the class .grp_item. Currently, the grp_item class is set to display:none, except for one div in each group that has a c ...

javascriptjqueryhtmlswap

How to ensure onmouseenter and onmouseleave work properly in Chrome using HTML, JavaScript, and jQuery

<div style="position: relative; left: 50px; top: 30px; width: 300px; height: 150px; background: #222222;" onmouseenter="this.style.background='#aaaaaa'" onmouseleave="this.style.background='#222222';"></div> http://jsfiddle ...

javascriptjqueryhtmlgoogle-chromemouseevent

Ways to retrieve a single variable periodically and refresh it at intervals

One common issue faced by maintenance employees at my company is losing their log entry if they receive a call or text while filling out the daily form on their phones. To solve this problem, I came up with a solution to store the form values in PHP SESSIO ...

javascriptphpjqueryajax

Displaying AJAX Confirmation in a Popup Window

My form is set up to insert data into a database via an AJAX request. Upon successful insertion, the "rentinsert.php" will display a success message on the page that reads "Your order has been placed". However, I would like this success message to appear i ...

javascriptphpjqueryhtmlajax

Seeking assistance with basic Javascript/Jquery for Ajax on Rails 3 - can anyone help?

I've been diving into JavaScript and hit a roadblock. At the moment, I have a very basic gallery/image application. My goal is to create a functionality where clicking on an image will lead the user to a URL stored in my model data using AJAX. Additi ...

javascriptjqueryruby-on-railsajax

Acquire Formik Validation for the Current Year and Beyond

How can I ensure that the input in Formik is restricted to the currentYear and later years only? const currentYear = new Date().getFullYear(); expiryYear: yup .string() .required('Please select an expiry year') .min(4, `Year format must be grea ...

javascriptreactjsmaterial-uiformikyup

Activate the q-file toggle for the Quasar framework when a different button is selected

How can I make the file selector q-file toggle in Quasar framework when a specific button is clicked? My current attempt: When this button is clicked, it should toggle the q-file: <button @click="toggleFileSelector">Toggle File Selector&l ...

javascriptvue.jsvuejs2vue-componentquasar-framework

What is the best way to include a disable option or default option in a select box?

I am incorporating react material in react using the select component. My goal is to include a first disabled option that says "please select item." This is how it's currently implemented in HTML: <select name="tagging"> <option sel ...

javascriptreactjsmaterial-designmaterial-ui

SQLite Simplified - A Primer on Fundamentals

I'm currently experimenting with the SQLike query engine from Thomas Frank's website and finding it difficult to grasp the basic concept. In my project, I have JSON data sourced from my PHP code, which is structured like this: var placesJSON=&l ...

javascriptjsonsqlike

Navigating to lower levels of JSON data in JavaScript instead of starting with the top level

Using a microservice, I fetch multiple sets of JSON data and display them on a Vue.js-powered page. The structure of the data is as follows: {"data":{"getcompanies": [ {"id":6,"name":"Arena","addr ...

javascriptjsonjavascript-objects

As I embark on building my web application using next.js, I begin by importing firebase from the "firebase" package. Unfortunately, a particular error unexpectedly surfaces in the terminal

I am currently developing a next.js web application and I have decided to utilize firebase for both database management and authentication. However, when attempting to import firebase in a specific file, I encountered the following error: Error - ./firebas ...

javascriptfirebasenext.jsyarnpkg

Utilize AngularJS to present JSON data generated from PHP in a tabular format

After retrieving data from a MySQL database, I am formatting it into JSON. The fetch.php file: https://i.stack.imgur.com/4UbOs.png When I use echo $json;, the following is output to the console. [{"id":"1","emp_no":"1111","first_name":"1fname","last_n ...

phpmysqlangularjsjson

Is there a way to show the keyboard on Chrome for Android without displaying the address bar?

One of the key features of Chrome on Android is that the address bar disappears when scrolling, allowing for more screen space. However, when you click on a text input field and the keyboard pops up, the address bar reappears. It seems like Google intenti ...

javascriptandroidcssgoogle-chrome

Using AJAX in Django to detect fields with JavaScript

I am currently working on a model: class Name(models.Model): name = models.CharField(max_length=255) project = models.CharField(max_length=255) story = models.CharField(max_length=500) depends_on = models.CharField(max_length=500, ...

javascriptjquerypythonajaxdjango

Arranging a list based on the child property in a React component

Within my application, I have an array mapped to a map that generates a div with a data-date attribute as shown below: It's worth noting that the array cannot be sorted here since there are no dates available for comparison, only the element ID cons ...

javascriptreactjs

implementing a sidebar menu using AngularJS

I am currently working with bootstrap and AngularJS to create a sidebar menu. Here is the code I have for it: <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-send"></span> Link</a& ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

Switch back and forth between two different function loops by clicking

I have implemented two sets of functions that animate an SVG: one set runs in a vertical loop (Rightscale.verticalUp and Rightscale.verticalDown) and the other in a horizontal loop (Rightscale.horizontalUp or Rightscale.horizontalDown). On clicking the SVG ...

javascriptjquerysvg

Switch between different table rows

I have here a table that is used for displaying menu and submenu items. It's a mix of PHP (to fetch the menu items and their respective submenus) and HTML. What I am trying to figure out is how to toggle the visibility of only the submenu items under ...

javascriptphpjqueryhtmlcss

Moving the words from textArea to each 'ol' element using JavaScript

When a word is entered in the textarea, it should be assigned to a specific class within an 'ol' tag. Each subsequent word will be placed in the next class sequentially. If there are no more words, the remaining classes should remain empty. <! ...

javascripthtml

What is the best way to change a JSON string into an array of mysterious objects?

I am currently working on a flashcard generator project and I am dealing with a JSON String that is quite complex. The JSON String contains multiple arrays and objects structured like this: data = [{"front":"What is your name?","back":"Billy"},{"front":"H ...

javascriptarraysjsonnode.jsstring