im creating a vue app.
At the moment I have a light.scss and a dark.scss and decide in the build process which one I use.
But I want to toggle the dark mode directly in my app.
Im using a css theme and until now I could write:
light.scss
$header-bar-color: null;
dark.scss
$header-bar-color: black;
The light variant took the default value from my css theme.
Now I want to use only one main.scss with custom properties.
Therefore I have a light.scss with:
--header-bar-color: null
and a dark.scss with:
--header-bar-color: black
and in my main.scss I write:
$header-bar-color: var(--header-bar-color)
My Problem is that the null value from the light theme don't fallback to my default css theme. Is it possible to achieve this?
Related
I need to customize the color of the label for the Input field ( ant design ). but i couldn't change the color of it.
Inside the yellow box is the CSS I have added to the code but when I run and inspect the code (inside the red box) there is two .ant-form-item-label > label is there, the issue is the one I have added (inside the yellow box) is not working, other one (i think its the default one) is overwriting the one which I have written. how to overcome this
Hard to judge as no one will know how the project is set up. The correct way to overcome this is by checking the order of your scss imports, if your default login scss styles are located below your LoginStyles.scss then they will overwrite any of your sass styles. Simply move, shift your imports so that LoginStyles.scss is below defaults.scss i.e
#import 'default.scss';
#import 'LoginStyles.scss';
A dirty way to fix the issue is by assigning !important on your color but I would try getting your import order correct first as this stops messy conflicts
You can add !important rule. And there is no definition of that color in the files? The default label appearance can also be changed.
I'm trying to implement a dark and light theme using bulma. The approach I was thinking of is to assign classes to elements dynamically using vue (e.g .dark-theme or .light-theme) and then use different colours depending on those themes. However, customising the bulma variables based on class selectors in main.scss doesn't seem to be working, for example:
.dark-theme {
$primary: /* some colour; */
}
.light-theme {
$primary: /* some other colour; */
}
#import "~bulma/bulma"
The closest question I could find was this one but the solution does not work for me as I need to modify the actual $ variables based on class selectors.
If my approach is stupid and there is a better one please let me know. Note that my bulma setup appears to be working correctly, and changing the variable outside of selectors works as expected.
You could compile two css files from the bulma scss files, one for dark mode & one for light mode. Then if dark mode is enabled just reload the page with the dark css file or use the method in the first comment to change theme without reloading.
Here it suggests swapping the $scheme-main & $scheme-invert values to generate a dark mode.
I do not have experience with Vue but I know that it would be possible to implement this in JavaScript.
I've followed the examples in the docs and still cannot seem to get my custom theme to work. All I want to do is change the app background in the dark theme to something that isn't as...green. I removed CLR on my angular.json and imported it on styles.scss along with my custom theme sheet. The custom theme just has a root adjustment using CSS custom property of
:root {
--clr-global-app-background: hsl(226, 30%, 14%);
}
I get a flash of my preferred background before the page fully renders and then it goes back to the default greenish grey default.
I am using Angular-material-6. I am using an angular-material stylesheet and my own custom less stylesheet as a master stylesheet. I have a select box in header which shows theme color name like Red, Green, Blue etc. Now my task is to change a less variable as per user choice theme.
for example, by default my application primary color is red and if a user changes it to blue from header select box then it will automatically change my primary variable color to red.
I tried simple way solution like CSS switching from index.html using javascript but I am not sure how to do it with less and less variables.
Thanks in advance.
Less can compile at run-time and is one of the few CSS processors (If not the only one) that can do this and modify CSS vars programmatically at run time.
Check out this SO post: How to use less in Angular component without CLI
Less is a CSS preprocessor which means that it produces CSS at compile-time, not runtime. Therefore you can't do what you are aiming to do.
You can have a look at css variables if you want to dynamically override it. You can also use a CSS in JS or make smart use of the CSS cascading model.
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