Kevin Powell - Community•4w ago

Toggle switch not working

Hello, I'm trying to create a clock with light and dark mode but there is an issue in it light mode is working correctly but when toggle to dark mode the theme is not changing correctly. The body bg color is not changing fully and the clock container also not changing according to theme Here is the code link https://github.com/Myragull/Digital-Clock And preview https://myragull.github.io/Digital-Clock/

GitHub

GitHub - Myragull/Digital-Clock

Contribute to Myragull/Digital-Clock development by creating an account on GitHub.

37 Replies

13eck•4w ago

Please provide a minimal working codepen so we can fork and make changes

MyraOP•4w ago

@13eck here is the link https://codepen.io/Myra-Gull/pen/QwWVJQa

Myra Gull

CodePen

Digital Clock

...

13eck•4w ago

pro tip, don't do this:

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

You should never nuke padding and margin on your site. Those are important. Nuke 'em like that and you have to add it back to literally every element. Paragraph space? Gone. Indenting for lists? Gone. Any space anywhere? You guessed it: gone

MyraOP•4w ago

Got it! Thanks for the tip

13eck•4w ago

Best piece of advice I can give for CSS is that you should always add things, not take away. Need more space? Add more margin. Need a grid? Add display: grid;. Once you start removing things (because of the cascade) you might just be removing something important that you don't realize until you need it—and it's not there.

MyraOP•4w ago

Okay

13eck•4w ago

Made a few changes to the CSS to remove all px lengths and started with my prior JS for the clock. Added a shorter event listener for you https://codepen.io/13eck/pen/jEOvQxz Used the classList.toggle() function to toggle dark-theme. If the class exists, then it's removed. If it's not there, it's added. Then used a ternary operator to basically do the toggling so you don't need an if/else block

MyraOP•4w ago

Thanks for the feedback! @13eck.c I really appreciate the improvements you made

13eck•4w ago

👍

Rowe2ry•4w ago

Just a heads up, for managing light and dark colors, nested CSS is great and has decent support right now.

*, *::before, *::after {
  box-sizing: border-box;
}


body {
  height: 100svh; 
  background: #ffffff;
  
  &.dark-theme {
    background-color: #000000;
    color: white;
  }
}

.clock_container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8); 
  backdrop-filter: blur(15px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
  
  .dark-theme & {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
  }
}

.time-para {
  font-size: 4rem;
  font-weight: 700;
  color: #030303;
  
  .dark-theme & {
    color: #fff;
  }
}

.parent_container {
  gap: 1rem;
  margin-inline: auto;
  width: 55ch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container_a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container_a h1 {
    color: #000000;
  
  .dark-theme & {
    color: #ffffff;
  }
}

button {
    padding: 1em 2em;
    border-radius: 6px;
    border: none;
    background: #000000;
    color: #ffffff;
    align-items: center;
  
  .dark-theme & {
    background: #ffffff;
    color: #000000;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}


body {
  height: 100svh; 
  background: #ffffff;
  
  &.dark-theme {
    background-color: #000000;
    color: white;
  }
}

.clock_container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8); 
  backdrop-filter: blur(15px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
  
  .dark-theme & {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
  }
}

.time-para {
  font-size: 4rem;
  font-weight: 700;
  color: #030303;
  
  .dark-theme & {
    color: #fff;
  }
}

.parent_container {
  gap: 1rem;
  margin-inline: auto;
  width: 55ch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container_a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container_a h1 {
    color: #000000;
  
  .dark-theme & {
    color: #ffffff;
  }
}

button {
    padding: 1em 2em;
    border-radius: 6px;
    border: none;
    background: #000000;
    color: #ffffff;
    align-items: center;
  
  .dark-theme & {
    background: #ffffff;
    color: #000000;
  }
}

13eck•4w ago

That's true! Nesting has been widely supported for over a year now. Some browsers have supported it for over 2 years

MyraOP•4w ago

Thanks for the explanation!The nesting approach makes the code cleaner and easier to manage, especially for theme switching

13eck•4w ago

Holy crap! I've apparently been sleeping on nesting CSS! I didn't know you could prepend the &!

clevermissfox•4w ago

Light-dark function is gaining support which makes this ; prefers-color-scheme media queries can be helpful to toggle custom properties Eg

:root {
—clr-primary-bg: whitesmoke;
}

@media (prefers-color-scheme : dark) {
—clr-primary-bg: black;
}

Body {
background-color : var(—clr-primary-bg);
}

:root {
—clr-primary-bg: whitesmoke;
}

@media (prefers-color-scheme : dark) {
—clr-primary-bg: black;
}

Body {
background-color : var(—clr-primary-bg);
}

For flex and grid containers , since there are no collapsing margins , what’s your approach ? Do you then select everything inside anytime you use a flex/grid ?

13eck•4w ago

Yeah, I’d use something like

.flex-container > * {
    margin: 2em;
    padding: 1em 3em;
}

.flex-container > * {
    margin: 2em;
    padding: 1em 3em;
}

Rowe2ry•4w ago

Its a glorious time to be doing front end rn. At least for another year or two before AI is good at css too.

13eck•4w ago

Yeah, no, that's not gonna happen with the current LLM tech. LLMs learn from what's on the internet. There's more shit code out there then good code, so LLMs will almost always give you bad code. Garbage in, garbage out. Until Kevin or Rachel Andrews teaches the LLM specifically (or someone else who's equally knowledgeable about good CSS) LLMs will never be better than someone who puts a moderate amout of effort to make it good.

Rowe2ry•4w ago

This is an even better way to do it if your UI/UX person does a direct mapping of their light mode colors to dark mode colors. Unfortunately, in the workflow at our office, the UI/UX person has different patterns in the 2 color themes, such as an element with a heading and sub heading might have the same color for both text fields in light mode, but the subheading in dark mode is a different neutral shade than the one used for the heading etc. I think it'd be loads of fun to make a smaller project with a handful of premade UI themes besides just light and dark and then used a body class to change the customer property values and have the whole page update.

clevermissfox•4w ago

Totally there are definitely those cases where the colours don’t translate one-to-one like your subheading. Theme toggles are so fun , I’m working on one that toggles the visual “oS” iPhone or Android . I’ve seen some really creative themes that aren’t just light or dark , and with the :has() selector it makes it so much easier to toggle a data attribute (or a class!) on the body or html and your styles are completely different ! A handful of pre-made ui themes sounds like a fun project ! Would love to see it if you end up deciding to create it !

13eck•4w ago

Did a bit of playing around and have a slightly new take on the clock component:

const newClock = (cssSelector) => {
  let timer;
  let lastTime = new Date();
  const el = document.querySelector(cssSelector);

  const start = () => {
    const thisTime = new Date();
    if (thisTime.getSeconds() !== lastTime.getSeconds()) {
      lastTime = thisTime;
      el.innerText = thisTime.toLocaleTimeString();
    }
    timer = requestAnimationFrame(start);
  }

  const stop = () => timer = null;

  return {
    start,
    stop
  }
}

const newClock = (cssSelector) => {
  let timer;
  let lastTime = new Date();
  const el = document.querySelector(cssSelector);

  const start = () => {
    const thisTime = new Date();
    if (thisTime.getSeconds() !== lastTime.getSeconds()) {
      lastTime = thisTime;
      el.innerText = thisTime.toLocaleTimeString();
    }
    timer = requestAnimationFrame(start);
  }

  const stop = () => timer = null;

  return {
    start,
    stop
  }
}

Keeps state internal and all you need to do is const clock = newClock("element-selector-here"); then clock.start(). Easy peasy! This version cuts down on the maths and only creates a new date object once per loop, and compares the seconds component to see if it needs to update the display or not.

ἔρως•4w ago

you forgot to cancel the raf in the stop method if you dont cancel it, it will run one last time, which can have negative side effects

13eck•4w ago

Oh, right, thanks!

ἔρως•4w ago

you're welcome

13eck•4w ago

And now, with even more options:

const newClock = (cssSelector) => {
  if (document.querySelector(cssSelector) === null) { throw new SyntaxError(`'${cssSelector}' is an invalid selector`); }
  let timer;
  let lastTime = new Date();
  let _locale = undefined;
  let _localeOptions = {timeStyle: "medium"};
  let formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
  const el = document.querySelector(cssSelector);

  const start = () => {
    const thisTime = new Date();
    if (thisTime.getSeconds() !== lastTime.getSeconds()) {
      lastTime = thisTime;
      el.innerText = formatter.format(thisTime);
    }
    timer = requestAnimationFrame(start);
  }

  const stop = () => {
    cancelAnimationFrame(timer);
    timer = null;
  }
  const reset = () => {
      locale = undefined;
      localeOptions = {timeStyle: "medium"};
      formatter = new Intl.DateTimeFormat(locale, localeOptions);
    }
  
  const locale = (newLocale) => {
      _locale = newLocale;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }
  
  const options = (newOpts) => {
      _localeOptions = newOpts;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }

  return {
    start,
    stop,
    reset,
    locale,
    options
  }
}

const newClock = (cssSelector) => {
  if (document.querySelector(cssSelector) === null) { throw new SyntaxError(`'${cssSelector}' is an invalid selector`); }
  let timer;
  let lastTime = new Date();
  let _locale = undefined;
  let _localeOptions = {timeStyle: "medium"};
  let formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
  const el = document.querySelector(cssSelector);

  const start = () => {
    const thisTime = new Date();
    if (thisTime.getSeconds() !== lastTime.getSeconds()) {
      lastTime = thisTime;
      el.innerText = formatter.format(thisTime);
    }
    timer = requestAnimationFrame(start);
  }

  const stop = () => {
    cancelAnimationFrame(timer);
    timer = null;
  }
  const reset = () => {
      locale = undefined;
      localeOptions = {timeStyle: "medium"};
      formatter = new Intl.DateTimeFormat(locale, localeOptions);
    }
  
  const locale = (newLocale) => {
      _locale = newLocale;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }
  
  const options = (newOpts) => {
      _localeOptions = newOpts;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }

  return {
    start,
    stop,
    reset,
    locale,
    options
  }
}

ἔρως•4w ago

you have a tiny bug: if a dummy stops it twice, you are passing null to the function to cancel the raf. which in turn it means you also are adding multiple rafs if some dummy starts the clock multiple times also, querySelector throws an exception if it detects syntax errors - which is used by jquery and sizzle to detect and parse pseudo-selectors

13eck•4w ago

Better?

const newClock = (cssSelector) => {
  let timer = null;
  let lastTime = new Date();
  let _locale = undefined;
  let _localeOptions = {timeStyle: "medium"};
  let formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
  const el = document.querySelector(cssSelector);
  
  const loop = () => {
    const thisTime = new Date();
    if (thisTime.getSeconds() !== lastTime.getSeconds()) {
      lastTime = thisTime;
      el.innerText = formatter.format(thisTime);
    }
    timer = requestAnimationFrame(loop);
  }

  const start = () => {
    if (timer !== null) { return; }
    timer = requestAnimationFrame(loop);
  }

  const stop = () => {
    if (timer === null) { return; }
    cancelAnimationFrame(timer);
    timer = null;
  }
  const reset = () => {
      locale = undefined;
      localeOptions = {timeStyle: "medium"};
      formatter = new Intl.DateTimeFormat(locale, localeOptions);
    }
  
  const locale = (newLocale) => {
      _locale = newLocale;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }
  
  const options = (newOpts) => {
      _localeOptions = newOpts;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }

  return {
    start,
    stop,
    reset,
    locale,
    options
  }
}

const newClock = (cssSelector) => {
  let timer = null;
  let lastTime = new Date();
  let _locale = undefined;
  let _localeOptions = {timeStyle: "medium"};
  let formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
  const el = document.querySelector(cssSelector);
  
  const loop = () => {
    const thisTime = new Date();
    if (thisTime.getSeconds() !== lastTime.getSeconds()) {
      lastTime = thisTime;
      el.innerText = formatter.format(thisTime);
    }
    timer = requestAnimationFrame(loop);
  }

  const start = () => {
    if (timer !== null) { return; }
    timer = requestAnimationFrame(loop);
  }

  const stop = () => {
    if (timer === null) { return; }
    cancelAnimationFrame(timer);
    timer = null;
  }
  const reset = () => {
      locale = undefined;
      localeOptions = {timeStyle: "medium"};
      formatter = new Intl.DateTimeFormat(locale, localeOptions);
    }
  
  const locale = (newLocale) => {
      _locale = newLocale;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }
  
  const options = (newOpts) => {
      _localeOptions = newOpts;
      formatter = new Intl.DateTimeFormat(_locale, _localeOptions);
    }

  return {
    start,
    stop,
    reset,
    locale,
    options
  }
}

-# Hope it's better, I have to go to work now ^_^;;

ἔρως•4w ago

it is a lot better it's near perfection personally, i would check against null, but that's nitpicky and personal preference

13eck•4w ago

Where am I not checking against null?

ἔρως•4w ago

you are checking against null i meant to say "wouldn't"

13eck•4w ago

Ah, gotcha

ἔρως•4w ago

still on monday brian, sorry

13eck•4w ago

So for start() you’d just check if (!timer) { }?

ἔρως•4w ago

i would do if(timer) return; then continue the code normally and for the stop, i would do if(timer) cancel...(timer); but with proper curlies and indentation, obviously

13eck•4w ago

Yeah, obvi :p

ἔρως•4w ago

gotta have some clean code!

Anuj_26727•3w ago

Hello everyone I completed my html, css and JavaScript I making a project after see and I can also understanding code but when I starting from scratch I can't able to create project I am frustrating anyone can suggest me that what I do for created self project without seeing any code

13eck•3w ago

Don't hijack other posts, please make your own in #help

Gaming

Programming

Toggle switch not working

Did you find this page helpful?