We have done theme switching in the past. In Angular 1.5 we had 3 css files. The main layout file and 2 color css files. When user selected a theme we would apply the proper color css file to change the theme.
Now in Angular 2+ we are using sass and each component has its own styles. We cannot use the same approach of having a 'color' css file for each theme.
What is the approach in Angular 2+ for switching themes when each component has its own css file. I assume there is a way to tell each component to switch to a theme color selector? Any guidance is appreciated, thank-you
You probably want to do Sass mixins based on the current theme. Look at how material theming works.
At the root of your project, you can have a theming.scss file which uses mixins to set up different themes based on a class. You can then easily change the theme by changing the class.
Related
I'm having a lot of trouble with a few of the SASS theming components. I'll start with the one providing me the most annoyance... I've written a BUNCH of custom themes for EXTjs 4.x, and haven't had these issues, but theming 5.x is proving to be a bit buggy/different. I'm not sure if I'm just not using the proper sass variables, or what... please help!
TAB
I've extended a theme from the 'ext-theme-gray' package. I'm simply trying to change the text color of the tab title, but these sass variables don't seem to change the color properly. The 'ext-theme-gray' has a text color of #333.
I add these sass values, and build my theme:
Code:
$tab-color: #c8c8c8 !default;
$tab-color-active: #c8c8c8 !default;
$tab-color-over: #c8c8c8 !default;
$tab-color-disabled: #c8c8c8 !default;
No change to the ACTIVE tab only. For some reason, the active tab is still using the ext-theme-gray css, and overwriting my theme (screenshot below):
What am I doing wrong?!
ref: link to duplicate sencha forum post here
Why are you including both your theme's CSS and the ExtJS theme? Your theme will have all of the relevant CSS, based on detection by ExtJS about what classes you use.
Your style is being overridden by the more specific style in the extjs theme. If you need both (and I don't think you do), you'll need to mark your styles as !important, not !default
On creating a custom theme i faced one problem http://templategraphy.com/wp-demo/landro/
lookwise its not look so good because it not supported style.css By default it shows all its css properties from bootstrap.min.css.
I want theme look good like this html http://templategraphy.com/demo/landro/ what should i do so that theme take all its css properties from style.css.
Thanks in advance
you first need to link bootstrap.css and then your style.css
cause in css order is important for cascading.
all custom styles or created by you comes last.
The theme.less file that comes with tablesorter seems to be for the non-bootstrap themes - is there a .less file that was used to create the bootstrap theme in table sorter? Having some difficulty recreating a bootstrap css with different color schemes. In particular, I need the white icons that would be used for a dark theme, for example for the .unsorted icon.
I just modified the basic theme.less theme to work with Bootstrap.
Check out the demo here.. so for now, copy the less code from that demo. I'll add the actual file in the next update.
I've created child themes before using the same method, but for some reason with Bootstrap3 themes (I've tried multiple) I can't override the CSS. I'm currently using this Flatty theme.
I'm thinking maybe the trouble comes from the fact that there is a style.css in the parent but the styles I'm attempting to change are in a css folder in a file called main.css. I've tried duplicating this folder and file as well, but no luck. I've also tried just putting the classes I want to change in my child style.css.
Any help would be greatly appreciated!
Your CSS file needs to load after Bootstrap's CSS file. That way, your styles with the same name as Bootstrap's styles will take precedence.
I'm new to drupal and i was trying to do several common css tasks, like changing color background, links color etc. I guess i have not understood where the drupal css are. I tried to modify style.css in the folder my-site-name/sites/all/themes/mythemename/, which seems to be the main css, but it seems to have no effect on the site, even using the directive "!important".
So, where's the drupal 7 main css?
There is no "Main CSS". Drupal core uses some CSS files. Each module its own CSS. Then each theme overrides CSS using its own css files. You can have as much css files as you like in your theme and with any acceptable name.
Probably you have to clear the caches to see the results. If not, check the css styles with Firebug to see what is happening. This way, also, you can see what css files apply styles for each page/element.