Is there any way to change material design theme colors just by button click?
Lets say I want my app to support personalization so every user can pick predefined theme color palette. Something similar to this: http://www.getmdl.io/customize/index.html. Is there any way to do that?
This Demo on MDL's website actually generates a brand new stylesheet whenever you pick two new colors for your theme. So you can generate different stylesheets for different themes. When the theme changed, you can remove the old style and dynamically add new style tag with the new styles in it.
Or if you use some library like react, you write your css in JS so you can change theme by change the css object in JS.
Related
I am working on a theme for the user dashboard. Styles are written with Sass (modules).
There is a default theme for all customers but some of the would have a custom theme. Custom theme would include different colors but also changes to padding and other attributes.
I am considering my options and I am not sure whether I should just create a stylesheet that would be imported in master.scss conditionality (e.g. if customThemeUser import style sheet with overwrites). If it was only colours that are changing I would just swap color variables but how to go about theming layout? Alternatively, should I create mixins that would conditionaly render different styles based on the theme? What would be the advantage of this (adding mixins across all dashboard) vs. stylesheet with overwrites? I am looking for a solution that could be easily maintainable.
Thanks
DNN 9.3.2 / 2sxc 10.25.2
I have a DNN theme that I use for a certain type of subportal - I will have 8 subportals ultimately. Each subportal has the same layout, but they will have different colours in their respective theme. So I will have to create a stylesheet with the CSS rules and the colours for each theme. I know there is a couple of relatively simple ways I can do this:
Modifying the portal.css of each portal to override the theme or (simple but might be hard to maintain updates)
Building a custom theme for each portal (overkill)
Using SCSS to create a template with 8 different variable files (works fine but doesn't allow modifications by the Content Editors)
So, I'm curious if there's a more clever way through 2sxc that makes it easy for not only me to maintain, but also my portal's Content Editors.
I want to create 2sxc Content module with a few different fields for colour pickers that will allow me (and my content editors) to simply open up the 2sxc edit modal (on the homepage), fill out all the colour fields, and then a razor template will output the CSS template with the colours to override the theme styles on the DNN skin. I know I can do this with inline CSS but that would mean the module would have to appear on every page, and I'd also prefer to avoid inline CSS.
So my idea is that it would work like this:
Have a 2sxc Content module on a single page on each portal
Edit modal > the fields would be something like: primary colour (rgba), secondary colour (rgba), grey colour (rgba), etc
Once save is clicked, the template modifies a portal-level theme.css file which is loaded by the skin
Any changes to the module would result in a rewrite of the CSS file.
I could update the c# razor template to add, remove, or modify rules or transform the values of the input.
Is this possible or is it too complicated? Is there a better way of going about this?
So I've been away for a long time, I hope my answer will still help...
We have a very simple solution :). If you check out bootstrap instant template you'll see that we add various classes to the <body> tag.
https://github.com/2sic/dnn-theme-bootstrap4-instant/blob/master/controls/body-css-classes.ascx#L86-L91
That way we can just use normal CSS of the theme with rules based on portal-27 etc. to vary by portal.
I am trying to pull out all of the common styles used throughout an application and storing them in a stylesheet and material ui theme file - this way I can update the base styling of all input fields for example in one place.
I am using the react-select element in a component as a dropdown for a country code picker, although I cannot seem to use material ui's useStyle/makeStyles feature to call the theme's styling within the custom react-select's styling block.
Does anyone have any idea of how to use mui theme elements within the react-selects custom styling block?
Since Angular uses view encapsulation is it possible to support multiple themes in Angular 2? I mean the user should be able to click on a button and change the color theming of the whole application.
PS: I am using Angular 4 with angular-cli with SASS support.
Currently I am able to generate static themes with a _variable.scss file which is imported in each component's sass based stylesheet.
But, my requirement is end user should be able to choose his own color theme.
Ideally in non-angular websites I would just add a new compiled css file to the <head> tag using javascript. Since shadow DOM generates separate style for each component and adds them in to the <head> how I change the style for each component dynamically?
you can try the css method var(), for more details can read this blog
Hye all
I was trying the free version of sencha API with GWT in base and stumbled upon on the issue of setting color to a button. I tried modifying all the CSS get deployed in the war and tried setting styles also but no luck there. So kindly at least suggest a approach.Thanks in advance.
regards
la_89ondevg
By "Sencha", I'll assume that you mean Ext GWT.
The default styling of buttons in Ext GWT comes from a sprite sheet in the resources folder that came with your download of Ext GWT. Specifically, look at resources/images/default/button/btn.gif. To change the colour of the button, you will have to edit this sprite sheet or create new images for the colour of button you would like to use.
If you are planning to make extensive changes to the style of widgets in Ext GWT, consider making your own theme. Themes are generally placed in resources/themes and can contain your own custom CSS and images. Just link your theme's style sheet in your host page and make sure your CSS rules override those in the default theme.
maybe what you're looking for: http://www.sencha.com/forum/showthread.php?97011-Change-style-for-GXT-button-component