Change primaryPalette color of Angular MD dynamically - javascript

I have the following module config for my Angular MD theme.
.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette(color).accentPalette('orange');
}]);
I want to be able to change the primaryPalette dynamically using the variable color (I want to use a themechanger on my site). However I can't seem to access the config section at runtime, and I also am not able to use the $mdThemingProvider anywhere out of the config section. Any ideas how to solve this?
https://material.angularjs.org/#/Theming/03_configuring_a_theme

Related

How do I use different CSS reset stylesheets through CRA?

There is a section in create-react-app about adding a css reset.
From what I understand, CRA includes PostCSS Normalize as a dependency, and all you need to do is create a css file and add #import-normalize; to it, and you will have normalize.css. (By the way, my editor gives me "Unknown CSS at-rule" with this #import-normalize).
What I want is a reset that includes having the margin on body be zero. I can't even tell if the reset is being applied just by looking at my app. I just want to make sure: this setting is not actually included in the normalize.css that is included by following the instructions?
Also, where can I find an explanation of what #import-normalize means? I haven't seen this syntax before.
Finally, is there a way through CRA to use a different reset file, or should I just install another one and import it as usually done?
Here is a bit of background on normalize.css
http://nicolasgallagher.com/about-normalize-css/
With CRA you can normalize/reset CSS with any method you like. You just need to create a stylesheet with the reset/normalized CSS rules in it and import it into App. i.e import './myCustomReset.css
or you can also add the reset CSS file to the public folder, and add it as a link tag to your index.html. i.e <link rel="stylesheet" href="./customResetStyles.css">
I tend to use https://gist.github.com/DavidWells/18e73022e723037a50d6 whenever I need to reset styles instead of just normalizing.

How to make changes to the style of the elements that make up a node module component?

I npm installed 'react-select' to my meteor-react project and I was trying to make style changes to the internal elements of the "Select" component from the package. I was able to make style changes in the Developer Options of the browser, but not able to find the source stylesheet to make the changes in.
Where can I find the stylesheets in the node module/package?
How do I make style changes to a node module/package?
react-select adds style to element using JavaScript. That's why we can not see any css/less/scss files in node_modules->react-select folder.
It is not the rule but recommendation that, don't ever try to alter the default style provided, instead override them.
My suggestion is override the style in your custom css files using the class-name/id of the element.

Angular 5 apply stylesheets programmatically

Is there a way to apply SASS stylesheets to an Angular 5 project conditionally.
For example, in my app.component.ts file I can set a variable theme = blue or theme = green and somehow tell Angular to use a different color scheme for the application?
I have been trying to figure out a way to do this for a long time. Does anyone have any ideas? Currently, I set the stylesheets in the Angular Cli config.

Magnolia 5.5.5 Custom Content Editor App (Stories) Custom CKEditor Config

I have got the following problem:
I want to add a customConfig to the ckeditor of the RichTextBlock.
Therefore I want to overwrite the content_editor_config.js which is a static final in TextBlockWidget.java. How can I do this?
I can see two options:
Extend the class and change the references to the new one (don't forget to compile the widgetset since it's client side code)
Directly modify the content_editor_config.js file which seems to be the easier option if you want to modify all TextBlocks
Hope that helps,
Cheers,

How to customize Nihilo.css?

One of the available themes in Dijit is Nihilo. I am using dijit/layout/.. for displaying some charts and graphs . I want to change some of the styles being used. Can any one tell me how to customize Nihilo.css and use the customized version?
Don't change nihilo.css, create another CSS file and put the link tag for the second file after the link tag for nihilo.css.
This way, if you upgrade Dojo, you will not have to merge your changes back in.
If you need to customize nihilo, I would suggest to have a look at this official guide Customizing a Theme.
Basically the idea is to build your theme, based on nihilo leaving the original nihilo untouched,.

Categories

Resources