Its been 2 whole days i can't find any solutions.I have no solutions yets:( I'm having color states. I'll select from color picker a color, I'll update that particular color state:
Requirement is if I pick from color picker it must be passed from react js property or variables to scss variable n override them. it must be done via reacrjs to scss if it can be done from js to css then it can be done from reacr js to scss whats that one thing which m missing on it.
App.js
{
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
}
ex: primary: '#1976D2' I'll pick in update to primary: '#ffffff' something like:
App.js
changeColor(e){
this.setState({primary:e.target.value}) // the value is updated to #ffffff
}
Now, I need to pass this.props.primary to .scss something like:
variables.scss
$primary:this.props.primary
login.scss
.btn{
background-color:$primary
}
my need is it must be dynamic if i pick from color picker it must be passed from react js property or variables to scss variable n override them
We can do it inline styling but I wanna do it the way defined above (via .scss).
Is it possible?or is the any better way?
something like this
https://vuetifyjs.com/en/style/theme
vuejs uses theme thats overides to scss variables
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
}
})
can anyone please explain me how they r doing I'm not understanding
First. Just to clarify. You are not able to change SASS variables from browser. Because how it works: SASS code -> compiled into CSS -> CSS is sent from server to browser -> . So we actually should searching "how to override by JS something that was SASS variable in consistent way".
The only way I see doing that is using CSS custom properties. Take a look into spec to understand their caveats(e.g. it cannot be used as part of size value in #media) and about support in browsers.
I'm not really sure if SASS supports compiling variables into CSS custom properties. Take a look into css-vars mixin. With using
$css-vars-use-native: true;
you will get your variables exported as CSS custom properties. Unfortunately it means you need to change you existing styles to use var() from mixin for variables you want being able to override later
Then your code will be able to override any of custom properties as easy as
document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)
Take a look into fine and short article on how to change custom properties with JS
NB since custom properties uses the same cascade approach as any CSS you additional get ability to apply changed value on any part of DOM:
document.querySelector('#previewBlock').style.setProperty(....);
I would use Styled Components instead. There you can pass your styling by props
https://www.styled-components.com/docs/advanced
Related
Certain styles in my project are not applying correctly. The easiest example to illustrate is mt-5 which according to the docs should be 1.25rem, but instead, my project shows as 3rem.
I've tried going to my tailwind.config.js and adding important: true to it and it does work! But I'm wondering if there's another way to fix this.
According to TailwindCSS Docs, you can specify color mode by document.body.addClass('dark') and use it on your CSS classnames like dark:text-blue-500.
But there is no option for adding new color modes, i want something like evening, midnight. Any ideas how to implement different color modes without going too much into it?
The most logical way i can think is create a ColorModeContext and export my components according to context but it is kinda hardcoded.
Tailwind 3.1 now includes arbitrary variants which, along with the addVariant plugin, can be used to create custom color modes. Using the css * selector, you can apply a class like evening to an element, and all its children will have apply evening: ... styles.
tailwind.config.js
let plugin = require("tailwindcss/plugin")
module.exports = {
// ...
plugins: [
plugin(function ({ addVariant }) {
addVariant('evening', '.evening *')
addVariant('midnight', '.midnight *')
})
]
}
pages/[some-page].jsx
<div className="evening">
<div className="text-blue-300 evening:text-blue-500"></div>
</div>
I have tried to to that using this line of code but it doesn't work
#import url("Javascriptfile.js");
and <script type="text/javascript" src="Script.js">
these two ways doesn't work.
in js file I have
export const PrimaryColor = "#4267B2";
and I want to import it in my css file how can i do it?
I do not believe this is possible in any way.
You can manipulate CSS with JavaScript to a certain extent, but it is mostly done through DOM manipulation (acting on class names) or generating CSS programmatically (but it is still CSS in the end).
I don't think it is ever possible to access "JavaScript world" from the scope of CSS.
However, if you want to use variable names in CSS to reference constants, like colors, sizes, etc., you can use the CSS custom properties feature : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
I want to override vuetify variables with custom colors by following this
I've created a stylus folder which contains base folder (_colors, _typography) and main.styl file. The _color file is imported into main.styl file, which the latter is imported into main.js
Here is my file structure:
And the imports are included in main.js:
import '../node_modules/vuetify/dist/vuetify.min.css'
import './assets/stylus/main.styl'
Inside the _color.styl, I have this test code:
$red = {
"base": #FF0000,
"darken-1": #e50000,
"darken-2": #990000,
"darken-3": #7f0000,
"darken-4": #000000,
}
The custom colors aren't showing...am I missing something here?
As #webdevdani mentionned it, I don't think overriding vuetify style is possible.
I propose you a workaround : use a theme.
In your main.js you can set colors, like this :
Vue.use(Vuetify, {
theme: {
primary: '#FFA726',
secondary: '#29B6F6',
anyColor: '#0000'
}})
And you'll be able to call it like this in any of your app's component :
color="primary"
or
color="anyColor"
Source and more info about Vuetify theme
You need to declare the variables before importing Vuetify. Switching the order of imports should work, assuming that main.styl imports your modified _color.styl.
Quote from the documentation:
Now that stylus is configured, you can set default values for the stylus variables that you wish to change. These must be declared before the import and will automatically override the Vuetify defaults.
You can see all the variables you can change in here.
This question already has answers here:
How to control Sass Variable with javascript
(9 answers)
Closed 6 years ago.
Basically I want to use background color for each element as per user choice, user choice will be stored on database. User should webpage according to it's color profile. So, I need a idea to get that value from angular and store its value on scss variable and render it.
SCSS is a preprocessor, when you use SCSS it actually gets compiled into CSS and that's what you use.
Perhaps the best solution is to use ngStyle in the section you need.. body, div, or anywhere you want..
Example
<div ng-style="userStyle">
...
</div>
In your JS
$scope.userInfo = { backgroundColor: 'red' };
$scope.userStyle = {'background-color': $scope.userInfo.backgroundColor};
Assuming you have a userInfo object, with backgroundColor property.
This is not possible, angular is javascript code and runs in the clients browser, sass is pre-compiled to css, any variables will have been converted into the full values before it is rendered in the browser.
You would need to get angular to make a call to your server, and have the server generate a CSS file dynamically based on the value provided from angular. (I suppose you could do this on the client also, I'm sure there is a javascript library somewhere that lets you compile sass)
Scss compiled to css before build, so angular part can't control scss. You can use gulp/grunt to edit scss variables. But in your case it not helping.
The simple sulotion for you is to use ng-style.
<div ng-style="{'background-color': scopeUserColor}"><div\>