Is there a simple custom CSS for making all icons follow a certain theme color? I have seen the post for editing each icon individually but I am looking for a master one.
Yes, using CSS it's possible. Either give them all the same class which contains your custom styles or refer all the icons using their common ancestors.
Let's assume you have all icons inside an element of class element then you can define all the custom css for icons like:
.element i.fa{
/* Your custom styles */
}
Change i.fa to the concerned element if you have icons on different element other than i . Hope this helps.
Often templates, like those used for Bootstrap, have separate CSS files for different color themes.
These are merely overrides over the default colors.
blue.css, green.css, etc.
You could extend Kamlesh's answer by centralizing your color properties in a separate stylesheet that allows for abstraction of the "theme."
blue.css Example:
i.fa {
color: #0c9;
}
.inverse i.fa {
color: white;
}
Related
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
I have two components with tab groups in them. One is a main page and I have overwritten the css to make the labels larger, done using ViewEncapsulation.None. The other is a dialog, and I want to keep it small but still apply some other custom styles to it.
When I open the dialog after visiting the other tabs page, it copies all the styles, which I have figured is because ViewEncapsulation.None bleeds CSS but not exactly as expected.
Is there anyway to override Angular Material styles without changing ViewEncapsulation so that I can keep the two components separate?
Solution 1: you can put all elements of your component into a parent element with a css class and override the material style into it.(it's custom capsulation)
Note: ViewEncapsulation is none here.
component.html
<div class="my-component__container">
<!-- other elements(material) are here -->
</div>
component.scss
.my-component__container{
// override material styles here
.mat-form-field{...}
}
Solution 2: use /deep/(deprecated).(use ::ng-depp insteaded)
:host /deep/ .mat-form-field {
text-align: left !important;
}
Solution 3: don't change ViewEncapsulation , then:
:host {
.my-component__container{}
}
if you would like to customise your Angular material components and provide your own stylings, I have the following suggestions. You may use one of them.
1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration.
For instance,
.mat-form-field-label {
color:blue!important;
}
2) Customising the various Angular Material directive (such as MatPlaceholder) by providing a custom class.
For instance, when we use the MatPlaceHolder, and on the component.html template,
<mat-placeholder class="placeholder">Search</mat-placeholder>
On your component.css, we can then supply the css properties to the placehodler class
.placeholder {
color: green
}
Note:
Alternatively you may use ::ng-deep, but I would strongly suggest using ::ng-deep as it will soon be deprecated.
::ng-deep .mat-dialog {
/* styles here */
/* try not to use ::ng-deep */
}
You can use ::ng-deep. Refer NgDeep
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
I want to override my label color so redfined it one of the css in application using .gwt-label class. However at one specific location in the application, I need a different color. So I did the overriding the css style class in the UI binder of that class using #external
<ui:style field='otherStyle'>
#external .gwt-Label;
.gwt-Label { color: #fff; }
</ui:style>
It works fine but the moment I access this page in the browser, all the labels style take the effect of above style.
Any clue would be helpful.
Thanks in advance
I recommend you use a different style name, and add it to all of the elements you want to be a different color. You can't selectively choose which version of a single css class to use on different elements.