VIDEO TRANSCRIPT:
Okay, so this is a quick video
just showing you how
you can
edit and toggle between
light mode and dark mode when you're in the page editor.
Let me just move my camera real quick over
here. Perfect.
So the reason we want to do this is because
if you're on a pro
user, if you're on Scaffold Pro, you have the
option of light mode and dark mode,
which is just great
feature. But
it also
as a developer,
you're going to want to see how the page looks in both
light mode and dark mode. It adds a little bit of complexity
to your development process,
but I think it's well worth it. It's just a
cool feature to have.
But you know, when you're designing
things you're going to want to see and
you normally how it works on the website
is you go down to the footer and that's how you can
toggle between light mode and dark mode.
But you can't do that here because this is a global
module. So if you go to click it, it says open
global content editor, you don't want to do that.
So what we ended up developing
is what we like to call the development options
panel. So see this blue button that's showing
up right here.
I can click that.
And that's how I can toggle between light mode,
dark mode,
or auto, which auto is basically
whatever.
Your current,
whatever your current user settings on your computer
are. So if your computer is set to dark mode,
it'll be on dark mode. If your computer is set to light mode, it'll be
to light mode.
So here, yeah, we could just toggle,
you know, back and forth between light mode and dark mode
easily while we're
developing.
And you could see the benefit here. Like, so
for example,
these images right here,
we have
a filter. I'll show you how it looks like in here.
If I go to one of them,
I can click on this,
click within it,
and then here we have filters,
and then we have dark mode filter
white. So the reason being is if
we have dark text,
it's going to almost disappear when it's
in dark mode. So we're
going to want to add a filter to turn it white.
So as a developer, you're going to want to easily,
without leaving the page editor,
want to see what that looks like. So you just
go here,
and then now you can toggle back and forth between light
mode and dark mode and see what that looks like.
So yeah, we're really happy. This is,
we used to have it
built in
here on development options,
and it was
a less elegant solution. So we're actually really
happy to have this panel
that we've just developed for you in
the page editor. It makes it really easy for
you to flip back and forth between light mode and dark mode.
It's going to make your development much faster.
And if you do, for whatever reason, want to hide
this panel
and the button here, you can check this box in
the development. You go to
click this contents,
development options, and you can hide the options
panel. I don't know why you'd want to, but
if you want. Another
cool feature in the development options
panel, which is worth mentioning,
is what I call design mode.
So if I check this toggle here,
it adds a bright
dashed red border
to basically every page element.
And this helps you really visualize
like how like the grid that you're looking
at. And also it helps you look
at, you know, some of your padding,
some of your margins and your spacing and stuff like that.
So. I don't know.
For me, I find it useful. You can see how things are centered
here. You can see how
the spacing things are laid out. So I don't use
it all the time,
but sometimes if
things are kind of not lining up the right way and
seem like they look wonky,
this could be a useful feature to have just
to kind of help visualize the way I want to lay
things out.
And of course, with all of these things,
with this
design mode,
you know, red borders,
it would never, it only shows in the
editor. It would, even if you leave it toggled
on. It wouldn't show up
on, on the live website anywhere.
And then same with this little
whole development options panel. This only shows
up when you're in the page editor, when you're in the
previewer, if you preview in a new tab
or, you know, you publish your page, obviously
this isn't going to be showing up live on your website.
So that's it for now. Um,
we're really happy to bring this, uh, feature
for you. I think it's going to make it really easy for
you and fast for you to
quickly develop your website with that light mode,
dark mode functionality. So.
That's it. And if you have any questions, just
reach out. Thanks. Bye.