Switching the theme color from drab grey to vibrant blue

How can I change the default placeholder color in md-input-container from grey to Material Blue? I have followed the instructions in the documentation and created my own theme, but none of the code snippets seems to work. What am I doing wrong?

mainApp.config(function($mdThemingProvider) {
    $mdThemingProvider.theme('alt')
        .backgroundPalette('blue-grey')
        .primaryPalette('orange')
        .accentPalette('green');
});

<md-input-container class="md-block" flex="30" md-theme="alt">
    <input required type="text" placeholder="Week"
           />

    <div ng-messages="$error">
        <div ng-message="required">This is required.</div>
    </div>
</md-input-container>

Answer №1

Still searching for an official solution to accomplish this task.

If you want to change the appearance, you have a couple of options. Firstly, you can target the specific element using a selector that includes the theme name:

md-input-container.md-alt-theme label,
md-input-container.md-alt-theme .md-placeholder {
  color: rgb(96, 125, 139);
}

Alternatively, you can adjust the foregroundPalette. It appears that the input label is associated with the third option in the palette:

$mdThemingProvider.theme('alt').foregroundPalette[3] = 'rgb(96, 125, 139)';

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

Designing a dropdown menu within displaytag

I am currently utilizing displaytag to present tabular data, but I aspire to design a user interface akin to "kayak.com" where clicking on a row reveals additional details without refreshing the page. Here is an example scenario before clicking the Detail ...

What's up with Google, indexing content generated on page load?

When I checked my website's listing on Google's results page, I noticed that the content displayed below the link is only generated during the onload function. This surprised me because I had believed that Google doesn't index JS-generated c ...

Is there a way to incorporate an animated element within the track of my circular progress bar?

My circular progress bar features two paths, with one path increasing in length as data is received, eventually turning the entire circle red. Here is the SVG HTML code: <path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" ...

Automatically include JavaScript and CSS files in your Ionic projects

I am interested in streamlining the process of injecting new js/css files into my ionic project. After coming across an informative article on gulp inject, I learned how to achieve this with my own js/css files stored in specific folders. However, when I ...

Attempting to showcase the quantity of rows

I am attempting to show the count of rows in a column within an HTML card by using EJS for data insertion. Below is the code I am using for data insertion: app.get('/home', async (req, res) => { const result = await db.query('SELECT CO ...

When properties remain unchanged, they do not hold the same value in a Firestore-triggered Cloud Function

Within my Firestore database, there is a collection named events consisting of documents with attributes such as begin, end, and title. The function in question is triggered when any changes occur within a document. The begin and end fields are both categ ...

You cannot add properties to an object within an async function

I am attempting to include a fileUrl property in the order object within an async function, but I am unable to make it work properly. My expectation is for the order object to contain a fileUrl property once added, but unfortunately, it does not seem to b ...

Interfacing shared memory between a C++ and JavaScript program

Is it feasible to have shared memory that both a C++ program and a JavaScript program can access simultaneously? The goal is for the C++ program to write to memory while the JS program reads from the same location. ...

The CSS Grid container fails to resize based on the content inside

I am facing an issue with the grid element inside a parent container with display: grid;. The parent container has a maximum size and allows scrolling for the grid if necessary. The problem is that the grid element does not expand to fit its children. Whe ...

Troubleshooting problem with Zscaler and Ajax communication

When making an AJAX call on my website, everything runs smoothly except for when it is accessed behind a Zscaler proxy. In that case, the browser throws a CORS error: "No 'Access-Control-Allow-Origin' header is present on the requested resource. ...

What is the best way to pass a variable between different routing functions?

I am currently developing a server-side parser for an API. Each GET request made to my website must first initiate a request to the API, and since this request is always the same, I would like to encapsulate it within its own function. What is the best wa ...

Unusual happenings detected in Magellan Fixed with Foundation 5

I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...

I'm currently learning about things that never change and struggling to grasp their meaning

I'm currently delving into the world of immutable.js record and trying to wrap my head around it. However, this particular piece of code is really throwing me for a loop. Here's my Question: I understand [import, export,const], but what ex ...

No options displayed in AngularJS select2 dropdown

I have implemented select2 in my code following the instructions provided at https://github.com/angular-ui/ui-select2 <div ng-controller="sampleController> <select ui-select2 ng-model="select2" data-placeholder="Pick a number"> < ...

Using a React button to sort through an array

Hey there, I'm currently working on an app that filters a list based on user input. The idea is to click on buttons to exclude users with specific letters in their names. However, the code I have right now isn't functioning properly. Any assistan ...

Displaying information in a drop-down list based on the selection made in a previous drop

Hey fellow developers, I could really use your expertise on a project I'm working on for attendance management. I've hit a roadblock with a specific feature - my goal is to dynamically display departments based on the selected block without requi ...

Encountering a "map is not a function" error in REACT following the use of the push method

After pushing an element to an array in a function (event), I encountered the following error: handleAddList(s) { this.setState({lists :this.state.lists.push(s)}); console.log(this.state.lists); } The error message says "lists.map is not a function. ...

Placement of text is incorrect on certain react cards

I have an application that retrieves videos and generates a card for each video, displaying the video title, creator, link, download option, views, and upload date on each card. Fetching and displaying these elements works well, for the most part. However ...

Utilize the directive method within the transcluded content by making a call

Trying to call a method within a directive from transcluded content. The structure of my HTML is: <typeahead class="typeahead" model="customers" filtered-model="customersfiltered" ng-model="selectedcustomer"> <ul> <li ng-click="select ...

What is the fastest way to invoke the driver.quit() method in Selenium?

Is there a way to force close the browser immediately instead of waiting for it to complete loading before calling driver.quit()? ...