- [Instructor] Hey, there.
I'm Potch and I'm a developer advocate at Mozilla.
I wanna talk to you about a new form of extension
for Firefox called dynamic themes.
Browsers of long supported theming,
it lets you customize the appearance of the UI
of the browser, change colors, apply a texture.
They're really just kind of a fun way to customize
and personalize things.
Firefox now supports what are called dynamic themes.
And these allow a theme to actually react
to changes in the browser.
It actually programmatically let an extension
change aspects of the theme
that's currently being applied.
They're really neat.
You can make fun things, you can make useful things,
you can customize to the weather or your location
or really anything.
It's programmatic control of the browser's theme.
So I want to show you a really simple dynamic theme.
It sort of let people know what's possible
and hopefully get people excited to make more.
So what we're looking at right now is actually
a static theme.
And this is just called Quantum.
It's where Firefox theme made one of our designers.
And you can see that if you click on it,
it applies this nice color and, in fact,
the text actually flipped from a darker color to
a lighter color to match.
So all of these things are sort of basic customizations.
And all of those things can be programmatically set
in dynamic theme.
I want to show you a simple dynamic theme that I built
just to show you what's possible and hopefully
get people excited about making more of these.
My theme responds to whether or not the currently
selected tab is in reader mode.
If you're not familiar with reader mode,
it's available on a couple different browsers.
And it actually takes the content of an article
and formats it sort of attractively for stand alone reading.
So here's the normal hacks post.
You can see all the text and images.
And if we click this little icon here or the page,
it's gonna enter into reader mode
and now you can see the same content of that article
sort of laid out.
Plain white background, very simple.
You can customize how it looks, et cetera.
I'm not really here to talk about reader mode
but here to talk about a theme, the text reader mode.
So here is what reader mode looks like.
And you can see the view of the browser is unchanged
and then maybe install my reader mode theme.
And so I'm currently in the about debugging view
which lets me load temporarily an extension.
I have the reader theme extension that I built.
And now if we switch back to that tab,
you'll see that the browser now sort of displays
the open pages of a book.
And the current tab is a light font color and the rest
sort of fade into the background.
Not necessarily something you might want,
but it's sort of a neat effect.
I'd like to show you how that works now.
So let's get the code pulled up.
So first, every extension starts with a manifest.
This tells the browser what the extension is going to do
and what's sorts of permissions it needs.
For us, we need to understand whether a tab is in
reader mode and we need to be able to change the theme.
So we've requested the theme permission
and the tabs permission.
Tabs will let us listen to changes to the current tab
or active tab.
And theme lets us modify the theming aspects of the browser.
Additionally, we're going to need a script that lets us
actually monitor these things then listen for events.
So I registered a background script here.
I'm gonna show you what that script looks like.
It's actually not a terribly large amount of code.
It's about 40 lines of formatted code.
We're gonna start with defining what sort of theme
we want to apply.
Obviously, I've defined this is one big JS object
but you can just as easily compute this stuff dynamically.
So you can see we're applying some images,
we are adjusting them and we're applying some colors.
First, you'll see this header URL here.
All themes currently require a header URL.
But a header URL is normally the standard theme graphic
and that usually docks to the top right corner
of the browser's UI.
However, I wanted my image to be centered.
So you can see I have this little thing here.
It says bg.svg and if we take a look at that,
it's actually just a blank image.
Just a blank svg image.
Nice and compact.
And the browser is going to use that and just draw
transparency into the browser's UI.
Unfortunately, these are just required for
backward compatibility reasons.
But we can also apply other images.
So you can see this theme also has additional backgrounds
and only one of them which is the book.
So here's the image of the book.
You can see it's sort of a cropped image of an opened book
with the pages displayed out.
You can see it's mostly light, a little bit of dark,
but mostly light background which means we're gonna probably
need some way to set some text against it.
And as you can see, we did.
We have a background color which is
let's say the browser gets really wide
and we run out of image,
we'll actually show this background color
which in this case, sort of a darker brown.
A tab text color.
I'm actually going to have the text of the
current tab be white.
And all of the other text, the other tabs
is going to be black.
So you can see it's actually kind of going for a
high contrast look here.
And a toolbar.
So if you go back to the theme when it's applied,
you can see that the current tab and the toolbar
is actually sort of a semi-transparent black
that's overlaid on it just to add some extra contrast.
That's what you're seeing here with the text color
and toolbar color.
You can see it's a semi transparent black.
Additionally, we have these properties.
A kind of css ish
the additional backgrounds actually allow
the customization of repeat patterns
and image alignment.
Like I said, the required image docks to the top right
but you can see here, we're actually aligning our
first image here which is the only one.
Straight to the top.
And this means it's gonna be centered and the top
of the image is gonna match the top of the browser's UI.
And like I said, I want when the window gets wide,
I don't want the book to repeat.
I just want that background color to show through.
So I've set it to no repeat.
Okay.
So we have a theme.
How do we apply it?
Well, first, we need to see if we are in reader mode
or if we've changed reader mode.
And you can see we've actually set up a couple of
add listeners right here.
Tabs are on activated.
There's an event that fires when any time
the active tab changes.
And it returns an event object, one of which the properties
is which tab it is.
Additionally, if a tab changes state but not necessarily
changes activation state,
you get the on updated event.
And this lets us listen for if the current tab
is entering or leaving reader mode.
So you can see in either case, we are grabbing the ID
of the tab and passing it to this function update.
So what does update do?
It's really easy.
I'm getting the information about all the tab
from the tab's ID.
If it's not the currently active tab, I'm not interested
because I'm only gonna change the theme
when the active tab is in or non reader mode.
And then we check.
Tab's in reader mode.
We're gonna update the current window
with our constantly applied theme, or statically
computer theme up top.
And if we're not, we're just gonna reset.
So it's really, really simple.
We're looking for changes in the current tab.
If the current tab enters a reader mode,
we want to react to that and we're gonna apply that to
the currently selected window.
Let's go back and take a look at that one more time.
You can see this dynamic theme is currently on.
If I leave reader mode, the theme goes away.
And now we're back to the default Firefox theme.
If I enter reader mode and switch to another tab,
you can also see that the theme goes away.
It really only applies to the current tab
when we're in reader mode.
Hopefully, that gives you an idea of what's possible
with dynamic themes.
Obviously, we could have lots of different themes up here.
We could have some of these properties
be computed dynamically.
Maybe we extract the background color of the current webpage
or maybe we figure out some colors from the fav icon.
There's all kinds of things you can do.
I just wanna give you a taste of what's possible.
Hopefully, we see lots of people making really cool
dynamic themes in the future.
Thanks.