Arav KT Arav KT - 1 month ago 7
CSS Question

How to change default theme color teal to blue without using custonm css in materilaize

Hi 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 dont know how to use it

This is my css and js file how to reuse it

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer

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

materialize-src/sass/components/_color.scss

  • 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

materialize-src/sass/

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

You could even create a minified version of your new file by using https://cssminifier.com/ 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
);