Kevin Powell - Community•2y ago

css animation with css variable

Hey everyone, I have this dark mode /light mode theme going on with css variables declared within :root{} and I have two icons, the sun and the moon. In light mode, the moon shows up and in dark mode, the sun shows up. When you click on it, it changes the theme of the website here is a little clip

7 Replies

NazCodelandOP•2y ago

I have

:root{  
  --svg-angle: 0deg;
}

:root{  
  --svg-angle: 0deg;
}

[color-scheme='dark'] {
  --main-background: var(--body-background-dark);
  --svg-angle: 0deg;
}

[color-scheme='light'] {
  --main-background: var(--body-background-light);
  --svg-angle: -90deg;
}

[color-scheme='dark'] {
  --main-background: var(--body-background-dark);
  --svg-angle: 0deg;
}

[color-scheme='light'] {
  --main-background: var(--body-background-light);
  --svg-angle: -90deg;
}

.night-svg {
  transform: rotate(calc(var(--svg-angle) * -1));
}

.night-svg {
  transform: rotate(calc(var(--svg-angle) * -1));
}

when the site is in light mode --svg-angle: -90deg is making transform: rotate(calc(var(--svg-angle) * -1)); result into +90deg as expected what I wanted was when the site is in light mode for the sun to go -90degs and for the moon to have 0deg and when the site is in dark mode, for the sun to have 0deg and the moon +90deg

NazCodelandOP•2y ago

This is the result when I use two css variables

:root{
  /* making the assumption the user prefers light mode */
  --day-svg-angle: -90deg;
  --night-svg-angle: 0deg;
}

:root{
  /* making the assumption the user prefers light mode */
  --day-svg-angle: -90deg;
  --night-svg-angle: 0deg;
}

[color-scheme='dark'] {
  --main-background: var(--body-background-dark);
  --day-svg-angle: 0deg;
  --night-svg-angle: 90deg;
}

[color-scheme='light'] {
  --main-background: var(--body-background-light);
}

[color-scheme='dark'] {
  --main-background: var(--body-background-dark);
  --day-svg-angle: 0deg;
  --night-svg-angle: 90deg;
}

[color-scheme='light'] {
  --main-background: var(--body-background-light);
}

.day-svg {
  transform: rotate(var(--day-svg-angle));
}

.night-svg {
  transform: rotate(var(--night-svg-angle));
}

.day-svg {
  transform: rotate(var(--day-svg-angle));
}

.night-svg {
  transform: rotate(var(--night-svg-angle));
}

its not a big deal on it's own but with a lot of other css variables it will eventually add up I feel like it can be implemented with 1 css variable, but I can't figure it out, any help would be appreciated

MarkBoots•2y ago

can you put it in a codepen, so we can play with it a bit

NazCodelandOP•2y ago

Hey, okay, I will try to make one @MarkBoots https://codepen.io/bbonsaye/pen/vYajGpv sorry for taking so long, I partially satisfied with what I had come up with but since I asked for help, I figure I provide you with what you asked for however, the js doesn't fully work because, it can't access the window.localStorage but if you look at my question, and the css part, you'll probably have enough information to know if what I was asking is possible ---------------------------------------------- another question, related to the same topic. Right now, I've got this:

NazCodelandOP•2y ago

NazCodelandOP•2y ago

the main background of the site transitions colors from white/dark with a duration of 2 seconds. At the same time, with the same duration, the background color of the icon container transitions colors from skyblue > dark now, I want to add a 3rd color to the background of the icon container. I want it to go from skyblue > orange/red > black I tried,

@keyframes colorChange {
0% {background-color:  skyblue;}
50% {background-color: red;}
100% {background-color: black}
}

@keyframes colorChange {
0% {background-color:  skyblue;}
50% {background-color: red;}
100% {background-color: black}
}

and it works when the page is initially loaded but I can't figure out how to rerun the animation when the user changes theme via their operating system

@media (prefers-color-scheme: dark) {
  :root {
    --main-background: var(--body-background-dark);
    --day-svg-angle: 0deg;
    --night-svg-angle: 90deg;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --main-background: var(--body-background-light);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-background: var(--body-background-dark);
    --day-svg-angle: 0deg;
    --night-svg-angle: 90deg;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --main-background: var(--body-background-light);
  }
}

or when the user changes the theme of the site via the toggle bottom top right I've just found this, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips I will try to see if it works but thought I ask incase there is a much easier solution without @keyframes to include a secondary background color to transition from skyblue to and from that color to black Actually, I think I just solved the second question ignore the second question

Gaming

Programming

css animation with css variable