The Weekly Web Dev Show: Dark/Light Theme Switcher

Key Takeaways

[Music] that wasn't as loud as i would have liked let's give it another go better the sound quality could be better on pumpkin soundboard here it is oh that's confusing this one but it's a work in progress yes so here we are once again at 1701 on a monday afternoon i had to think then what i was trying to say yes so we are here to look at these weekly web dev challenge submissions aren't they brilliant so many wonderful themes creative minds have gathered here today to show them off looking forward to seeing who is here we have dave vish one off kendrick germanicum emma mario and brain is here uh lana is back michaela ariadne welcome yes excellent i know for a fact that uh many of you have submitted a solution if you have indeed submitted one of these fantastic light and dark themed switches then please raise your hand and i'll do my best to look at as many as possible throughout the course of this stream yeah and of course we are here to find out who has won this mysterious vote and there is still time to vote but close it 5 15 pm gmt today aka in 12 minutes time so yes go along and cast your vote okay some hands coming in to the chat ah i might have confused myself here because for example web shivam has sent a wave i don't know if that means that they've sent the submission as well let me know anyway let's begin with the people i'm fairly sure have submitted and the first one is i mean yes who created with figma no less this pumpkin themed blog pumpkin even has his own lego look at that amazing and we have the all-important dark and light thing fantastic i mean i like the way it uh transitions like this as well do i really have nine lives i hope so pumpkin that would be good yes well done i mean and very good that you took the opportunity to practice a bit of figma while you're at it why not fabulous fernando i'm not sure if that means that fernando has submitted let's have a look i don't think so oh man i don't think so this is under a different name let me know james what's up is telling me that he has indeed submitted with a very handy piece of functionality which is use system pref and if you're wondering what that means and allow me to open up my settings and select i'll go for dark mode a dark mode in my settings and that will then mean that bear with me yes there we go when i refresh and hit use system pref transitioning to dark mode as per my settings extremely fancy well done to dave you really need to work on making that sound board a bit quicker right yeah who else is here alana whoops has submitted a space themed one yeah you could change the theme if you wish we had football we have space uh someone's done a what do you call it marine life one with an octopus but anyway over to alana's space themed one look at it go amazing multi-colored shadows around the photos beautiful but that's not all no we can switch over to the dark side very creative alana well done you yes good luck to all that applies said emma yes very true renzo let's take a look at yours wow yeah lorenzo has made this which has this poor print background here it is in the dark version but you may be thinking this is an image in the background you'd be wrong it is in fact made with gradients yeah this kind of mind-blowing i know allow me to find it and explain more um i guess we search background not this this the post container which is the thing that contains the posts as you would expect has all of these i think they're all radial gradients yeah which make these paw prints and the amazing thing about this is that you can then change the colors within it shall i attempt that or will it break the internet i'm going to attempt it ah there was highlight too i will try i'll try highlight i think you might have to do all of them for it to make a difference but i tested it when it was submitted and it was very impressive so well done to you renzo yay extremely impressive hello kwang liho i'm not sure if you've submitted let me know if so and i'll have a look ambree oh yeah so that was another uh different topic that someone has done and maureen has created this website for i believe it's hers and her sisters craft business or maybe just her sisters i'm not too sure um but anyway these are real crafts that ambryn and her sister have made together so that's an excellent use of the weekly web dev challenge and there is the alternate mode beautiful purple beautiful blue i think it goes really nicely with the content as well okay fantastic yeah just goes to show you really can do whatever you want um with the weekly webdav challenge you can even use it to make something you actually need yeah kendrick what was yours that's she you can't help can prick has made this cat block yeah with a beautiful cat background it didn't have enough cats so kendrick added some more with some rather angry posts from pumpkin which is quite fitting with his personality but just take a look at this toggle beautiful sun beautiful moon yeah and a very nice transition between the two so fantastic job to you kendrick friend of michelle did you send one i really should have said that if you've sent one a specific emoji that's what i'll do next time yes so many cats says dave yes terry now as i was saying you can use the weekly web dev challenge to make something that you need which is what terry has done here terry has turned it into a kind of portfolio which is pretty cool and we have dark red light mode how creative is that looking great wow look at that is that canoeing i tried kayaking once well michael and i tried it once yeah that's the last time i'm doing water sports so you're braver than me terry and very creative with your weekly web dev challenge just saying hi yes that's good too new here that brings me to my next point if you are new here please put it bunny rabbit in the chat if you've been before hit me with that tiger we don't do anything with this information it's just a bit of a fun tradition yes and also usually people start doing it before i say it so i kind of have to explain why people are posting tigers in the chat which is good ooh i'm mikachu are you the exciting stuff me issue here it is has turned to their cat for inspiration on the color scheme look at it oh beautiful notes from a cat lady well from one cat lady to another i highly approve and here is the alternate mode which goes with the other cat let us know what the cats are called very beautiful well done to you [Applause] germany camp has a submission let's check it out see you maybe use a different name let me know oh one step ahead it's something yes michael and i had a look at this in last yeah friday's stream because we wanted to add an easter egg but we didn't know how and then i remembered that germanic and 68 aka it something had added one for their own submission and here it is we have light mode with light mode dark mode [Applause] but if you unlock the secret uh code or passage of clicking i'm not sure how to describe it you get a new toggle with a cat and then yeah amazing really i think all websites should look like this that would be fantastic but if you're at work and suddenly realize that your boss is going to walk past and want to look like you're doing work you can just click this back to professional mode but then you can get the party started whenever you want yeah fantastic work it's something and always good to add more cats who else has submitted save marie okay let's find save marie's yes a change of color scheme rick is always nice because then you get lots of different colors on the submission site so very nice and a good selection for the colors as well i like the blue with the light mode and then the purple with the dark mode very effective oh no i've closed pumpkin sun mold disaster reopen move it to another screen and then i'll do yes clapping hold on save marie hello michael walker nice to see you here nice job i'm in says kendrick totally ah no submission this time fernando maybe next time yeah who else do we have here i use two style sheets for mine really wow can we see that you know i can't remember now was it published so it's hidden oh mysterious maybe i can check it out in the old devtools [Music] we have one ah right stars dark and then stars light interesting yeah very nice what else do we have yes glass more very cool oh that shows here hello good f l x e and t i think you might have used a different name let me know ah both me and my sister do the crafts that is super cool let go of me huma was my favorite bit going through the entries yes that was very nice indeed an elephant in the chat woo is there also four cats here wow no i have two cats not four yet maybe one day lots of tigers coming into the chat how am i feeling it well maybe not actually are we anthony no maybe next time a bunny rabbit in the chat welcome if you're a bunny rabbit and welcome back if you're a tiger amazing to have you all here orange cat is named fish black and white one is diablo good choice of names who else has submitted snow bit i think snow bits had one yes here is snow bits with a beautiful spinning cat in a track suit maybe in an outfit anyway very nice and a very nice toggle here i like the whole estate and it changes to a cute little moon that is beautiful snow bit well down to you i'm david solution with local storage oh that's worth looking at baby has gone for a rather fetching pink i can't remember if i put that pink in or if david selected it but in any case very nice indeed and what is cool about it is as david says uses local storage so when you come back david's site will remember which theme you preferred which is a very nice um addition i would say to the functionality because that wasn't a um stretch goal or anything say yes well done to you leave it yes soon i will be announcing the winner but not yet no oh no i'm keeping you on the edge of your seats i have a small list most of which we've already looked at actually of submissions we can take a peek at but if you're here and i haven't looked at yours yet then let me know and i will look at it yes stephen changed up the theme a little bit and went for all white but a nice orange is that or golden kind of hover state yes which i think looks very nice with the dark and the light thing because it is hard to find colors up like both you might be thinking no it's not literally everything goes with black and white but you got to think about contrast people yeah so well done to you stephen fantastic job who else do i have evan aaron's web dev blog this one i'm not sure what happened here but what i noticed about it i'm not showing my screen am i that's annoying i'm not sure if i was enjoying it for the previous one either if not here it is sorry about that yes aaron has made this one with a really cool toggle and a nice transition and these quote marks i remember having to make these ones when i was a junior and it was a bit of a nightmare so i admire anyone who makes those yes i am glad to join the community says arda yay hope you enjoyed just for fun last minute solution yes let's take a look at that one beautiful striking yellow oh that looks really nice and then yay looks just as good in the dark mode well done to you we also made use of local storage in my app wow look check out that we have here over here oh yes indeed fabulous that is a very good addition impressive may i make a suggestion for picking the random winner just refresh the entries page and pick the first entry i could do that that sounds good i will do that thank you for the suggestion i love your phone solution illa gold says ambreen next week cats are forbidden uh yep no cats in the next one which brings me nicely to my next point actually here it is the next challenge aka the final challenge of the year is this beautiful glowing orb yes and it is a retro screensaver well it's not yet but it will be when you finish with it the idea is this actually has many more colors of course in the gradient here they all are and you have to set it up so you can well animate it basically so you can see the different colors and if you would like a stretch girl you could allow the user to adjust the start time so for example on page load you can have a five minute timer that starts and then the screen saver pops up and you can move this all across the screen yes looking forward to seeing all of your amazing solutions final challenge not ever like the final one of this year apart from the javascript challenges which will be starting of course on december the 1st if you're looking forward to javascript post a what should we have reindeer yes who reigned it in the chat i know i am looking forward to javascript red jarvis greatness that's right dave yes it's like the weekly web dev challenge but it's every day and it's christmasy javascript is awesome yes looking forward to that very much indeed if you have not yet um enrolled is what i'm trying to say on the weekly web dev challenge page make sure you go and hit this purple button here and then you will get my curve emails with all the different uh challenges basically yes it could be your new year's resolution to do every single one wouldn't that be amazing yes totally would okay let's see if there are any more i can look at in a few remaining minutes has a cool animated toggle according to my notes cool indeed whoa look at it go that's the kind of thing that just cheers you up on a website isn't it things like this very nice looking forward to javascriptness 2021 where we win yes 1 000 grand cash prize is given away on christmas eve yes foul well mine like that so topsky has decided not to do cats no cats here here you go jose maybe you'll like this one instead of cats we have man united legend paul skulls with a dark and light theme not only that you can click this button and get quotes on paul's skulls yeah click for quote laurent blanc france's 1998 world cup winner i tell anyone who asked me skulls is the best english player there you go you heard it here amazing stuff oh i could buy with a thousand dollar grand yeah i know lots of domain names for your cat social media that's in the works oh so and maybe that's all the ones i was going oh this one mateus has created a nice bluey gray i guess theme which works really well with both the dark and the light theme i've dropped the ball on the clapping [Applause] fabulous stuff i joined scrimba last year after christmas planning to participate this year in javascript excellent news yes it will of course be starting next week terrifyingly next week it will be december whoa how did that happen yes so that means we will have a new javascript challenge every day that will be very very exciting uh so now it's time i reckon to reveal the winner let's have a lookie i always do this off screen because i don't trust that the thing hasn't broken and then it would be really awkward i mean not that it wouldn't be awkward anyway but yes here we are with a whopping 45.5 percent of the fight [Laughter] decided to go for a blog topic i guess and this beautiful uh luna and solar toggle which i think is just stunning so well done to you karen yes [Applause] if not you will get the yellow weekly web dev winner badge over on discord i have a feeling you've already got it but you'll also get the other prizes too and now on to selecting the random winner and as dave suggested what i'm going to do here is oh congrats yes i am going to refresh this because because you haven't noticed this is not the winner this is me demonstrating i'll let you know when it's the winner um part of our hacktoberfest the drive or one of the pull requests i guess was to make the entries load in a random order because i thought otherwise you always see the first five that gets submitted and maybe people at the bottom won't really get seen so that's what they do so that is exactly how i'm going to select the random winner who will win six months free scrimba pro and it will be this one here just for the sake of transparency so now select the winner the next refresh will be the winner okay let's give it a go dave wow what are the chances well the chances i guess are 1 in 41. so there you go dave that was not planned or at least if it was i don't know about it and dave is a really on the wall with that one well done to dave now i'm blushing oh yes blushing with the joy of free six months scrimber pray how amazing is that oh geared up for jehovah's christmas that's good i'm glad people are taking part because i recorded all these challenges and then i thought oh what people don't want to do it that would suck so yes amazing so that is it that was a rollercoaster ride i am back uh wednesday with shruti balasa who will be giving us an intro to tailwind yep answering questions and making a demo project as well so definitely tune in for that if you've been wondering how to get started with tailwind maybe you want a refresher yes or you just want to chat about tailwind i've been using in kevin pal's new course um face travel he doesn't use tailwind but he kind of uses a similar approach which is he sets up utility classes so for example there's a class that um all it does is it adds display flex and you have to add it to each html element that uses flex which is a similar approach to tailwind and i thought i was going to hate it but i actually quite like it it's much less confusing in the css all of this is to say i'm looking forward to hearing all about tailwind with shruti yes exciting stuff there and then on friday michael pumpkin and kitty that's our other cat who hasn't yet made it to the thumbnail but one day we'll um we'll be back live coding this retro screen saver rasquez says tailwind is awful well that's worth watching as well i mean michael and i coding is awful and people watch that for some reason so there were 200 people at one point on friday admittedly a very brief point but you know it was good party time [Applause] okay that is it for this broadcast i will be coming back at you on wednesday have a wonderful couple of days and keep coding [Music] you