hello everybody how's everyone doing
today um Joe I see you couldn't get the uh thing working with power grid um just
uh reply to your thread on uh on the Forum or on the community and uh we'll help you out okay uh I know you posted
over there so yeah feel free to uh respond over there and uh yeah we'll help you
out sweet Mr Cole Mr Powers hopefully by the
way hopefully I nailed the whole live stream debacle I worked with a
restreamed hopefully we figured it out funny thing is so you know I'm in the Bay Area and uh like they automatically
pick the closest server to me to stream to so I was streaming to San Jose and
apparent for some reason the connection to San Jose is absolute crap so um I
manually put in their Seattle server and boom speeds were great so not sure
what's going on with my connection to San Jose but uh whatever it's uh
hopefully today's going to be better let me know um early on um just give me a
thumbs up maybe audio and visuals good hopefully it is um
I I'm not seeing the what I was seeing on my live stream software um in previous weeks so it's all green right
now so hopefully we're going to be good to go Mr Williams Scotty's
here Mr workman's in the house ran David got all The Usual Suspects
Ryan hey Ryan I posted a link on the community uh an hour ago or so about
this new service called ship sorry completely different topic of today but whatever um and it's like a UPS thing um
made me think of you because I know you you use a lot of ups and shipping and whatnot so um check it out it's a
service from a company that I like called Sticker Mule um I like the products that they have um so yeah check
it out maybe it'll help you out maybe not but check it out I posted the link on the community so there you go
Gunter how are you doing bud okay so today um I think it was two
weeks ago when I was doing the swatches thing I think it was the swatches thing
I don't remember now um what I had for lunch breakfast this morning um but um
we talked about yeah I was talk I was talking about swatches and uh and I
didn't want to dive into dark mode and I asked hey guys who wants to learn about dark mode and so quite a few of you uh
replied and said I want to learn about dark mode well not me I know how dark mode works but you guys want to learn
how dark mode works so um yeah today we're going to look at uh converting a
site to look great in dark mode
okay Danny Grizzle man how you doing bud how's the Log Cabin business
sweet Danny stop joining I'm glad you haven't joined the Hangouts cuz like you know I I stopped buying cool video gear
like you know geez man I don't need that right now Danny stay away just playing
good to see you Danny um all right let's get cooking let me go ahead and uh let's start sharing
my screen and uh let me just go ahead and
I'm going to start from an existing site um I was just going to go to actually let's go to um the foundation product
page okay and let's just go to
downloads and let's start from an existing Foundation project where
was of project I think it was this one let's look at this um and if you
guys didn't know there's a ton of free downloads on a lot of products Foundation has a ton of them um bunch of
different project files so check those out if you want and I I hope this is the
project that I think it is let's
see oh man you lost me on that one Danny 50k on on red I I stay away from that
brand that Brand's way over me man um yeah all right let's see what is this
project boom this is the exact project I wanted score I mean it's it's a decent looking
web page you know and uh yeah that's a cool one let's uh we're going to tweak
this one we're going to add dark mode to this website or this this page I remember do I have multiple pages on
this I don't even know what I I only have one page sweet perfect man this is an old project it has some older older
stuff in here but that's all good should work out and I think I made this project it
looked like it was before the menu Swatch even existed wow check that
out yep I don't even yeah I don't think I had the menu Swatch cuz who I would
not have how did I do that look the uh link colors aren't white what kind of
crap is that Dam what kind of crap designer built this site okay um let's just quickly fix
that one cuz I do want to do a minu Swatch on here so let's go ahead I'm going to um let's fix that let's do menu
Styles I want um uh I want my text to be
white um we'll call this cool menu
okay and I I don't want to style background on hover or just going to call this one boom there we
go there we go that's looking better a hover color is kind of crap let's just change fix that really
quick uh hover text we don't want that let's do
um let's do like 60%
white yeah that's a cool trick by the way if you guys didn't know like you know a lot
of times you don't need to change have a completely different color on Hover you just change the opacity right so if you
you see this like um instead of white I want to you know have some sort of hover effect when you when you hover over the
link and I I made it the same color I just gave it an opacity so that the back
whatever is behind it the background kind of bleeds through a little bit right um so yeah cool little trick
okay um I think the rest of this page looks pretty cool actually I like it
okay so dark mode uh I know by the way I know some this project has some other you know if you
see this background is v632 um that's just because this
particular Swatch there's a newer version available I'm not going to go through and and update all these
swatches um I know for example like this particular one um there's a new button here for total CMS oh by the way let me
know in the chat um do you want me to like always use this little cursor tool
that I have sometimes I forget to turn it on but um does it make it useful to help you track where I'm at and whatnot
let me know in the chat um if you like that okay um so yeah just some swatches
if you if you ever have a Swatch on a project that has a little version number that just means um that that particular
Swatch is locked in at that particular version um and if you added a new let's
say background Swatch or overlay Swatch it would have new features um in it okay
um sometimes I have to do this because sometimes when I add a new feature I I don't want to break any existing
instances and so if you notice here position has Shadow a lot of swatches I'll tend to if I want to add a new
feature I don't want to break anything uh existing um I'll do this little trick where I'll lock in the current version
um and then the new features will go in any new instance of that swatch okay
so um yeah so we want to talk about dark
mode helps if I open my cup um we want to talk about dark mode
so when my my Mac currently is in dark mode okay if you notice my entire Mac is
in dark mode and the first thing we're going to be reviewing today is the ability
to if you go into your system settings and this the same if you're on a Mech or an iPhone um you can swap light mode and
dark mode so I swipe if I swap between light mode and dark mode you'll notice here the website stays the same there's
no logic that actually follows whether or not um I have chosen my Mac to be in
dark mode okay or my iPhone um and I assume Android and
Windows users have that same thing I really have no clue but we all have Macs and iPhones probably so we're the cool
kids and that's all that matters were're cool except for Chris he's not
cool um all right so how do we target uh when someone is in dark mode super easy
and it's baked into pretty practically every single uh Foundation Swatch now I
will have to say that let me just click out of here really quick one thing I should say is
that building a site that supports both light and dark
it's you're almost doubling your work to be honest with you I mean this this isn't something that
is you know it's not hard to do but it's a lot of work because you just can't
change the color of a background or change the color of text which we'll see here right some things will look okay so
maybe it's not exactly double right um because you can use your same layouts but
like picking all your colors you're going to have to like pick completely completely different color schemes at some point right if you want to have a
light theme and a dark theme so yeah just be weary that if you want to add
dark mode support to your website um it is going to be substantially more work
maybe not double maybe 50% more right um because you're going to have to it's
possible that we'll even see here today that maybe some images won't look good
in on on dark mode but they look great on light background right so there's a
lot of things we need to take into account here that are again your the layout of your site can stay the same
but you we're going to have to tweak a lot of colors here and it could potentially be a lot of work so um yeah
I just want to give you that little warning uh before we dive into this
so so in every Swatch and let's go ahead and I don't need that um let's just pick
one here um background is is an obvious one okay um this particular one this
particular uh Banner probably won't have any issue but you'll notice that there's this pseudo State uh oh no I'm sorry
media query um so if we click on media query we'll see that the actual very first uh
option here is dark mode okay so we can uh go ahead and Target a particular swap
watch only in dark mode now you can't Target light mode
okay so um that is one caveat you cannot Target light mode so that means anything that isn't set to dark mode is light
mode okay and if you don't have something that overrides the light mode with dark mode your light mode settings
will pass through into dark mode okay for example this particular
website right I don't have any swatches set for dark mode however my default
site is being displayed because that's what we need right um it it just passes
through into dark mode since I don't have anything we get then get to override um those settings um so for
example first thing we're going to do is um I think the easy thing is change out
the website background color okay so
now this is going to also drastically increase the number of swatches that you
have so um Swatch organization is going to be very important okay so um I'm
going to go ahead and just add in a pen here and I'm just going to set this to dark mode
okay okay so anything I add in here will be uh our dark mode okay so um I'm going
to go ahead and add a background Swatch now I want to change now the
website site background is the first thing we want to customize and in here in site Styles we
have our site background settings okay now the default is white I don't have
one explicitly set but the theme has a default okay which is white okay um but
there's no option here for dark mode okay and by default classes are used in
swatches well I can't have a class for my website background how am I going to do this so if you didn't know um we
showed this many times page element and then you can just choose body okay so
right now we're going to change the background color of our body and let's go ahead and pick a color
okay and um let's pick something
dark how about something not completely black there we go like a dark gray okay
now remember all I have to do is that set this media query to dark
mode okay and let's go ahead and preview this so now I'm going to change this is changing the website
background to um this very dark gray when we are in dark
mode okay and voila right now there's a couple things
you might notice a this section here isn't because that's not you that's a
container that has a special background right um but we have we have our
background color here now obviously a lot of stuff just doesn't look good anymore I think my personal opinion in
dark on a dark background obviously the text color needs to be we need to update that maybe this image right um we
probably need to tweak this background color so that it's not as light it needs
to be darker right and uh yeah so we we
have a lot of work to do in this form this form doesn't is maybe when we change this backround here it's not this
isn't going to look good right it's like H see this is it it's a lot of work okay
our menu down here doesn't look great I think up here probably looks okay um I'm
not in love with this color combination of this with that but it's something I could live with I think um now here
let's just tweak off let's twe tweak something here I'm going to go ahead and uh
I'm going to use this Color Picker let's pick for dark mode let's pick like a purple from in
here so it kind of matches how about like this this dark right
here let's do that right so I'm going to do that I'm actually going to change my
website background to be
that let's see all right so um instead of like a
dark gray or black I just picked a color from um from this image up here and
let's let's go with that okay so yeah um still not in love with
it but maybe he needs a little bit more
purple we got to make this look good let's let's go do a little more purple
let's try that color
he let's go with that okay let's do that so first things first so I'm I'm good
let's say we're good to go with this website background let's just start picking off the big things okay text
color text color has to change okay so um we need to go ahead and how we going
to modify that so let's go into here we are going to add in a
um text color swatch
okay um and then we're going to apply this to um the whole page um so we're
going to do element body okay and uh we're going to do uh dark mode and our
header color I'm just going to go boring I'm just going to go all just going to pick white for now right so when we're
in dark mode okay I want all my body colors to be white and funny enough uh
it actually changed all of these inside edit mode which is interesting okay um
let's preview that so there we go okay so that's actually looking a lot nicer right so we got our text is popping okay
now let's see let's go ahead and open up our system settings and just so we can see this I'm to go to
light mode voila okay and if I go to dark mode
voila very different right
okay can't see the settings oh I just noticed you guys said you can't see the oh shoot I'm sorry um one second guys
sorry about the settings totally missed that man what a rookie look at
this can't believe I did that that's weird how did that
change okay there we go sorry about that sorry
for a few minutes hopefully you guys kind of saw what what I did here I'll review so in body all I did is I picked
obviously picked the background color um I used media query dark mode here um and
then page element body sorry about that um okay good thing I I looked at chat so
there we go text colors are white okay there we go right if you notice it changed it all
here change it all up there someone asked what this Color Picker is this is a color this is one called color
slurp um I kind of like it um you can you can choose different you can save color palettes here okay so like I have
the color palette for foundation 6 which uh I guess I didn't add here's my Weaver
space colors all right you I have like one called gray scale that has various colors of gray okay um and then yeah one
thing I like about color slurp you've probably seen me use it um is you can just basically drag and drop the color
the active color here or from down here and just kind of drag and drop those things um into color Pickers so yeah
it's nice okay um where was I text colors
body color done still not visible
let's reset you guys have to be able to see the settings now
right you guys still can't see the set settings on my output it says that I'm
showing the settings looks like I am okay um
excellent looks like you guys can see it now cool sorry about that um okay let's keep
going I guess I had to refresh the the feed whatever okay
um I didn't do anything rocket science uh yet all I did is on on back text
colors and background we set the element to be body so we're applying it to the entire web page okay and we set the
media query to be dark mode that's it right can I do like there it is Boom
dark mode I can hold down control key I should make that
bigger any right and there's our color and then same thing for text colors um so now okay what are we going
to work on now uh I think let's work out work out the
uh this section here so we need to pick out a new background color here okay so first off let's find the Swatch that
controls this little container here okay um here let me just go ahead I'm going
to cheat a little bit let's go look at what class I applied here section color
okay so I have a section color class okay somewhere uh section color here we
go I'm using the Swatch light gray okay um which is actually interesting so um
it's using the light gray color um let's do something different there there's two different ways I can do this okay
um the first is uh we'll do add a background so I'm going to go ahead and
uh we're going to copy and paste body and we're going to do section color here
SE section Dash color okay um dark mode and then here we're
going to change the color okay and what I'm going to change it to is let's change it
to find a color needs to be lighter than this
but all let's pick a let's pick a color from here why not let's pick out
something like one of these kind of gray blue colors let see how that looks I
have a feeling that's not going to look good but whatever let's
see
boom h i don't hate it okay um we're going to keep it for now okay um I don't
hate it but there we go right and uh but next up is we need if you look at these
these are all white and we we don't want we don't want that right obviously we don't want that I think I'm okay with
the with the cards still being white we can keep the the card background white okay um but yeah we need to change the
white text here um so what we're going to do
is um I'm actually going to use um I'm going to create a new text color
swatch and what we're going to do is we're going to add this to um section
Dash color Okay in dark mode and uh we're
going to just set it to be I'm just going to be lazy and just pick cran colors
okay so there we go so uh what I did was okay um for Section color I to be honest
actually you probably don't want to do that because this white text would probably still look good in section color maybe we do something like um
we'd probably Target this card right so we we do um see if I have any classes
added to those cards have rad no you don't want to do
radius pretty sure these have a class of
card let me just look really quick yeah card okay um so do you guys understand
what I what what I'm trying to get out here is um
we if this text was on this background we don't want it to be black or yeah we
want it to be white because the white would still look good here but it wouldn't look good on this card so we
you know from a design perspective you have to decide do I still want this card white or do I want to change the color of that I'm saying let's keep it white
but we need to make sure that this text even in dark mode isn't white which is the default which we changed to be the
default color of the text so um what I'm going to do is I'm going to tweak
this all and what I'm going to do is I'm going to do something maybe a little Advanced here um there's a couple
different ways we can do this I can just do I can do a class of card okay and then I can do parent class
of um section color okay so what this is
doing is is it's finding the section color and any card that's inside of that
in dark mode set it to be this color right um let's go ahead and preview that
and that should that still looks good okay so it again it's targeting cards
that are inside section color class um and we're going to make that U the black
color okay and let's just go ahead and uh for fun where's my I close my system
settings so light oh wait got it preview right and let's bring that
that so we can kind of see what everything looks like over here if we change to dark
mode voila right pretty cool I like
it now we're we're getting we're getting actually pretty close I think there's some things we we can do now there was
actually another opt option that I wanted to show for Section colors okay U
almost forgot so I to change the background of
section color if we looked at the original way this was done it uses the light gray color now the light gray
color is inside of site Styles and it is under the site colors
we have here we have primary secondary alert success warning white light gray so it's this color okay and again
remember if I were to change this light gray color it would change any every everything that actually references
that so one thing I could do okay is instead of doing
this what I can do is I'm going to go ahead and add in a components component
colors okay and if you look at the component color swatch it has all of
those primary colors as well as light gray now what I can do is I can change light
gray to be uh oh did I close color slurp where's
my color slurp there it is right what I'm going to do is I'm going to change light gray to be this color
voila okay so now uh oh and I want to change it when we are in when we are in
dark mode dark mode and I need to make this
body so it changes it for everything okay so now now when I
preview this it should look exactly the same as it was before and voila but it's different okay
um it's different because now um anywhere I don't know if anything else on this page references the light gray
color but now the light gray color now references this um you know kind of
grayish blue technically it's no longer light gray right um but that's okay it's just
a name right it's just I just randomly when I chose these it was like let's
give you a white and a dark gray right and so you can change all these things
um so you can update and modify these colors based on dark mode and another
benefit of that is if we look further down I have this button here okay and if
you notice maybe I want to change the color of this button and this color um is
primary okay so um if we look inside site Styles okay I had set primary to be
this purpley color interesting it's not getting displayed up here not sure quite why oh it's
because this this Swatch is overwriting it interesting I never thought about that that's technically a bug I should
look into um because my Mac is in dark mode so dark Mode's overwriting the default
colors interest interesting uh if if you didn't understand what I mean so here
inside site Styles let's just go ahead and I'm going to turn that uh let's just
delete that really quick now if you look here primary is set to this purpley color right but if I go ahead and put
that swatch back and we go back up here it's primary so pretty interesting um or
the primary is this light color blue so if I go to system settings again and I
go ahead and toggle light mode right see oh interesting sta probably
cashes it or something oh wait no it's in dark mode
interesting wonder if I like exit out and go back in or something here let's go back go back
here interesting all right well I won't debug that for right now but it it'll
work on our published site um all right getting back to it so
component colors what I I want to do is dark mode I want to change what the primary color is in dark mode okay and
um let's just go ahead and set it to
be I'm going to set it to be actually a lighter color okay and then I'm going to set the primary text color to be um that
why not okay let's preview that so there we go so now this button here which is
on the page and if we go ahead and find that form button there uh there it is
okay we'll see that it's set to use the primary
color so what I did was I I now have a components Swatch that when we are in dark mode it
changes the primary color to be um a light gray with this purple
text there we go pretty cool and then also the light gray background right and so anywhere that references those colors
we're good to go right so um here uh couple other things before
I I start tackling forms okay let's go ah and tackle some stuff down here um so let's tackle these
menu items so over here we just go ahead and let's see what those menu items
are oh it's a partial uh just to make my life easier I'm just going to unpack
that okay um and these are
using okay menus and if I look up
here and if we scroll down oh here's our okay so it's using the default link color okay so what I'm going to do is
I'm just going to go ahead and um text colors so we're going to
update the link color here to be white cuz in dark mode white just looks better
okay so if we go ahead and preview that now that did not change
it did I change the right one dark
mode okay I didn't think that that's what it
was uh could be a Swatch here F oh I was using oh that's that's
font [Music] size Banner type title section card divider card mini wrapper it's
padding it's not using not using this one sub menus all
right here I'm just going to cheat I'm going going to inspect it let's see what's what's doing it here man
inspector is ginormous okay uh one second this is using
Bar menu link color
okay I must have a Swatch somewhere that does that
H there it
goes
I mean I created this project years ago so let's see is there any sort of
other well let's just go ahead and what I what I'm going to do is uh I'm going
to create a new menu Styles okay we're going to call this
uh uh footer menu or footer links let's call it footer links it's probably
better okay um and then we're going to do media
query dark mode and we're going to make the text same thing okay as we did before in in
this menu okay actually be honest I could probably just do cool menu or here
let's do yeah could be the same just use cool
menu and it's oh this is Media query
oh that oh yeah we don't want that this is all menus because this one doesn't
Target dark mode uh let's yeah okay sorry let me just go ahead and put that back we want
footer menu I did footer links but here footer
links and we're going to Target dark mode and then we're going to use those okay so what I'm going to do is here is
I'm going to go to footer links and then we're going to go to all of these menu Stacks down here this one this one and
this one oh shoot clicked on the wrong thing that one and that one we're going to
paste in that class right so now if we preview right so now my footer links are
all white and let's test that it looks good in dark mode or light mode I
mean preview in light mode everything goes back to the way it was there we go
I know what this was by default menu links use the primary
color um so there we go okay
um go back to dark mode voila now we have a few small odds and ends
that we need to um tweak if you notice this icon down here at the bottom is um
black looks fine on white background doesn't look fine
on um dark mode right so let's tweak that what can we do
here so there's a couple things we could do um if this now this is an SVG so that's kind of cool because we can now
Target svgs with swatches okay so um we're going to do um I'm just
going to give this a asro logo okay going give this a class
so that we can Target this particular SVG okay and um let's go ahead and do a
Swatch we're going to do an SVG Swatch which I believe is here okay we're going to drag that into
our dark mode swatches and I'm going to Target astro
logo and we're going to Target when it's in dark mode and I want the fill color
to be white I think that's all we
need voila he pretty
cool so now our entire site is looking much
nicer and it's all in dark mode now okay
let's target forms all admit this this is forms can
be be a challenge now I'll admit this actually doesn't look horrible having a
white form I think people are used to that but let's go ahead and tweak that
see what we can
do okay so let's go ahead and add in a background what color are we going to make it um
yeah the problem with forms is like there's like the little glow there's all these kind of little tiny styles that
you need to tweak when you do a form uh which is a little Annoying um I mean it looks great when you're on a particular
background but to style it all um there's a lot of intricacies if you notice there's this little glow it's
because there's that little um there's a little glow that happens that looks amazing on a lighter background but
sometimes on a dark background it doesn't so uh let's go ahead and add in but let's start with the background okay
and um we're just going to do we're going to
Target all form inputs so we're going to go
element uh form Fields okay and
then we're going to do media query dark mode and background
color um
I'm not 100% sure what's going to look great um here let's try let's try this
color no clue how that's going to work but let's have let's have a
gander right well our text input right is there and that that actually looks I
actually kind of like that that looks actually pretty smart I like it makes it look transparent okay these ones didn't
go though what's going on there might need a uh I just need a
little bang important on that there we go okay when in doubt use the hammer you know what actually I really
like that um now uh the text area if you noticed oh no it's there it's done now
boom minus my sometimes one password is annoying um so there we go actually I
really like that um now we could go ahead and tweak um this is the help text
okay if you wanted you know what it's it's not the best here um I think that
is yeah help text um let's go ahead and tweak and
we're going to add in a uh font
color and uh let's go and we're going to do let me see if it's in here form help
text yep form help text okay um and then we're going to do dark mode and let's
just do um a lighter color on
that voila completely redone site for dark
mode pretty slick right
um yeah I really like that actually I think that looks
fantastic okay a couple things I I want to note let's say
um I don't think this image looks horrible but let's say I wanted to TW Let's Pretend This image looks horrible um
in dark mode and we want to tweak that okay so um because there there will be
times where an image looks really really great on on a white background maybe it
has it actually the image itself has a white background right um and it kind of Blends into the background of the site
um it's great but then in dark mode the the obviously the background color is different that image now looks horrible
okay so what can we do so the foundation picture stack has
support for dark mode um now in this particular example um we're we just have one image that's
served across all devices okay but we're going to go ahead and we're going to add in a drag and drop Source okay and what
I'm going to do is I'm going to set the media query to be dark mode
so in dark mode this is going to be the media query that is going to be used so
let's just go ahead and uh let's pick an image here um I don't think I have any
astronaut images we
got oh here we got Foundation six boom that's kind of fitting okay so in dark
mode um this this astronaut picture should change to be the foundation 6 um
Banner okay let's uh have a look voila and let's test that that
actually is true we go to system settings toggle toight mode the image changes so again I I I
think this astronut image looked okay right um but there are times that you're going to want to modify the image and
there you go it's really simple to do with the foundation 6 picture stack
so you can change out all of these right any questions um I think we
did a pretty bang up job of uh of redoing this site for dark mode and uh
as you see it wasn't may maybe I was a little melodramatic at the beginning saying it was you know 50 now but this
is a very simple page right and there's a lot of little intricacies you know it depends on how much time you spent
styling this is a very simple page so you've styled a ton of stuff um you know
trying to get double that work for dark mode it's possible right um so there we
go not too me yeah I did it in one two three four one two three four five six
seven swatches seven swatches not too bad oh
wait this one oh eight here I forgot I got the menu Swatch so I had eight
swatches um to redo do everything and that's because a lot of my swatches here are like height and um you know this
particular um background this one here this background image I was fine with this background image being for light
mode and dark mode I was okay with that right so I didn't need to redo this one right um this padding swatch for for
menus I don't need to redo the padding I I'm I just want to tweak the colors right so I don't need to redo every
Swatch um and maybe like here the this there's a Shadow on those cards I was
okay with the same Shadow on dark mode I didn't need to redo it right so you know
you're going to have to pick and choose what styles you want to override for dark mode and as you see here for this
particular page again it is a simple page it only took eight
swatches not too shabby actually I admit I thought this form was going to be a lot more difficult just changing the
background color to match the background of the container huge difference and I'm actually fine with the the the
background the white border um I think it looks kind of cool right so there we
go all right next up um you know I should have duplicated
this um so the next bit here I have to admit I'm
I've never I haven't done this
okay um I think there might be a small amount development that needs to be done um for
like let's say you want a toggle okay and you want the user to be able to say hey I want dark mode now and just use
click a little toggle up at the corner and have that change out light mode and
dark mode okay um there is a stack out
there I don't even remember who makes it it is not me go to made for
stacks and uh I know let's search for dark oh look at that there's a stack
called Dark mode okay who makes this RW prodev Carl Carl are you here I don't
know Carl joins sometimes um so this stack um I don't even know
here let's just go look at the demo let's see how we can use this I know some users use this okay
um enable Okay he hey just let you know uh yeah it looks like he fixed his
privacy Center to work with a one blocker cuz I'm using one blocker and his privacy Center showed up so there we
go um where is the demo for this oh here light
dark very cool um so there's a switch
stack I wonder I'm not 100% sure how how he does
it like how can you customize like how do you know it does it for everything so
I don't know try you can try this stack out I wish I knew wish I had done some
research beforehand so I knew exactly what uh what we were doing here I'm
curious sorry I'm poking around your your your business Carl my
bad it adds prefers dark to the HTML but
does it
add can we I'm curious can we just use the the swatches as is like you know for
media query dark mode I don't think you can
um um H let's let's do some Googling here
all right cuz I'm going to need to Google anyway uh to be able to see if I can do this natively with just
Foundation um but if you want a solution today as of right now go check out this
stack um now I believe um what this stack does right
because this is how I would do it um we go in oh maybe
that's interesting so if you notice here there is on the HTML there's there's a
class on the whole web page called prefers dark okay um and here let's go
ahead and if we turn that on to light oh prefers dark is still there
oh H interesting that's because I'm
preferring my my system setting is set to prefers dark but his toggle oh oh
here he has dark mode set on this particular
div okay never mind I'm not sure how how you would set
this uh let me do a quick quick Google search um JS how to
detect um color
mode H I know how to do it with CSS how to do it with
JS window match media isn't oh really you have to do it that
way that is that is crap can't do that with JavaScript what kind of burst my
bubble
[Music] actually that sucks does anybody know does anyone own
this stack that's in the chat just curious and have you used it with
swatches right as um he says it sports with Foundation 6 and it I'm sure it does work but I I don't know if it just
goes ahead and and what exactly it does like how do can you control the level that we did today I don't know okay
um something that that I've thought about doing is and I thought we are kind of
running low on time today but a cool update that I could ship um is you know just using a
foundation 6 togg
uh where am I looking at here forms I want a toggle a switch right so I'm just
going to Chuck this right here for right now okay so we have a switch okay and so we have a switch here
like just giving you the ability to set that to be your light or dark
mode switch um I'm not going to take the time to go ahead and try to code this um but let me
tell you how I would potentially do this okay and how we would leverage this um
and there's a couple different solutions I was hoping that um I
could have that this toggle go so that whenever you use um dark mode if you
have this enabled like I can force that somehow okay but another way okay is
um and let's say there is a Swatch I don't think there are swatches that don't support media queries but it's
possible there could be okay um and if there is if you'll notice um inside um
Foundation I I do add this prefers dark class to the web page okay so there's
prefers dark and um if I go ahead and let's go ahead and change my system
settings I'm going to he okay and let we inspect this
now okay um if and I refreshed you you'll notice that it no longer says prefer dark on the HTML okay so that's a
parent class so um what do is instead of using
this Let's Pretend media query didn't exist you can actually Target via a parent class and you could Target
prefers Das dark okay and um so this one is the SVG
so if we look at this now um we'll notice that it still works even though that I'm not using the media query I'm
using the parent class instead um and that's because that's a feature of foundation and I was just going to
leverage that um that feature to um basically allow you to toggle a prefers
dark on or off of the entire web page um
if anyone is uh you know curious you might be able to do it with to the Toggler Swatch I'm guessing not though
I'll be honest um I think it needs to be something that that I add um I thought we'd have a little bit more time today
um and I could maybe attempt to develop that Live While We're going but um yeah
we kind of ran out of time today so we won't have time um so um I I'm going to play around with
this um maybe we'll get see something like that in a in a future uh update to foundation so we can actually you know
have a toggle um and when I do that maybe I can do another live stream um or a video on that so that you can learn
how to use that because I'm not not 100% sure if you need to use the parent class or if I can allow it so these media
query dark mode things actually work that that would be my preferable method um but anyway um let's go and field some
questions let me go ahead and look at chat see if there's any questions about dark mode stuff um and also check out I
mean again that RW Pro uh so Carl check out his uh dark mode SWAT or dark mode
Swatch dark mode stack and um that works today so you can get that now um not ex
exactly sure how it works with swatches um but uh if you would like to you know
post some comments on um this live stream's uh post on the community
let people know we can talk about it okay uh and maybe maybe that's a perfect solution okay
um oh so irn says that a few are Set uh a few are set sitewide others are blends
of RGB so maybe you're I'm assuming that that stack like alls you to set colors but you can't get like grainy or like we
did like you can like have a Swatch specific in dark mode for a particular thing you know I would I would suspect
that his wouldn't have that level of of detail um and he couldn't um you know
because obviously Foundation is huge okay so um yeah I think it's something
that I I'll investigate further to see if it's something that we can add directly um you know just you add a
switch to the not exactly sure on the implementation it'll probably be tied to a switch though I think that makes most
sense you know a little switch um so using a form switch Maybe by having either you know adding a special class
to it or um I'll probably have a checkbox on there it kind of turns into a magical switch or something like that
I don't know um but anyway cool
um yeah that's it that's all I had for today hope you guys enjoyed that um I think it's pretty simple um how to do
this using the media query dark mode but I know a lot of people had questions about that and maybe you've never done
that before so yeah hope you learn something a little bit today and uh sweet take care go out and check out
Bento and check out um Bill burden's did a cool stamp layout you probably saw I
sent it out in the Weaver space um or Weaver bites email yesterday so check
that out and uh cool so hope you guys will see you on Friday at the hangout it's at
1:30 p.m. 1 hour from right now but on Friday so check us out there and yeah
also hey subscribe to YouTube I've been watching our subscriber account it's not really going up so if you're not subscribed go ahead and click the
Subscribe button that'd be great not really sure why but I don't know make me
feel better that I have more subscribers cool everyone oh shoot
trivia we got to do the trivia oh man you guys okay um man another day dang it
I was hold on give give me one second let me go ahead and um I need man I need
to come up with like trivia ahead of time so that I have like a bank of trivia questions right
um
I'm using chat GPT to generate My Trivia Question here let's
see oh here's a good one
okay um it's probably it's probably really
simple maybe not I don't know okay um this the the answer actually isn't a
number this time okay so what does CSS stand
for first person let's go
in the chat first person $10 boom Irwin cascading style
sheets okay good job Irwin so Irwin wins
sweet that was something non like Stacks related I thought hey let's go like just general web development um kind of
something that maybe some beginners and whatnot would uh would know
oh chat gpg's got some good ones I I'm going to bank some trivia questions in the future using chat
GPT that was a typing speed [Laughter]
test sorry Danny fastest fingers in the west is
Irwin I guess huh nice okay uh Irwin I'll shoot your your your $ gift uh gift
certificate um or store credit um later today and uh sweet thanks everybody hope
you had a fun um fun time and you learned a little bit and we'll see you next week take care everyone bye