Arav KT Arav KT - 9 months ago 51
HTML Question

How to change default theme color teal to blue without using custom CSS in materilaize

I'm working with materialize and I'm trying to not touch your code, so that I can just upgrade it when a new version arrives, but I want to change the primary color and I can't find an easy way to just switch the whole thing to say the blue palette.

I heard about sass but I don't know how to use it

This is my CSS and JS file how to reuse it

<link href="" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="sass/materialize.scss">
<script src="js/bin/materialize.min.js"></script>
<script type="text/javascript" src=""></script>

Answer Source

Using sass is very easy, install sass cli in your system

gem install sass

The base color you want to change was inside the below folder


  • Do the required changes
  • just run the below code in terminal

    sass materialize.scss materialize.css

RUN while you are inside the scss folder of the materialize-src


replace the newly created materialize.css file in your existing project.

You could even create a minified version of your new file by using and save file with name materialize.min.css

Fore more reference on sass please look into the following link SASS Simple DOC

UPDATE - as per request

Give me the color codes as per your requirement by replacing the below i will generate your file by the same procedure i have explained above.

$teal: (
  "base":       #009688,
  "lighten-5":  #e0f2f1,
  "lighten-4":  #b2dfdb,
  "lighten-3":  #80cbc4,
  "lighten-2":  #4db6ac,
  "lighten-1":  #26a69a,
  "darken-1":   #00897b,
  "darken-2":   #00796b,
  "darken-3":   #00695c,
  "darken-4":   #004d40,
  "accent-1":    #a7ffeb,
  "accent-2":    #64ffda,
  "accent-3":    #1de9b6,
  "accent-4":    #00bfa5