Customizing MaterializeCSS Theme Colors with Sass: A Step‑by‑Step Build‑Pipeline Guide

Problem & Desired Outcome

MaterializeCSS ships with a default teal‑centric palette that may not match your brand. You need a consistent, maintainable way to change primary/secondary colors, typography, and grid breakpoints without editing the framework’s source files.

Prerequisites

• Node.js 18+ and npm installed.
• Basic familiarity with Sass/SCSS.
• Choice of bundler (Webpack, Vite, esbuild) or a simple sass CLI setup.
• MaterializeCSS 1.0.0 (latest 2018 release).

Step 1: Project Setup

mkdir my-materialize-app
cd my-materialize-app
npm init -y
npm i materialize-css@1.0.0 sass

In the project root, create a folder src/styles and add the following files.

_custom-variables.scss

// 1️⃣ Import Materialize’s default variable definitions first
@import 'materialize-css/scss/components/_variables.scss';

// 2️⃣ Override the variables you care about
$primary-color: #1a73e8; // brand blue
$secondary-color: #e91e63; // brand pink
$font-family: 'Roboto', sans-serif;

// 3️⃣ Adjust grid breakpoints if needed
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

materialize-custom.scss

// 4️⃣ Import the custom variables file *before* Materialize’s core
@import 'src/styles/_custom-variables.scss';

// 5️⃣ Finally import the full framework
@import 'materialize-css/scss/materialize.scss';

Note the import order: all overrides must precede the core import because Materialize declares variables with !default.

Step 2: Build Integration

Below is a minimal webpack.config.js example that processes SCSS with sass-loader.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: { sassOptions: { includePaths: ['node_modules'] } },
          },
        ],
      },
    ],
  },
};

In src/index.js, simply import the compiled CSS:

import './styles/materialize-custom.scss';
// Initialize JavaScript components
document.addEventListener('DOMContentLoaded', () => {
  M.AutoInit();
});

Step 3: Verify Visual Changes

1. Check Button Backgrounds
   • In a test HTML file, add <button class="btn btn-primary">Test</button>.
   • Open the page and ensure the button background matches $primary-color.
   • Inspect the generated CSS (Chrome DevTools) – the rule should be .btn-primary{background-color:#1a73e8}.
2. Confirm Grid Breakpoints
   • Resize the browser window.
   • At sm (< 540px) the container width should be 100%.
   • At md (≥ 720px) the container should cap at 720px.
3. Test Component Initialization
   • Add a dropdown markup: <ul class="dropdown-content" id="dropdown1"><li>Item</li></ul> <a class="dropdown-trigger btn" href="#" data-target="dropdown1">Open</a>.
   • On page load, confirm the dropdown opens on click without console errors.
4. Bundle Size Check
   • Run npm run build (or webpack --mode production).
   • Use size-limit or inspect dist/bundle.js size.
   • Compare with a baseline build that imports the unmodified materialize.scss.

Recovery & Rollback Options

• If the custom variables are not applied, double‑check that _custom-variables.scss is imported before materialize.scss.
• Ensure the bundler’s includePaths includes node_modules so the materialize-css path resolves.
• If a component still shows old colors, inspect the JS logic for hardcoded values (e.g., the date picker). In such cases, override via CSS or patch the component.
• To revert to defaults, delete _custom-variables.scss and remove its import from materialize-custom.scss.

Limitations & Caveats

• MaterializeCSS 1.0.0 is unmaintained; no security patches are released.
• Some components (autocomplete, date picker) hardcode colors in the JS; Sass overrides won’t affect them.
• The framework relies on ES6 features; older browsers (IE11) may require polyfills.
• Generating a full color palette via color-palette() can inflate CSS size; limit to used colors.

Conclusion

By placing variable overrides in a dedicated SCSS file and importing it before Materialize’s core, you can tailor the entire framework to your brand with minimal friction. The build pipeline stays clean, and JavaScript components remain functional because styling changes are isolated from behavior.