[MUSIC PLAYING]
ABBY SCHMIEDT: I work on the Kids Coding Team
here at Google.
And I'm going to be talking about themes.
So to get started, we're going to talk about what are themes,
how do we use themes, and then the future of themes.
So themes are an easy way to switch between different color
palettes during runtime.
So that was our goal for creating themes.
And one of the great things about themes
is they're good for accessibility.
So people who have different color blindness,
we can create different themes that would cater towards them
and then switch to those different themes-- they
can switch to whatever theme they
want while running Blockly.
So our theme API.
So themes came out back in January, I think.
And we had support for changing the block color--
the background, border, and shadow block color--
and changing the categories.
So then I think about two weeks ago, we just
added support for changing the toolbox, workspace, flyout,
and scrollbar colors.
So we'll talk about how we can change all of those today.
So in order to create the theme--
so we need block styles and categories styles.
So block styles is an object that holds the style name,
and then an object holding color primary, color secondary,
and color tertiary.
So color primary is the color of the block,
color secondary is the color if it's a shadow block,
and color tertiary is the color if it's for the border.
And then for category styles, we just
have the category style name and then the color--
what color we want that to be.
So once you have those things, you just put them--
create your theme from them.
So you'll have your theme as shown at the bottom.
Great.
So now we have a theme with block styles and categories
styles.
So now we can set everything else.
So there's workspace, toolbox, flyout,
and for these, you just set the component style.
So set for the workspace, and then give it the color.
If it's an opacity, you would give it a number from 0 to 1.
So does that make sense?
Any questions?
No?
Cool.
Not too hard yet.
OK.
[LAUGHS]
So now we have our theme, and it's fully created.
We want to sync that or combine that with the categories
and blocks.
So in order to do this for categories,
we just add that category style attribute in XML.
And that just has the style name that we created for our themes.
Then for blocks, in the block's init function,
we set the style that we created.
And then if it's JSON, we just add the style attribute
and the name of the style.
So now our blocks know what style they are,
our categories know what style they are,
and we can move on to setting the theme.
So there's two ways to set the theme.
You can either set the theme when you inject,
or you can set the theme on your workspace.
So this changed recently.
So if you were using themes before,
it was Blockly.settheme.
And now it's going to be on the workspace.
So that's something that you'll have to change.
Otherwise, it might break things.
All right.
So the future.
We want to add more components that users can change.
Some things that we were thinking about
are insertion markers, insertion marker opacity, highlight,
font--
all of those wonderful things.
There's a GitHub issue, if you want
to look at what we are currently thinking about changing.
But if you have any suggestions or requests,
go ahead and file an issue or a feature request.
Then we can easily check it, and try and implement it.
[MUSIC PLAYING]