Kevin Powell - Community•10mo ago

Dark Mode Toggle

I have tried and tried again to get this toggle to work. I have included a link to my github repo. In the top part of the script.js file is the over-engineered script that I commented out. Below is the script Kevin had on youtube. Any help on this is much appreciated! PS: This is the error I get : TypeError: can't access property "addEventListener", darkModeToggle is null https://github.com/andrewteece/social-media-dashboard

GitHub

GitHub - andrewteece/social-media-dashboard

Contribute to andrewteece/social-media-dashboard development by creating an account on GitHub.

17 Replies

Andrew•10mo ago

Got the error fixed. It was a simple typo, but the script does not work.

sacarima (Class - 50)•10mo ago

I was looking at it, was it the toogle id typo?

Andrew•10mo ago

Yes it was. So that problem is fixed, but now the script does not do anything. Watching the dev tools and the body should have "darkmode" added to it with the script, but that does not seem to happen.

ἔρως•10mo ago

where can we see this running?

sacarima (Class - 50)•10mo ago

clone the repo, @epic2937 @andrewteece the problem now is with your css, i'm trying to figure it out

Andrew•10mo ago

Thats what I was thinking. My commented out code at the top of the script.js file was the original code I wrote. The code being used now it the code I found from Kevin. The css is still written for the original js code. @sacarima thank you This problem is driving me insane lol

ἔρως•10mo ago

it's not a css or a javascript issue: it's an issue with you not using the right variables none of the variables inside the .darkmode are used anywhere

Andrew•10mo ago

ok I will look at that @epic2937 thank you

ἔρως•10mo ago

you're welcome

Andrew•10mo ago

Just going to redo the variables

ἔρως•10mo ago

you don't need to re-do, you just need to use the ones you had, but weren't using also, since you're using scss, i would recommend that you create a map with all the colors, instead of manually creating the variables

Andrew•10mo ago

great thank you for your help

ἔρως•10mo ago

you're welcome

Andrew•10mo ago

Something like this map but for colors

@use 'sass:map';

$font-sizes: (
  '400': 1.125rem,
  '500': 1.25rem,
  '600': 1.5rem,
  '700': 2rem
);

@use 'sass:map';

$font-sizes: (
  '400': 1.125rem,
  '500': 1.25rem,
  '600': 1.5rem,
  '700': 2rem
);

ἔρως•10mo ago

yes

Andrew•10mo ago

Very helpful advice, thanks again

ἔρως•10mo ago

you're welcome

Gaming

Programming

Dark Mode Toggle