How do I change the top-app-bar fill color in Google's Material Design?

1
votes

I am using Google's Material Design as a good UI design tool to help me create a web app for personal programming experience. I want to know how I can change the Top App Bar color with Sass. I can't figure out the documentation.

Here is the link to the documentation: https://material.io/develop/web/components/top-app-bar/

Basically, I want to change it to a hex color of anything. Here is my current code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Chat App</title>
        <link rel="stylesheet" href="styles.scss" type="text/scss">
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    <body>
        <header class="mdc-top-app-bar mdc-top-app-bar--short blue-bar">
            <div class="mdc-top-app-bar__row">
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
                    <span class="mdc-top-app-bar__title">Title</span>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
                    <a href="#" class="material-icons mdc-top-app-bar__action-item">settings</a>
                    <a href="#" class="material-icons mdc-top-app-bar__action-item">account_circle</a>
                </section>
            </div>
        </header>
        <p>
            Nothing to see here.
        </p>
    </body>
</html>

SCSS FILE

$base-color: #AD141E;
.blue-bar { @include mdc-top-app-bar-fill-color($base-color); }

I named the class .blue-bar just cause I felt like blue. It doesn't have to be blue. I just want to know how to change the default purple color of the bar.

EDIT:

I just realized that you have to actually convert the scss file to css before you can use it. My new question is: Since I am using Google's Material Design CSS, how do I use Sass to edit that and change the color?

2
htmlsassmaterial-design
Post the working version of your code in question on Stackblitz so that people can see the problem clearly and act on it. - Ashokan Sivapragasam

2 Answers

0
votes

Note that your $base-color is actually a red color. Use .blue-bar { @include mdc-top-app-bar-fill-color(#0000ff); } or any other blue color instead

For information about compiling scss to css read the Quick start guide. This makes using the unpkg unnecessary. Basically you want to set up webpack to bundle your scss files to a single css file. Note that in webpack.config.js you have 2 output paths.

module.exports = [{
  entry: './app.scss',
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              //This is where you specify the output for your bundled css file.
              //outputPath specifies where the file is stored (i'm doing this from my head so unsure about pathing)
              //Name is the filename.
              outputPath: './css'
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ]
      }
    ]
  },
}];
0
votes

Change MDC top-app-bar fill-color

@use "@material/top-app-bar"; // namespace top-app-bar contains fill-color mixin
@use "@material/top-app-bar/mdc-top-app-bar"; // contains CSS classes

.mdc-top-app-bar {
  // fill-color($color) is defined in the top-app-bar namespace
  @include top-app-bar.fill-color(#29E);
}

Compile MDC for web

For those who are not building a nodejs app or using a packer...

Get @material source, for example :

  • Install npm
  • Install mdc : npm i material-components-web
  • Work with your copy of node_modules/@material

Use dart-sass to compile your SCSS to CSS :

Use esbuild to compile your javascript code :

  • Install the binary ( Other installation methods (click to expand)): https://github.com/evanw/esbuild
  • Compile JS : esbuild --bundle --minify input.js --outfile=bundle.js

Unfortunately esbuild doesn't provide a path parameter and the node_modules directory must be available in your js files parent directory.