So for the past few days I decided to create my own personal blog because I wanted to start blogging again. Anyways, I setup a basic WP website (sorry wp haters xD) and installed a pretty cool free theme that I tweaked all over the place.

I was thinking of cool things to add while I'm just in that setting up phase and I really admired that whole dark/light mode toggling feature :) so I spent the past day or so creating my own and it works finally, even across different pages! So i thought I'd share. (Please excuse the BS posts, its strictly for testing. Havent actually started writing posts yet xD)
Url: https://notyourcode.com

Heres also a link to this terrible js file I wrote that controls the logic lol (I'll have to refactor quite a bit but it works)
JS: https://notyourcode.com/wpd/...

Any feedback is appreciated as I'm still just developing it :)

  • 5
    I was like what the fuck is ttps
  • 7
    @AlgoRythm yeah it's the Totally Too Popular Security protocol.. O.o
  • 2
    Been some time I've seen plain JS code
  • 2
    @asgs yeah this wp theme is already bloated enough xD so vanilla js seemed like a better idea.
  • 2
    That JS file shouldn't work. You're using a function before it's defined. JS can be forgiving about that, but the real problem is the initnction isn't actually called on window.onload because you have the open and close parentheses, so you're calling the function. You're assigning the window.onload to the return value of that function (which isn't even defined yet, but JS is forgiving sometimes) which is void. Or null or undefined or whatever.

    So window.onload is void and the init function may be called before the window is loaded.

    That's just what I found in the first couple lines.
  • 0
    @AlgoRythm that's good to know thanks! Yeah I mostly just kept trying things until they worked xD revision is much needed.
  • 0
    @Alice great idea :) I just used the moon as a placeholder for testing purposes. Also i didnt have to worry about dynamically changing the icon or colors so it was easier to debug.
  • 1
    @AlgoRythm thanks for tip again, I went ahead and updated the script. I can sleep peacefully now xD
  • 0
    @AlgoRythm interesting.. I was doing some debugging with winload and for a reason I havent figured out yet, window.onload = function(); is seamless across page loads whereas window.onload = function; causes this crazy delay type flickering across page loads. No console errors on either command tho 🤔
  • 2
  • 2
    You can turn the address bar dark too with proper meta tags
  • 1
    @Teknas yeah I'm actually already using that tag. It's only dark grey atm but I'm gonna create those tags dynamically from my script so that they match the navbar for both dark/light modes :)
  • 2
    The onload function is called when the document and all related files are loaded, which might be after the initial page render. That explains the flicker you describe. Calling the function directly could work, based on the placement of the script. If it is located at the end of the body tag, the whole body is initialized and it works. You could also add it to the DOMContentLoaded event, which is fired when the DOM is parsed, instead of waiting for all other assets to be loaded.

    Also, JavaScript is weird in the way it handles functions. It is perfectly fine to use a function that is later defined. The JS interpreter first scans the whole script and compiles the functions with the function keyword. That's also the reason why functions with the function keyword don't adhere to scope.
  • 1
    @konicm8ker @Rocket3G is correct.

    The important question is this: does the page need to be loaded for the function to be called? Can you modify it so the page doesn't need to be loaded, if it does need to be now?

    But yes, this confirms the fact that the function was running before the page was loaded with the code previously. And it worked before the page was loaded as well. Maybe by coincidence, however. It's worth some good thought.
Add Comment