Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
is there a way to smooth out the transition dark/light mode with chakraUI (react js project), instead of instant change ?
Chakra UI intentionally made the switch happen instantly. During the switching, Chakra UI inserts transition: none!important to disable all the transitions.
See https://github.com/chakra-ui/chakra-ui/pull/5946
But If you really want some transitions, yes it can be done by some hacky ways. We can just do the same thing. Here is the example, click the Toggle button to see the transition: https://codesandbox.io/s/stack-overflow-chakra-ui-theme-transition-yl0ey3?file=/src/App.js
toggleColorMode();
const styleEl = document.createElement('style');
const cssText = document.createTextNode(
'html * { transition: color, background-color 0.3s ease-out!important }',
);
styleEl.appendChild(cssText);
document.head.appendChild(styleEl);
setTimeout(() => {
document.head.removeChild(styleEl);
}, 300);
The same as what Chakra UI does. We can temporarily insert the transition style, with !important as well, to override Chakra UI's style.
Related
I'm building Clarity 3 app (looking forward to upgrade it to Clarity 4 once it's out).
I don't care about old browsers.
I guess, I shouldn't use Clarity SCSS as it will be removed in v4
I want a simple way to switch between light and dark themes, which will:
not include manually copied Clarity CSS code in my files like this example from docs
smooth switching theme without glitches
every theme will have a small set of its css vars customized (with brand colors and fonts)
I've checked out few answers here, and this repository mentioned in Clarity docs, but none of them are compatible with my requirements.
Any suggestions?
You can use native css variables which you can then change via either css itself or javascript since you can address css attributes there. For a smooth switching, that is probably already given by mentioned approach, I would add a transition that is focused on the changed property:
.html
<html>
<div id="somediv0" className="theme"></div>
<div id="somediv1" className="theme"></div>
</html>
.css
:root {
--theme-attribute-0: black;
--theme-attribute-1: white;
}
.theme {
color: var(--theme-attribute-1);
background-color: var(--theme-attribute-0);
transition: all 1000ms ease;
}
.js
element.addEventListener('click', () => {
document.documentElement.style.setProperty('--theme-attribute-0', 'white');
document.documentElement.style.setProperty('--theme-attribute-1', 'black');
})
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
trying to get my head around sass/scss and variables.
I'm trying to have a different URL path to images based on a theme light/dark.
So I have this variable setup:
$icon-url: "/templates/default/images/network-icons/";
I then want to do something like this to have it inside each different icon used:
background-image: url($icon-url+"twitter.svg");
That doesn't work, can't quite get it right, got any pointers?
You can make it work like this:
// import
$icon-url: '/templates/default/images/network-icons/';
// declaration
.foo {
background-image: url('#{$icon-url}twitter.svg');
}
which results in compiled CSS:
.foo {
background-image: url("/templates/default/images/network-icons/twitter.svg");
}
The key here is the #{variable} which replaces the variable with the assigned value to the variable. Read more about interpolation in the Sass documentation.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I am using the Discy Wordpress theme.
What css code could I use to hide the share button and author's name from the post loop only.
Here is a screenshot of what I would like to hide
I'd recommend inspecting the elements you want to hide in your browser and add display: none to the class/id on those elements.
Ex. Say I want to hide the 'Your Answer' text here.
I would then add some CSS
h2.space {
display:none;
}
Edit:
Based on your needs there are a couple options:
Edit the templates used by Wordpress to exclude these elements on the necessary pages.
or
Insert some jQuery that will hide the elements on a specific page.
$(document).ready(function() {
if (window.location.href.indexOf("home") > -1) { // What the url contains on the page you don't want these elements to display
$( "h2.space" ).addClass( "hidden" );
}
}
Of course, this solution requires jQuery and a hidden CSS class defined, like:
.hidden {
display: none;
}
Some sort of class like that may already be defined in the Wordpress theme you're using.
Fiddle for this solution: https://jsfiddle.net/p6af32td/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have two css file for arbaic layout and english layout , so I want to conditionally change the styleurl in component . is possible or not
?
you cannot put a condition in the styleUrls attribute of the component, but instead, you can use something like that:
.some-class {
// your css style
}
// arabic css overrides
._ar {
.some-class {
direction: rtl;
}
}
<div class="parent" [class._ar]="your_condition">
<textarea class="some-class">
</textarea>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am wondering I can disuse global button css style property for one button which need to be
styled its own way. is there any way to disfunction button{} style in one button?
Yes you can! you can set an id or a class to the button that you want to style and write whatever style you want, e.g:
<button id='mybutton'>Click</button>
In you css file:
#mybutton { you style here... }
Create a new class and add it to your button.
<button class='button2'>Click</button>
Manually set all attributes within your css file.
.button2{ style here... }