How do I change the top-app-bar fill color in Google's Material Design?Coloring Buttons in Android with Material Design and AppCompatHow to change the color of header bar and address bar in newest Chrome version on Lollipop?Cannot display HTML stringhow to change the color of the toolbar and status bar colors according to image color in android material design?Adding MDC SASS files to angular 4 projectUsing mixins in material-ui to customize components in ReactMaterial Design Component Text Field's Label Does Not Float To Top LeftNot found or unreadable Material Design Sass Styles in Web AppHow to set primary and secondary colors in Material Design Components for Web?Theme colors Material Design vs Angular Material
Should I self-publish my novella on Amazon or try my luck getting publishers?
How does The Fools Guild make its money?
Non-OR journals which regularly publish OR research
Improving software when the author can see no need for improvement
Team goes to lunch frequently, I do intermittent fasting but still want to socialize
Double blind peer review when paper cites author's GitHub repo for code
Why are physicists so interested in irreps if in their non-block-diagonal form they mix all components of a vector?
Could one become a successful researcher by writing some really good papers while being outside academia?
How to write "upright" integrals with automatic sizing
Is there a way to create a report for the failed entries while calling REST API
In a topological space if there exists a loop that cannot be contracted to a point does there exist a simple loop that cannot be contracted also?
Pretty heat maps
Is it really ~648.69 km/s delta-v to "land" on the surface of the Sun?
Pandas: fill one column with count of # of obs between occurrences in a 2nd column
Is there a loss of quality when converting RGB to HEX?
What is the best way to cause swarm intelligence to be destroyed?
Can a character who casts Shapechange and turns into a spellcaster use innate spellcasting to cast spells with a long casting time?
Why does Intel's Haswell chip allow multiplication to be twice as fast as addition?
How to display a duet in lyrics?
Is this cheap "air conditioner" able to cool a room?
English - Acceptable use of parentheses in an author's name
Did WWII Japanese soldiers engage in cannibalism of their enemies?
How to say "fit" in Latin?
Replace data between quotes in a file
How do I change the top-app-bar fill color in Google's Material Design?
Coloring Buttons in Android with Material Design and AppCompatHow to change the color of header bar and address bar in newest Chrome version on Lollipop?Cannot display HTML stringhow to change the color of the toolbar and status bar colors according to image color in android material design?Adding MDC SASS files to angular 4 projectUsing mixins in material-ui to customize components in ReactMaterial Design Component Text Field's Label Does Not Float To Top LeftNot found or unreadable Material Design Sass Styles in Web AppHow to set primary and secondary colors in Material Design Components for Web?Theme colors Material Design vs Angular Material
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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?
html sass material-design
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
add a comment |
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?
html sass material-design
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
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
Mar 26 at 3:21
add a comment |
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?
html sass material-design
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
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?
html sass material-design
html sass material-design
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
edited Mar 26 at 1:03
Tommy Shoemaker
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
asked Mar 26 at 0:45
Tommy ShoemakerTommy Shoemaker
11 bronze badge
11 bronze badge
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
Mar 26 at 3:21
add a comment |
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
Mar 26 at 3:21
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
Mar 26 at 3:21
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
Mar 26 at 3:21
add a comment |
1 Answer
1
active
oldest
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' ,
]
]
,
];
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55348339%2fhow-do-i-change-the-top-app-bar-fill-color-in-googles-material-design%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
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' ,
]
]
,
];
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
add a comment |
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' ,
]
]
,
];
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
add a comment |
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' ,
]
]
,
];
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
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' ,
]
]
,
];
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
answered Mar 27 at 6:52
Jelmer BeerlingJelmer Beerling
525 bronze badges
525 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55348339%2fhow-do-i-change-the-top-app-bar-fill-color-in-googles-material-design%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
Mar 26 at 3:21