Build a dynamic theme generator with Ionic 4 using nothing but CSS variables. https://angularfirebase.com/lessons/css-variables-in-ionic-4/

- CSS Variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- Coolors.co https://coolors.co/
- Ionic 4 Docs https://ionicframework.com/docs/
2024-02-04T07:21:50.124Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
0e103b25-14d3-4df7-8116-cd19be87c052
ac6a3406a2c385004b94e011729d517a84a11013bf772855d1b798c4ba18ab38
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
1 One of the coolest things about Ionic 4 is that it uses CSS variables.
Over the next few minutes, you'll learn everything you need to know about CSS variables, how they're used in Ionic, and we'll build this dynamic theme generator from scratch that allows users to change the colors on the fly and also change the behavior of CSS animations.
If you're new here like and subscribe, and I also wanna let everybody know that I'm working on a brand new course for Ionic 4 and Firebase from scratch.
If there's anything you wanna see in that course leave me a comment below and it will cover some pretty advanced concepts that you won't see anywhere else, and it'll be free to all Pro members when it comes out in the next week or 2.
The thing that makes CSS variables special as opposed to variables in Sass or less is that they can be interpreted by the browser on the fly.
So that means we can use JavaScript to change global CSS variables and get different styling in the UI.
As you can see here, when I click a button, we get an entirely theme with different shade colors for all the different components in the app.
So let's go ahead and start with the absolute basics and just look at what CSS variables are.
I have generated a new Ionic 4 app and then I have it opened here in Versus Code.
You'll notice a theme directory inside the source directory that has all of our global CSS variables.
You'll notice that they're defined with this root selector.
That just gives them a global scope, meaning that all elements in the DOM can use them, including any web components that also use the shadow In Ionic 4, all of the components are just web components that use the Shadow DOM.
So global variables like this are a really easy way to style them.
But it's really important that you understand that variables like this can cascade just like normal CSS styles.
So let's imagine we define a global CSS variable inside of a button instead of the root.
In this case, we're overriding the ion color primary variable.
Now the button and all of its children elements will inherit the red color, but everything else that's not a button or a child of a button will still inherit the global one that we set on the root.
So that's just something to keep in mind.
Then to actually use a variable, we just use the var keyword and then pass in the variable name itself.
So, overall, they're very simple and should feel very intuitive if you're already familiar with CSS.
A really common use case is to allow your users to switch between a light theme and a dark theme.
For example, here I'm on Alligator IO.
And when we switch to the dark theme, you'll see we have all these different CSS variables that completely redefine the way the UI looks.
And that's exactly what I wanna show you how to build in Ionic 4.
And we'll even take things a step further to dynamically color an SVG graphic and will also allow the user to control the speed of its animation spin.
But before we do that, if you're not a designer, I wanna point out that there's a color generator in the Ionic docs that allows you to update and preview the changes to global CSS variables.
So this can be really handy for setting some default values.
But if you're not really good at creating a color palette, I recommend checking out colors.c0.
This is a web app that allows you to just mash the space bar until you find a color palette that you like.
But you can even create color palettes that are suitable for color blindness, create a color palette from an image, and a whole bunch of other useful little things.
Now getting to the code, we'll actually build this feature by using an Angular service that I can update the global CSS variables.
But, first, I wanna show you how it actually looks being used in a component.
To update the global theme, It will expect an object with various colors on them.
Then we'll write some code to automatically generate the shade and tint colors as well as the contrasting colors depending on how dark or light a color is.
So to create a new theme, you just need to choose 5 or 6 colors and then call the method on the service, and everything will update on the fly.
So I've defined 3 different themes on this object.
Then I'm gonna go down here and inject the theme service in the constructor.
And we'll have our service provide 2 main methods.
The first one is setTheme, which will update all of the global variables.
So it's expecting a big string with a whole bunch of different variables to find on it.
The service will also expose a second method called Set variable, which will create or update a single global variable.
At the end of the video, we'll set a speed variable, then we'll have that control the speed of the Spinner that you saw in the UI earlier.
So really simple usage in a component.
Now let's go ahead and write out the service that makes all this possible.
The first thing we'll do is generate the service file by running Ionic generate service theme.
After that, we'll install a package called color from npm.
This is just a little utility library that allows you to lighten and darken colors.
It's going to come in very useful later on when we need to create different shades intensive colors to generate a fully fledged theme.
To override all the global variables, we'll need to create a string that has all of the existing Ionic variables was in it.
I'm going to write this code in the service but just as a pure function called CSS Text Generator.
It takes an object of colors and then returns a big long string of CSS with all of the global variables in it.
1st, we'll go ahead and import the color library.
Then one of the most difficult things about This is determining the correct contrast for a color.
So for that, I'm gonna write out a helper function that will determine if a color is light or dark, Then we'll lighten or darken it by a certain amount.
So if we have a dark button, it will have light text and vice versa.
In other words, if a color is dark, then its contrast should be lighter.
Otherwise, it should be darker.
The next thing I'm going to do is just define a set of default colors.
These are actually just the defaults that you'll find in Ionic.
The reason I'm setting these defaults is that I don't want a global variable to be undefined.
So the user can just pass in one color and then it'll use the defaults for everything else.
So we can compose the defaults together with whatever the User passes into this function by using the spread syntax with the defaults followed by the colors argument.
Then to keep our code nice and clean, I'm also going to Structure this object.
This just defines every object property as its own variable name.
So we can then call it in the code without having to do colors dot primary, colors secondary and so on.
And I'll also set up specific variables for the tint and the shade so you can tweak those as you feel necessary.
Now we can use a template literal in JavaScript to define the CSS string.
Basically, we're just mirroring the CSS variables that we looked at earlier in the theme directory.
But we'll create all of the values dynamically based on the user input plus whatever logic we want to define in This is by no means a perfect theme generator.
I'm just adjusting certain values based on how I think they should look in the UI.
So, for example, I'm adding some additional contrast in places.
Then for every major color in Ionic, like primary, success, warning, cetera, there's a shade color and a tint color.
To create those colors, I'm just taking the base color and then making it a little bit darker and a little bit lighter.
There's kind of a lot of duplication here, and you could definitely make this more efficient.
But you could also just copy and paste the work that I did from the main article.
So that handles all the logic for generating the colors and the CSS styles.
Now we need to actually apply them to the DOM.
This is the part where we write the actual Angular service, and we'll need to import inject as well as the document from Angular common.
What we'll actually do is grab the root element from the document and update the global CSS variables that exist there.
And you can access the DOM in Angular by injecting this document constant here.
And then we'll strong type that as a document.
If you remember from earlier when I showed you the component, we have 2 main methods.
1 is to set the entire global theme and the other one is to set an individual variable.
So this method will expect an object of colors.
And then we'll take that object and pass it to our CSS text generator method that we just defined.
Then I have another private method that we'll define in a second here called set Global CSS, which will take care of the actual DOM update.
Then to set an individual variable, we'll create another method here called set variable, and it's going to expect the name of the variable as well as the value.
Then to make the actual update on the DOM, we will first get the root element by calling this document document element.
Then we'll grab its styles and we'll say set property with the arguments passed into this method.
And that's really all it takes to update a global CSS variable with plain JavaScript.
But obviously throughout this demo, we're updating more than just one variable.
So to update a whole bunch of variables at once, We can pass in a full CSS string.
Making that update on the DOM is pretty much the same process.
But instead of saying set property on style, We'll just go ahead and say CSS text and make that equal to whatever CSS string we pass in here.
And that's all there is to the service.
We can now bind these methods to any component, button, or whatever and it's going to update the entire global theme throughout the application.
Now the last thing I wanna show you is how we can use CSS to animate this SVG graphic.
You can just grab any SVG graphic off the Internet.
And if you open it up in Versus Code, you'll see that it looks very similar to HTML.
If you use this SVG graphic in your HTML, you can actually just Inline your CSS variables to control the fill and stroke colors in the graphic.
It's kind of hard to see, but I'm replacing the hex color with var and the name of our global variable.
And now the colors of this graphic will update dynamically whenever this global variable changes.
So I've already updated all the values, and then I'm taking this SVG code and pasting it directly in the HTML in my Homepage component.
You'll also notice that I've added a class of spin to the SVG itself, so make sure to add that as well.
Then we'll go ahead and create the easiest animation ever, which is just a simple rotation.
We can go ahead and set up some key frames that animate to a rotation of 360 degrees.
Then the interesting part is when you define the animation parameters itself, you can set up variables here for each one of the properties.
In this case, we'll only set a variable for the actual speed, but you could really set up a variable for anything here.
So currently, that Speed variable is undefined.
But our service can set individual variables, so all we have to do is call that method we defined on the service and it will update the speed to whatever we want.
That's exactly what I'm doing in the component, and we'll do one that changes the speed to 2,000 milliseconds and another to 500 milliseconds.
And that takes care of that.
You now have a dynamically animated SVG graphic in your Ionic app.
The one thing I didn't show you is how to use Ionic storage to have the theme be maintained between sessions.
So if the user refreshes the browser window or if close the app on their mobile device and come back later.
The same theme will be displayed.
This is actually a super easy final touch that I wanna show you here.
So first install the Ionic storage library.
You can look at the official docs for that.
Then you can inject the storage service in the constructor.
When the app is first loaded, we're going to look in our local storage to see if there's an existing theme saved.
If so, we'll go ahead and set that as the global CSS theme for this user.
But otherwise, they'll just get the default values.
Then whenever the theme changes, we'll want to set that as the value in storage.
We can just add that logic to our SetTheme method.
And whenever the theme changes, we'll call storage set with the new theme data.
And you now have a pretty powerful theme controller that works on all platforms and is 100% based on CSS variables.
I'm gonna go ahead and wrap things up there.
If this video helped you please like and subscribe.
And if you want to take your Ionic development to the next level, consider becoming apromember@angularfirebase.com.
And don't forget to leave me a comment about what you wanna see in the upcoming Ionic 4 course.
Thanks for watching, and I'll talk to you soon.

Speaker 0: 1 One of the coolest things about Ionic 4 is that it uses CSS variables. Over the next few minutes, you'll learn everything you need to know about CSS variables, how they're used in Ionic, and we'll build this dynamic theme generator from scratch that allows users to change the colors on the fly and also change the behavior of CSS animations. If you're new here like and subscribe, and I also wanna let everybody know that I'm working on a brand new course for Ionic 4 and Firebase from scratch. If there's anything you wanna see in that course leave me a comment below and it will cover some pretty advanced concepts that you won't see anywhere else, and it'll be free to all Pro members when it comes out in the next week or 2. The thing that makes CSS variables special as opposed to variables in Sass or less is that they can be interpreted by the browser on the fly.

So that means we can use JavaScript to change global CSS variables and get different styling in the UI. As you can see here, when I click a button, we get an entirely theme with different shade colors for all the different components in the app. So let's go ahead and start with the absolute basics and just look at what CSS variables are. I have generated a new Ionic 4 app and then I have it opened here in Versus Code. You'll notice a theme directory inside the source directory that has all of our global CSS variables.

You'll notice that they're defined with this root selector. That just gives them a global scope, meaning that all elements in the DOM can use them, including any web components that also use the shadow In Ionic 4, all of the components are just web components that use the Shadow DOM. So global variables like this are a really easy way to style them. But it's really important that you understand that variables like this can cascade just like normal CSS styles. So let's imagine we define a global CSS variable inside of a button instead of the root.

In this case, we're overriding the ion color primary variable. Now the button and all of its children elements will inherit the red color, but everything else that's not a button or a child of a button will still inherit the global one that we set on the root. So that's just something to keep in mind. Then to actually use a variable, we just use the var keyword and then pass in the variable name itself. So, overall, they're very simple and should feel very intuitive if you're already familiar with CSS.

A really common use case is to allow your users to switch between a light theme and a dark theme. For example, here I'm on Alligator IO. And when we switch to the dark theme, you'll see we have all these different CSS variables that completely redefine the way the UI looks. And that's exactly what I wanna show you how to build in Ionic 4. And we'll even take things a step further to dynamically color an SVG graphic and will also allow the user to control the speed of its animation spin.

But before we do that, if you're not a designer, I wanna point out that there's a color generator in the Ionic docs that allows you to update and preview the changes to global CSS variables. So this can be really handy for setting some default values. But if you're not really good at creating a color palette, I recommend checking out colors.c0. This is a web app that allows you to just mash the space bar until you find a color palette that you like. But you can even create color palettes that are suitable for color blindness, create a color palette from an image, and a whole bunch of other useful little things.

Now getting to the code, we'll actually build this feature by using an Angular service that I can update the global CSS variables. But, first, I wanna show you how it actually looks being used in a component. To update the global theme, It will expect an object with various colors on them. Then we'll write some code to automatically generate the shade and tint colors as well as the contrasting colors depending on how dark or light a color is. So to create a new theme, you just need to choose 5 or 6 colors and then call the method on the service, and everything will update on the fly.

So I've defined 3 different themes on this object. Then I'm gonna go down here and inject the theme service in the constructor. And we'll have our service provide 2 main methods. The first one is setTheme, which will update all of the global variables. So it's expecting a big string with a whole bunch of different variables to find on it.

The service will also expose a second method called Set variable, which will create or update a single global variable. At the end of the video, we'll set a speed variable, then we'll have that control the speed of the Spinner that you saw in the UI earlier. So really simple usage in a component. Now let's go ahead and write out the service that makes all this possible. The first thing we'll do is generate the service file by running Ionic generate service theme.

After that, we'll install a package called color from npm. This is just a little utility library that allows you to lighten and darken colors. It's going to come in very useful later on when we need to create different shades intensive colors to generate a fully fledged theme. To override all the global variables, we'll need to create a string that has all of the existing Ionic variables was in it. I'm going to write this code in the service but just as a pure function called CSS Text Generator.

It takes an object of colors and then returns a big long string of CSS with all of the global variables in it. 1st, we'll go ahead and import the color library. Then one of the most difficult things about This is determining the correct contrast for a color. So for that, I'm gonna write out a helper function that will determine if a color is light or dark, Then we'll lighten or darken it by a certain amount. So if we have a dark button, it will have light text and vice versa.

In other words, if a color is dark, then its contrast should be lighter. Otherwise, it should be darker. The next thing I'm going to do is just define a set of default colors. These are actually just the defaults that you'll find in Ionic. The reason I'm setting these defaults is that I don't want a global variable to be undefined.

So the user can just pass in one color and then it'll use the defaults for everything else. So we can compose the defaults together with whatever the User passes into this function by using the spread syntax with the defaults followed by the colors argument. Then to keep our code nice and clean, I'm also going to Structure this object. This just defines every object property as its own variable name. So we can then call it in the code without having to do colors dot primary, colors secondary and so on.

And I'll also set up specific variables for the tint and the shade so you can tweak those as you feel necessary. Now we can use a template literal in JavaScript to define the CSS string. Basically, we're just mirroring the CSS variables that we looked at earlier in the theme directory. But we'll create all of the values dynamically based on the user input plus whatever logic we want to define in This is by no means a perfect theme generator. I'm just adjusting certain values based on how I think they should look in the UI.

So, for example, I'm adding some additional contrast in places. Then for every major color in Ionic, like primary, success, warning, cetera, there's a shade color and a tint color. To create those colors, I'm just taking the base color and then making it a little bit darker and a little bit lighter. There's kind of a lot of duplication here, and you could definitely make this more efficient. But you could also just copy and paste the work that I did from the main article.

So that handles all the logic for generating the colors and the CSS styles. Now we need to actually apply them to the DOM. This is the part where we write the actual Angular service, and we'll need to import inject as well as the document from Angular common. What we'll actually do is grab the root element from the document and update the global CSS variables that exist there. And you can access the DOM in Angular by injecting this document constant here.

And then we'll strong type that as a document. If you remember from earlier when I showed you the component, we have 2 main methods. 1 is to set the entire global theme and the other one is to set an individual variable. So this method will expect an object of colors. And then we'll take that object and pass it to our CSS text generator method that we just defined.

Then I have another private method that we'll define in a second here called set Global CSS, which will take care of the actual DOM update. Then to set an individual variable, we'll create another method here called set variable, and it's going to expect the name of the variable as well as the value. Then to make the actual update on the DOM, we will first get the root element by calling this document document element. Then we'll grab its styles and we'll say set property with the arguments passed into this method. And that's really all it takes to update a global CSS variable with plain JavaScript.

But obviously throughout this demo, we're updating more than just one variable. So to update a whole bunch of variables at once, We can pass in a full CSS string. Making that update on the DOM is pretty much the same process. But instead of saying set property on style, We'll just go ahead and say CSS text and make that equal to whatever CSS string we pass in here. And that's all there is to the service.

We can now bind these methods to any component, button, or whatever and it's going to update the entire global theme throughout the application. Now the last thing I wanna show you is how we can use CSS to animate this SVG graphic. You can just grab any SVG graphic off the Internet. And if you open it up in Versus Code, you'll see that it looks very similar to HTML. If you use this SVG graphic in your HTML, you can actually just Inline your CSS variables to control the fill and stroke colors in the graphic.

It's kind of hard to see, but I'm replacing the hex color with var and the name of our global variable. And now the colors of this graphic will update dynamically whenever this global variable changes. So I've already updated all the values, and then I'm taking this SVG code and pasting it directly in the HTML in my Homepage component. You'll also notice that I've added a class of spin to the SVG itself, so make sure to add that as well. Then we'll go ahead and create the easiest animation ever, which is just a simple rotation.

We can go ahead and set up some key frames that animate to a rotation of 360 degrees. Then the interesting part is when you define the animation parameters itself, you can set up variables here for each one of the properties. In this case, we'll only set a variable for the actual speed, but you could really set up a variable for anything here. So currently, that Speed variable is undefined. But our service can set individual variables, so all we have to do is call that method we defined on the service and it will update the speed to whatever we want.

That's exactly what I'm doing in the component, and we'll do one that changes the speed to 2,000 milliseconds and another to 500 milliseconds. And that takes care of that. You now have a dynamically animated SVG graphic in your Ionic app. The one thing I didn't show you is how to use Ionic storage to have the theme be maintained between sessions. So if the user refreshes the browser window or if close the app on their mobile device and come back later.

The same theme will be displayed. This is actually a super easy final touch that I wanna show you here. So first install the Ionic storage library. You can look at the official docs for that. Then you can inject the storage service in the constructor.

When the app is first loaded, we're going to look in our local storage to see if there's an existing theme saved. If so, we'll go ahead and set that as the global CSS theme for this user. But otherwise, they'll just get the default values. Then whenever the theme changes, we'll want to set that as the value in storage. We can just add that logic to our SetTheme method.

And whenever the theme changes, we'll call storage set with the new theme data. And you now have a pretty powerful theme controller that works on all platforms and is 100% based on CSS variables. I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe. And if you want to take your Ionic development to the next level, consider becoming apromember@angularfirebase.com.

And don't forget to leave me a comment about what you wanna see in the upcoming Ionic 4 course. Thanks for watching, and I'll talk to you soon.
1 One of the coolest things about Ionic 4 is that it uses CSS variables. Over the next few minutes, you'll learn everything you need to know about CSS variables, how they're used in Ionic, and we'll build this dynamic theme generator from scratch that allows users to change the colors on the fly and also change the behavior of CSS animations. If you're new here like and subscribe, and I also wanna let everybody know that I'm working on a brand new course for Ionic 4 and Firebase from scratch. If there's anything you wanna see in that course leave me a comment below and it will cover some pretty advanced concepts that you won't see anywhere else, and it'll be free to all Pro members when it comes out in the next week or 2. The thing that makes CSS variables special as opposed to variables in Sass or less is that they can be interpreted by the browser on the fly. So that means we can use JavaScript to change global CSS variables and get different styling in the UI. As you can see here, when I click a button, we get an entirely theme with different shade colors for all the different components in the app. So let's go ahead and start with the absolute basics and just look at what CSS variables are. I have generated a new Ionic 4 app and then I have it opened here in Versus Code. You'll notice a theme directory inside the source directory that has all of our global CSS variables. You'll notice that they're defined with this root selector. That just gives them a global scope, meaning that all elements in the DOM can use them, including any web components that also use the shadow In Ionic 4, all of the components are just web components that use the Shadow DOM. So global variables like this are a really easy way to style them. But it's really important that you understand that variables like this can cascade just like normal CSS styles. So let's imagine we define a global CSS variable inside of a button instead of the root. In this case, we're overriding the ion color primary variable.
Now the button and all of its children elements will inherit the red color, but everything else that's not a button or a child of a button will still inherit the global one that we set on the root. So that's just something to keep in mind. Then to actually use a variable, we just use the var keyword and then pass in the variable name itself.
children
So, overall, they're very simple and should feel very intuitive if you're already familiar with CSS. A really common use case is to allow your users to switch between a light theme and a dark theme.
For example, here I'm on Alligator IO. And when we switch to the dark theme, you'll see we have all these different CSS variables that completely redefine the way the UI looks. And that's exactly what I wanna show you how to build in Ionic 4. And we'll even take things a step further to dynamically color an SVG graphic and will also allow the user to control the speed of its animation spin. But before we do that, if you're not a designer, I wanna point out that there's a color generator in the Ionic docs that allows you to update and preview the changes to global CSS variables. So this can be really handy for setting some default values. But if you're not really good at creating a color palette, I recommend checking out colors.c0.
animation
graphic design
cosmetics
This is a web app that allows you to just mash the space bar until you find a color palette that you like. But you can even create color palettes that are suitable for color blindness, create a color palette from an image, and a whole bunch of other useful little things.
cosmetics
Now getting to the code, we'll actually build this feature by using an Angular service that I can update the global CSS variables. But, first, I wanna show you how it actually looks being used in a component. To update the global theme, It will expect an object with various colors on them. Then we'll write some code to automatically generate the shade and tint colors as well as the contrasting colors depending on how dark or light a color is. So to create a new theme, you just need to choose 5 or 6 colors and then call the method on the service, and everything will update on the fly. So I've defined 3 different themes on this object. Then I'm gonna go down here and inject the theme service in the constructor. And we'll have our service provide 2 main methods. The first one is setTheme, which will update all of the global variables. So it's expecting a big string with a whole bunch of different variables to find on it.
The service will also expose a second method called Set variable, which will create or update a single global variable. At the end of the video, we'll set a speed variable, then we'll have that control the speed of the Spinner that you saw in the UI earlier. So really simple usage in a component. Now let's go ahead and write out the service that makes all this possible. The first thing we'll do is generate the service file by running Ionic generate service theme. After that, we'll install a package called color from npm. This is just a little utility library that allows you to lighten and darken colors.
programming
software development
It's going to come in very useful later on when we need to create different shades intensive colors to generate a fully fledged theme. To override all the global variables, we'll need to create a string that has all of the existing Ionic variables was in it.
I'm going to write this code in the service but just as a pure function called CSS Text Generator. It takes an object of colors and then returns a big long string of CSS with all of the global variables in it. 1st, we'll go ahead and import the color library.
programming
Then one of the most difficult things about This is determining the correct contrast for a color. So for that, I'm gonna write out a helper function that will determine if a color is light or dark, Then we'll lighten or darken it by a certain amount. So if we have a dark button, it will have light text and vice versa. In other words, if a color is dark, then its contrast should be lighter. Otherwise, it should be darker. The next thing I'm going to do is just define a set of default colors. These are actually just the defaults that you'll find in Ionic. The reason I'm setting these defaults is that I don't want a global variable to be undefined. So the user can just pass in one color and then it'll use the defaults for everything else. So we can compose the defaults together with whatever the User passes into this function by using the spread syntax with the defaults followed by the colors argument. Then to keep our code nice and clean, I'm also going to Structure this object. This just defines every object property as its own variable name. So we can then call it in the code without having to do colors dot primary, colors secondary and so on. And I'll also set up specific variables for the tint and the shade so you can tweak those as you feel necessary. Now we can use a template literal in JavaScript to define the CSS string. Basically, we're just mirroring the CSS variables that we looked at earlier in the theme directory.
But we'll create all of the values dynamically based on the user input plus whatever logic we want to define in This is by no means a perfect theme generator. I'm just adjusting certain values based on how I think they should look in the UI. So, for example, I'm adding some additional contrast in places.
programming
Then for every major color in Ionic, like primary, success, warning, cetera, there's a shade color and a tint color. To create those colors, I'm just taking the base color and then making it a little bit darker and a little bit lighter. There's kind of a lot of duplication here, and you could definitely make this more efficient.
cosmetics
But you could also just copy and paste the work that I did from the main article. So that handles all the logic for generating the colors and the CSS styles. Now we need to actually apply them to the DOM. This is the part where we write the actual Angular service, and we'll need to import inject as well as the document from Angular common. What we'll actually do is grab the root element from the document and update the global CSS variables that exist there. And you can access the DOM in Angular by injecting this document constant here. And then we'll strong type that as a document. If you remember from earlier when I showed you the component, we have 2 main methods. 1 is to set the entire global theme and the other one is to set an individual variable. So this method will expect an object of colors. And then we'll take that object and pass it to our CSS text generator method that we just defined. Then I have another private method that we'll define in a second here called set Global CSS, which will take care of the actual DOM update. Then to set an individual variable, we'll create another method here called set variable, and it's going to expect the name of the variable as well as the value. Then to make the actual update on the DOM, we will first get the root element by calling this document document element. Then we'll grab its styles and we'll say set property with the arguments passed into this method. And that's really all it takes to update a global CSS variable with plain JavaScript. But obviously throughout this demo, we're updating more than just one variable. So to update a whole bunch of variables at once, We can pass in a full CSS string. Making that update on the DOM is pretty much the same process. But instead of saying set property on style, We'll just go ahead and say CSS text and make that equal to whatever CSS string we pass in here.
And that's all there is to the service. We can now bind these methods to any component, button, or whatever and it's going to update the entire global theme throughout the application. Now the last thing I wanna show you is how we can use CSS to animate this SVG graphic. You can just grab any SVG graphic off the Internet. And if you open it up in Versus Code, you'll see that it looks very similar to HTML. If you use this SVG graphic in your HTML, you can actually just Inline your CSS variables to control the fill and stroke colors in the graphic.
animation
graphic design
It's kind of hard to see, but I'm replacing the hex color with var and the name of our global variable. And now the colors of this graphic will update dynamically whenever this global variable changes.
So I've already updated all the values, and then I'm taking this SVG code and pasting it directly in the HTML in my Homepage component. You'll also notice that I've added a class of spin to the SVG itself, so make sure to add that as well. Then we'll go ahead and create the easiest animation ever, which is just a simple rotation. We can go ahead and set up some key frames that animate to a rotation of 360 degrees. Then the interesting part is when you define the animation parameters itself, you can set up variables here for each one of the properties. In this case, we'll only set a variable for the actual speed, but you could really set up a variable for anything here.
animation
robotics
graphic design
So currently, that Speed variable is undefined. But our service can set individual variables, so all we have to do is call that method we defined on the service and it will update the speed to whatever we want. That's exactly what I'm doing in the component, and we'll do one that changes the speed to 2,000 milliseconds and another to 500 milliseconds. And that takes care of that. You now have a dynamically animated SVG graphic in your Ionic app. The one thing I didn't show you is how to use Ionic storage to have the theme be maintained between sessions. So if the user refreshes the browser window or if close the app on their mobile device and come back later. The same theme will be displayed. This is actually a super easy final touch that I wanna show you here. So first install the Ionic storage library. You can look at the official docs for that. Then you can inject the storage service in the constructor. When the app is first loaded, we're going to look in our local storage to see if there's an existing theme saved. If so, we'll go ahead and set that as the global CSS theme for this user. But otherwise, they'll just get the default values. Then whenever the theme changes, we'll want to set that as the value in storage. We can just add that logic to our SetTheme method. And whenever the theme changes, we'll call storage set with the new theme data. And you now have a pretty powerful theme controller that works on all platforms and is 100% based on CSS variables. I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe. And if you want to take your Ionic development to the next level, consider becoming apromember@angularfirebase.com. And don't forget to leave me a comment about what you wanna see in the upcoming Ionic 4 course. Thanks for watching, and I'll talk to you soon.
1 One of the coolest things about Ionic 4 is that it uses CSS variables. Over the next few minutes, you'll learn everything you need to know about CSS variables, how they're used in Ionic, and we'll build this dynamic theme generator from scratch that allows users to change the colors on the fly and also change the behavior of CSS animations. If you're new here like and subscribe, and I also wanna let everybody know that I'm working on a brand new course for Ionic 4 and Firebase from scratch. If there's anything you wanna see in that course leave me a comment below and it will cover some pretty advanced concepts that you won't see anywhere else, and it'll be free to all Pro members when it comes out in the next week or 2. The thing that makes CSS variables special as opposed to variables in Sass or less is that they can be interpreted by the browser on the fly. So that means we can use JavaScript to change global CSS variables and get different styling in the UI. As you can see here, when I click a button, we get an entirely theme with different shade colors for all the different components in the app. So let's go ahead and start with the absolute basics and just look at what CSS variables are. I have generated a new Ionic 4 app and then I have it opened here in Versus Code. You'll notice a theme directory inside the source directory that has all of our global CSS variables. You'll notice that they're defined with this root selector. That just gives them a global scope, meaning that all elements in the DOM can use them, including any web components that also use the shadow In Ionic 4, all of the components are just web components that use the Shadow DOM. So global variables like this are a really easy way to style them. But it's really important that you understand that variables like this can cascade just like normal CSS styles. So let's imagine we define a global CSS variable inside of a button instead of the root. In this case, we're overriding the ion color primary variable. Now the button and all of its children elements will inherit the red color, but everything else that's not a button or a child of a button will still inherit the global one that we set on the root. So that's just something to keep in mind. Then to actually use a variable, we just use the var keyword and then pass in the variable name itself. So, overall, they're very simple and should feel very intuitive if you're already familiar with CSS. A really common use case is to allow your users to switch between a light theme and a dark theme. For example, here I'm on Alligator IO. And when we switch to the dark theme, you'll see we have all these different CSS variables that completely redefine the way the UI looks. And that's exactly what I wanna show you how to build in Ionic 4. And we'll even take things a step further to dynamically color an SVG graphic and will also allow the user to control the speed of its animation spin. But before we do that, if you're not a designer, I wanna point out that there's a color generator in the Ionic docs that allows you to update and preview the changes to global CSS variables. So this can be really handy for setting some default values. But if you're not really good at creating a color palette, I recommend checking out colors.c0. This is a web app that allows you to just mash the space bar until you find a color palette that you like. But you can even create color palettes that are suitable for color blindness, create a color palette from an image, and a whole bunch of other useful little things. Now getting to the code, we'll actually build this feature by using an Angular service that I can update the global CSS variables. But, first, I wanna show you how it actually looks being used in a component. To update the global theme, It will expect an object with various colors on them. Then we'll write some code to automatically generate the shade and tint colors as well as the contrasting colors depending on how dark or light a color is. So to create a new theme, you just need to choose 5 or 6 colors and then call the method on the service, and everything will update on the fly. So I've defined 3 different themes on this object. Then I'm gonna go down here and inject the theme service in the constructor. And we'll have our service provide 2 main methods. The first one is setTheme, which will update all of the global variables. So it's expecting a big string with a whole bunch of different variables to find on it. The service will also expose a second method called Set variable, which will create or update a single global variable. At the end of the video, we'll set a speed variable, then we'll have that control the speed of the Spinner that you saw in the UI earlier. So really simple usage in a component. Now let's go ahead and write out the service that makes all this possible. The first thing we'll do is generate the service file by running Ionic generate service theme. After that, we'll install a package called color from npm. This is just a little utility library that allows you to lighten and darken colors. It's going to come in very useful later on when we need to create different shades intensive colors to generate a fully fledged theme. To override all the global variables, we'll need to create a string that has all of the existing Ionic variables was in it. I'm going to write this code in the service but just as a pure function called CSS Text Generator. It takes an object of colors and then returns a big long string of CSS with all of the global variables in it. 1st, we'll go ahead and import the color library. Then one of the most difficult things about This is determining the correct contrast for a color. So for that, I'm gonna write out a helper function that will determine if a color is light or dark, Then we'll lighten or darken it by a certain amount. So if we have a dark button, it will have light text and vice versa. In other words, if a color is dark, then its contrast should be lighter. Otherwise, it should be darker. The next thing I'm going to do is just define a set of default colors. These are actually just the defaults that you'll find in Ionic. The reason I'm setting these defaults is that I don't want a global variable to be undefined. So the user can just pass in one color and then it'll use the defaults for everything else. So we can compose the defaults together with whatever the User passes into this function by using the spread syntax with the defaults followed by the colors argument. Then to keep our code nice and clean, I'm also going to Structure this object. This just defines every object property as its own variable name. So we can then call it in the code without having to do colors dot primary, colors secondary and so on. And I'll also set up specific variables for the tint and the shade so you can tweak those as you feel necessary. Now we can use a template literal in JavaScript to define the CSS string. Basically, we're just mirroring the CSS variables that we looked at earlier in the theme directory. But we'll create all of the values dynamically based on the user input plus whatever logic we want to define in This is by no means a perfect theme generator. I'm just adjusting certain values based on how I think they should look in the UI. So, for example, I'm adding some additional contrast in places. Then for every major color in Ionic, like primary, success, warning, cetera, there's a shade color and a tint color. To create those colors, I'm just taking the base color and then making it a little bit darker and a little bit lighter. There's kind of a lot of duplication here, and you could definitely make this more efficient. But you could also just copy and paste the work that I did from the main article. So that handles all the logic for generating the colors and the CSS styles. Now we need to actually apply them to the DOM. This is the part where we write the actual Angular service, and we'll need to import inject as well as the document from Angular common. What we'll actually do is grab the root element from the document and update the global CSS variables that exist there. And you can access the DOM in Angular by injecting this document constant here. And then we'll strong type that as a document. If you remember from earlier when I showed you the component, we have 2 main methods. 1 is to set the entire global theme and the other one is to set an individual variable. So this method will expect an object of colors. And then we'll take that object and pass it to our CSS text generator method that we just defined. Then I have another private method that we'll define in a second here called set Global CSS, which will take care of the actual DOM update. Then to set an individual variable, we'll create another method here called set variable, and it's going to expect the name of the variable as well as the value. Then to make the actual update on the DOM, we will first get the root element by calling this document document element. Then we'll grab its styles and we'll say set property with the arguments passed into this method. And that's really all it takes to update a global CSS variable with plain JavaScript. But obviously throughout this demo, we're updating more than just one variable. So to update a whole bunch of variables at once, We can pass in a full CSS string. Making that update on the DOM is pretty much the same process. But instead of saying set property on style, We'll just go ahead and say CSS text and make that equal to whatever CSS string we pass in here. And that's all there is to the service. We can now bind these methods to any component, button, or whatever and it's going to update the entire global theme throughout the application. Now the last thing I wanna show you is how we can use CSS to animate this SVG graphic. You can just grab any SVG graphic off the Internet. And if you open it up in Versus Code, you'll see that it looks very similar to HTML. If you use this SVG graphic in your HTML, you can actually just Inline your CSS variables to control the fill and stroke colors in the graphic. It's kind of hard to see, but I'm replacing the hex color with var and the name of our global variable. And now the colors of this graphic will update dynamically whenever this global variable changes. So I've already updated all the values, and then I'm taking this SVG code and pasting it directly in the HTML in my Homepage component. You'll also notice that I've added a class of spin to the SVG itself, so make sure to add that as well. Then we'll go ahead and create the easiest animation ever, which is just a simple rotation. We can go ahead and set up some key frames that animate to a rotation of 360 degrees. Then the interesting part is when you define the animation parameters itself, you can set up variables here for each one of the properties. In this case, we'll only set a variable for the actual speed, but you could really set up a variable for anything here. So currently, that Speed variable is undefined. But our service can set individual variables, so all we have to do is call that method we defined on the service and it will update the speed to whatever we want. That's exactly what I'm doing in the component, and we'll do one that changes the speed to 2,000 milliseconds and another to 500 milliseconds. And that takes care of that. You now have a dynamically animated SVG graphic in your Ionic app. The one thing I didn't show you is how to use Ionic storage to have the theme be maintained between sessions. So if the user refreshes the browser window or if close the app on their mobile device and come back later. The same theme will be displayed. This is actually a super easy final touch that I wanna show you here. So first install the Ionic storage library. You can look at the official docs for that. Then you can inject the storage service in the constructor. When the app is first loaded, we're going to look in our local storage to see if there's an existing theme saved. If so, we'll go ahead and set that as the global CSS theme for this user. But otherwise, they'll just get the default values. Then whenever the theme changes, we'll want to set that as the value in storage. We can just add that logic to our SetTheme method. And whenever the theme changes, we'll call storage set with the new theme data. And you now have a pretty powerful theme controller that works on all platforms and is 100% based on CSS variables. I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe. And if you want to take your Ionic development to the next level, consider becoming apromember@angularfirebase.com. And don't forget to leave me a comment about what you wanna see in the upcoming Ionic 4 course. Thanks for watching, and I'll talk to you soon.
1
1
One
one
of
of
the
the
coolest
coolest
things
things
about
about
Ionic
ionic
4
4
is
is
that
that
it
it
uses
uses
CSS
css
variables.
variables
Over
over
the
the
next
next
few
few
minutes,
minutes
you'll
you'll
learn
learn
everything
everything
you
you
need
need
to
to
know
know
about
about
CSS
css
variables,
variables
how
how
they're
they're
used
used
in
in
Ionic,
ionic
and
and
we'll
we'll
build
build
this
this
dynamic
dynamic
theme
theme
generator
generator
from
from
scratch
scratch
that
that
allows
allows
users
users
to
to
change
change
the
the
colors
colors
on
on
the
the
fly
fly
and
and
also
also
change
change
the
the
behavior
behavior
of
of
CSS
css
animations.
animations
If
if
you're
you're
new
new
here
here
like
like
and
and
subscribe,
subscribe
and
and
I
i
also
also
wanna
wanna
let
let
everybody
everybody
know
know
that
that
I'm
i'm
working
working
on
on
a
a
brand
brand
new
new
course
course
for
for
Ionic
ionic
4
4
and
and
Firebase
firebase
from
from
scratch.
scratch
If
if
there's
there's
anything
anything
you
you
wanna
wanna
see
see
in
in
that
that
course
course
leave
leave
me
me
a
a
comment
comment
below
below
and
and
it
it
will
will
cover
cover
some
some
pretty
pretty
advanced
advanced
concepts
concepts
that
that
you
you
won't
won't
see
see
anywhere
anywhere
else,
else
and
and
it'll
it'll
be
be
free
free
to
to
all
all
Pro
pro
members
members
when
when
it
it
comes
comes
out
out
in
in
the
the
next
next
week
week
or
or
2.
2
The
the
thing
thing
that
that
makes
makes
CSS
css
variables
variables
special
special
as
as
opposed
opposed
to
to
variables
variables
in
in
Sass
sass
or
or
less
less
is
is
that
that
they
they
can
can
be
be
interpreted
interpreted
by
by
the
the
browser
browser
on
on
the
the
fly.
fly
So
so
that
that
means
means
we
we
can
can
use
use
JavaScript
javascript
to
to
change
change
global
global
CSS
css
variables
variables
and
and
get
get
different
different
styling
styling
in
in
the
the
UI.
ui
As
as
you
you
can
can
see
see
here,
here
when
when
I
i
click
click
a
a
button,
button
we
we
get
get
an
an
entirely
entirely
theme
theme
with
with
different
different
shade
shade
colors
colors
for
for
all
all
the
the
different
different
components
components
in
in
the
the
app.
app
So
so
let's
let's
go
go
ahead
ahead
and
and
start
start
with
with
the
the
absolute
absolute
basics
basics
and
and
just
just
look
look
at
at
what
what
CSS
css
variables
variables
are.
are
I
i
have
have
generated
generated
a
a
new
new
Ionic
ionic
4
4
app
app
and
and
then
then
I
i
have
have
it
it
opened
opened
here
here
in
in
Versus
versus
Code.
code
You'll
you'll
notice
notice
a
a
theme
theme
directory
directory
inside
inside
the
the
source
source
directory
directory
that
that
has
has
all
all
of
of
our
our
global
global
CSS
css
variables.
variables
You'll
you'll
notice
notice
that
that
they're
they're
defined
defined
with
with
this
this
root
root
selector.
selector
That
that
just
just
gives
gives
them
them
a
a
global
global
scope,
scope
meaning
meaning
that
that
all
all
elements
elements
in
in
the
the
DOM
dom
can
can
use
use
them,
them
including
including
any
any
web
web
components
components
that
that
also
also
use
use
the
the
shadow
shadow
In
in
Ionic
ionic
4,
4
all
all
of
of
the
the
components
components
are
are
just
just
web
web
components
components
that
that
use
use
the
the
Shadow
shadow
DOM.
dom
So
so
global
global
variables
variables
like
like
this
this
are
are
a
a
really
really
easy
easy
way
way
to
to
style
style
them.
them
But
but
it's
it's
really
really
important
important
that
that
you
you
understand
understand
that
that
variables
variables
like
like
this
this
can
can
cascade
cascade
just
just
like
like
normal
normal
CSS
css
styles.
styles
So
so
let's
let's
imagine
imagine
we
we
define
define
a
a
global
global
CSS
css
variable
variable
inside
inside
of
of
a
a
button
button
instead
instead
of
of
the
the
root.
root
In
in
this
this
case,
case
we're
we're
overriding
overriding
the
the
ion
ion
color
color
primary
primary
variable.
variable
Now
now
the
the
button
button
and
and
all
all
of
of
its
its
children
children
elements
elements
will
will
inherit
inherit
the
the
red
red
color,
color
but
but
everything
everything
else
else
that's
that's
not
not
a
a
button
button
or
or
a
a
child
child
of
of
a
a
button
button
will
will
still
still
inherit
inherit
the
the
global
global
one
one
that
that
we
we
set
set
on
on
the
the
root.
root
So
so
that's
that's
just
just
something
something
to
to
keep
keep
in
in
mind.
mind
Then
then
to
to
actually
actually
use
use
a
a
variable,
variable
we
we
just
just
use
use
the
the
var
var
keyword
keyword
and
and
then
then
pass
pass
in
in
the
the
variable
variable
name
name
itself.
itself
So,
so
overall,
overall
they're
they're
very
very
simple
simple
and
and
should
should
feel
feel
very
very
intuitive
intuitive
if
if
you're
you're
already
already
familiar
familiar
with
with
CSS.
css
A
a
really
really
common
common
use
use
case
case
is
is
to
to
allow
allow
your
your
users
users
to
to
switch
switch
between
between
a
a
light
light
theme
theme
and
and
a
a
dark
dark
theme.
theme
For
for
example,
example
here
here
I'm
i'm
on
on
Alligator
alligator
IO.
io
And
and
when
when
we
we
switch
switch
to
to
the
the
dark
dark
theme,
theme
you'll
you'll
see
see
we
we
have
have
all
all
these
these
different
different
CSS
css
variables
variables
that
that
completely
completely
redefine
redefine
the
the
way
way
the
the
UI
ui
looks.
looks
And
and
that's
that's
exactly
exactly
what
what
I
i
wanna
wanna
show
show
you
you
how
how
to
to
build
build
in
in
Ionic
ionic
4.
4
And
and
we'll
we'll
even
even
take
take
things
things
a
a
step
step
further
further
to
to
dynamically
dynamically
color
color
an
an
SVG
svg
graphic
graphic
and
and
will
will
also
also
allow
allow
the
the
user
user
to
to
control
control
the
the
speed
speed
of
of
its
its
animation
animation
spin.
spin
But
but
before
before
we
we
do
do
that,
that
if
if
you're
you're
not
not
a
a
designer,
designer
I
i
wanna
wanna
point
point
out
out
that
that
there's
there's
a
a
color
color
generator
generator
in
in
the
the
Ionic
ionic
docs
docs
that
that
allows
allows
you
you
to
to
update
update
and
and
preview
preview
the
the
changes
changes
to
to
global
global
CSS
css
variables.
variables
So
so
this
this
can
can
be
be
really
really
handy
handy
for
for
setting
setting
some
some
default
default
values.
values
But
but
if
if
you're
you're
not
not
really
really
good
good
at
at
creating
creating
a
a
color
color
palette,
palette
I
i
recommend
recommend
checking
checking
out
out
colors.c0.
colors.c0
This
this
is
is
a
a
web
web
app
app
that
that
allows
allows
you
you
to
to
just
just
mash
mash
the
the
space
space
bar
bar
until
until
you
you
find
find
a
a
color
color
palette
palette
that
that
you
you
like.
like
But
but
you
you
can
can
even
even
create
create
color
color
palettes
palettes
that
that
are
are
suitable
suitable
for
for
color
color
blindness,
blindness
create
create
a
a
color
color
palette
palette
from
from
an
an
image,
image
and
and
a
a
whole
whole
bunch
bunch
of
of
other
other
useful
useful
little
little
things.
things
Now
now
getting
getting
to
to
the
the
code,
code
we'll
we'll
actually
actually
build
build
this
this
feature
feature
by
by
using
using
an
an
Angular
angular
service
service
that
that
I
i
can
can
update
update
the
the
global
global
CSS
css
variables.
variables
But,
but
first,
first
I
i
wanna
wanna
show
show
you
you
how
how
it
it
actually
actually
looks
looks
being
being
used
used
in
in
a
a
component.
component
To
to
update
update
the
the
global
global
theme,
theme
It
it
will
will
expect
expect
an
an
object
object
with
with
various
various
colors
colors
on
on
them.
them
Then
then
we'll
we'll
write
write
some
some
code
code
to
to
automatically
automatically
generate
generate
the
the
shade
shade
and
and
tint
tint
colors
colors
as
as
well
well
as
as
the
the
contrasting
contrasting
colors
colors
depending
depending
on
on
how
how
dark
dark
or
or
light
light
a
a
color
color
is.
is
So
so
to
to
create
create
a
a
new
new
theme,
theme
you
you
just
just
need
need
to
to
choose
choose
5
5
or
or
6
6
colors
colors
and
and
then
then
call
call
the
the
method
method
on
on
the
the
service,
service
and
and
everything
everything
will
will
update
update
on
on
the
the
fly.
fly
So
so
I've
i've
defined
defined
3
3
different
different
themes
themes
on
on
this
this
object.
object
Then
then
I'm
i'm
gonna
gonna
go
go
down
down
here
here
and
and
inject
inject
the
the
theme
theme
service
service
in
in
the
the
constructor.
constructor
And
and
we'll
we'll
have
have
our
our
service
service
provide
provide
2
2
main
main
methods.
methods
The
the
first
first
one
one
is
is
setTheme,
settheme
which
which
will
will
update
update
all
all
of
of
the
the
global
global
variables.
variables
So
so
it's
it's
expecting
expecting
a
a
big
big
string
string
with
with
a
a
whole
whole
bunch
bunch
of
of
different
different
variables
variables
to
to
find
find
on
on
it.
it
The
the
service
service
will
will
also
also
expose
expose
a
a
second
second
method
method
called
called
Set
set
variable,
variable
which
which
will
will
create
create
or
or
update
update
a
a
single
single
global
global
variable.
variable
At
at
the
the
end
end
of
of
the
the
video,
video
we'll
we'll
set
set
a
a
speed
speed
variable,
variable
then
then
we'll
we'll
have
have
that
that
control
control
the
the
speed
speed
of
of
the
the
Spinner
spinner
that
that
you
you
saw
saw
in
in
the
the
UI
ui
earlier.
earlier
So
so
really
really
simple
simple
usage
usage
in
in
a
a
component.
component
Now
now
let's
let's
go
go
ahead
ahead
and
and
write
write
out
out
the
the
service
service
that
that
makes
makes
all
all
this
this
possible.
possible
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
generate
generate
the
the
service
service
file
file
by
by
running
running
Ionic
ionic
generate
generate
service
service
theme.
theme
After
after
that,
that
we'll
we'll
install
install
a
a
package
package
called
called
color
color
from
from
npm.
npm
This
this
is
is
just
just
a
a
little
little
utility
utility
library
library
that
that
allows
allows
you
you
to
to
lighten
lighten
and
and
darken
darken
colors.
colors
It's
it's
going
going
to
to
come
come
in
in
very
very
useful
useful
later
later
on
on
when
when
we
we
need
need
to
to
create
create
different
different
shades
shades
intensive
intensive
colors
colors
to
to
generate
generate
a
a
fully
fully
fledged
fledged
theme.
theme
To
to
override
override
all
all
the
the
global
global
variables,
variables
we'll
we'll
need
need
to
to
create
create
a
a
string
string
that
that
has
has
all
all
of
of
the
the
existing
existing
Ionic
ionic
variables
variables
was
was
in
in
it.
it
I'm
i'm
going
going
to
to
write
write
this
this
code
code
in
in
the
the
service
service
but
but
just
just
as
as
a
a
pure
pure
function
function
called
called
CSS
css
Text
text
Generator.
generator
It
it
takes
takes
an
an
object
object
of
of
colors
colors
and
and
then
then
returns
returns
a
a
big
big
long
long
string
string
of
of
CSS
css
with
with
all
all
of
of
the
the
global
global
variables
variables
in
in
it.
it
1st,
1st
we'll
we'll
go
go
ahead
ahead
and
and
import
import
the
the
color
color
library.
library
Then
then
one
one
of
of
the
the
most
most
difficult
difficult
things
things
about
about
This
this
is
is
determining
determining
the
the
correct
correct
contrast
contrast
for
for
a
a
color.
color
So
so
for
for
that,
that
I'm
i'm
gonna
gonna
write
write
out
out
a
a
helper
helper
function
function
that
that
will
will
determine
determine
if
if
a
a
color
color
is
is
light
light
or
or
dark,
dark
Then
then
we'll
we'll
lighten
lighten
or
or
darken
darken
it
it
by
by
a
a
certain
certain
amount.
amount
So
so
if
if
we
we
have
have
a
a
dark
dark
button,
button
it
it
will
will
have
have
light
light
text
text
and
and
vice
vice
versa.
versa
In
in
other
other
words,
words
if
if
a
a
color
color
is
is
dark,
dark
then
then
its
its
contrast
contrast
should
should
be
be
lighter.
lighter
Otherwise,
otherwise
it
it
should
should
be
be
darker.
darker
The
the
next
next
thing
thing
I'm
i'm
going
going
to
to
do
do
is
is
just
just
define
define
a
a
set
set
of
of
default
default
colors.
colors
These
these
are
are
actually
actually
just
just
the
the
defaults
defaults
that
that
you'll
you'll
find
find
in
in
Ionic.
ionic
The
the
reason
reason
I'm
i'm
setting
setting
these
these
defaults
defaults
is
is
that
that
I
i
don't
don't
want
want
a
a
global
global
variable
variable
to
to
be
be
undefined.
undefined
So
so
the
the
user
user
can
can
just
just
pass
pass
in
in
one
one
color
color
and
and
then
then
it'll
it'll
use
use
the
the
defaults
defaults
for
for
everything
everything
else.
else
So
so
we
we
can
can
compose
compose
the
the
defaults
defaults
together
together
with
with
whatever
whatever
the
the
User
user
passes
passes
into
into
this
this
function
function
by
by
using
using
the
the
spread
spread
syntax
syntax
with
with
the
the
defaults
defaults
followed
followed
by
by
the
the
colors
colors
argument.
argument
Then
then
to
to
keep
keep
our
our
code
code
nice
nice
and
and
clean,
clean
I'm
i'm
also
also
going
going
to
to
Structure
structure
this
this
object.
object
This
this
just
just
defines
defines
every
every
object
object
property
property
as
as
its
its
own
own
variable
variable
name.
name
So
so
we
we
can
can
then
then
call
call
it
it
in
in
the
the
code
code
without
without
having
having
to
to
do
do
colors
colors
dot
dot
primary,
primary
colors
colors
secondary
secondary
and
and
so
so
on.
on
And
and
I'll
i'll
also
also
set
set
up
up
specific
specific
variables
variables
for
for
the
the
tint
tint
and
and
the
the
shade
shade
so
so
you
you
can
can
tweak
tweak
those
those
as
as
you
you
feel
feel
necessary.
necessary
Now
now
we
we
can
can
use
use
a
a
template
template
literal
literal
in
in
JavaScript
javascript
to
to
define
define
the
the
CSS
css
string.
string
Basically,
basically
we're
we're
just
just
mirroring
mirroring
the
the
CSS
css
variables
variables
that
that
we
we
looked
looked
at
at
earlier
earlier
in
in
the
the
theme
theme
directory.
directory
But
but
we'll
we'll
create
create
all
all
of
of
the
the
values
values
dynamically
dynamically
based
based
on
on
the
the
user
user
input
input
plus
plus
whatever
whatever
logic
logic
we
we
want
want
to
to
define
define
in
in
This
this
is
is
by
by
no
no
means
means
a
a
perfect
perfect
theme
theme
generator.
generator
I'm
i'm
just
just
adjusting
adjusting
certain
certain
values
values
based
based
on
on
how
how
I
i
think
think
they
they
should
should
look
look
in
in
the
the
UI.
ui
So,
so
for
for
example,
example
I'm
i'm
adding
adding
some
some
additional
additional
contrast
contrast
in
in
places.
places
Then
then
for
for
every
every
major
major
color
color
in
in
Ionic,
ionic
like
like
primary,
primary
success,
success
warning,
warning
cetera,
cetera
there's
there's
a
a
shade
shade
color
color
and
and
a
a
tint
tint
color.
color
To
to
create
create
those
those
colors,
colors
I'm
i'm
just
just
taking
taking
the
the
base
base
color
color
and
and
then
then
making
making
it
it
a
a
little
little
bit
bit
darker
darker
and
and
a
a
little
little
bit
bit
lighter.
lighter
There's
there's
kind
kind
of
of
a
a
lot
lot
of
of
duplication
duplication
here,
here
and
and
you
you
could
could
definitely
definitely
make
make
this
this
more
more
efficient.
efficient
But
but
you
you
could
could
also
also
just
just
copy
copy
and
and
paste
paste
the
the
work
work
that
that
I
i
did
did
from
from
the
the
main
main
article.
article
So
so
that
that
handles
handles
all
all
the
the
logic
logic
for
for
generating
generating
the
the
colors
colors
and
and
the
the
CSS
css
styles.
styles
Now
now
we
we
need
need
to
to
actually
actually
apply
apply
them
them
to
to
the
the
DOM.
dom
This
this
is
is
the
the
part
part
where
where
we
we
write
write
the
the
actual
actual
Angular
angular
service,
service
and
and
we'll
we'll
need
need
to
to
import
import
inject
inject
as
as
well
well
as
as
the
the
document
document
from
from
Angular
angular
common.
common
What
what
we'll
we'll
actually
actually
do
do
is
is
grab
grab
the
the
root
root
element
element
from
from
the
the
document
document
and
and
update
update
the
the
global
global
CSS
css
variables
variables
that
that
exist
exist
there.
there
And
and
you
you
can
can
access
access
the
the
DOM
dom
in
in
Angular
angular
by
by
injecting
injecting
this
this
document
document
constant
constant
here.
here
And
and
then
then
we'll
we'll
strong
strong
type
type
that
that
as
as
a
a
document.
document
If
if
you
you
remember
remember
from
from
earlier
earlier
when
when
I
i
showed
showed
you
you
the
the
component,
component
we
we
have
have
2
2
main
main
methods.
methods
1
1
is
is
to
to
set
set
the
the
entire
entire
global
global
theme
theme
and
and
the
the
other
other
one
one
is
is
to
to
set
set
an
an
individual
individual
variable.
variable
So
so
this
this
method
method
will
will
expect
expect
an
an
object
object
of
of
colors.
colors
And
and
then
then
we'll
we'll
take
take
that
that
object
object
and
and
pass
pass
it
it
to
to
our
our
CSS
css
text
text
generator
generator
method
method
that
that
we
we
just
just
defined.
defined
Then
then
I
i
have
have
another
another
private
private
method
method
that
that
we'll
we'll
define
define
in
in
a
a
second
second
here
here
called
called
set
set
Global
global
CSS,
css
which
which
will
will
take
take
care
care
of
of
the
the
actual
actual
DOM
dom
update.
update
Then
then
to
to
set
set
an
an
individual
individual
variable,
variable
we'll
we'll
create
create
another
another
method
method
here
here
called
called
set
set
variable,
variable
and
and
it's
it's
going
going
to
to
expect
expect
the
the
name
name
of
of
the
the
variable
variable
as
as
well
well
as
as
the
the
value.
value
Then
then
to
to
make
make
the
the
actual
actual
update
update
on
on
the
the
DOM,
dom
we
we
will
will
first
first
get
get
the
the
root
root
element
element
by
by
calling
calling
this
this
document
document
document
document
element.
element
Then
then
we'll
we'll
grab
grab
its
its
styles
styles
and
and
we'll
we'll
say
say
set
set
property
property
with
with
the
the
arguments
arguments
passed
passed
into
into
this
this
method.
method
And
and
that's
that's
really
really
all
all
it
it
takes
takes
to
to
update
update
a
a
global
global
CSS
css
variable
variable
with
with
plain
plain
JavaScript.
javascript
But
but
obviously
obviously
throughout
throughout
this
this
demo,
demo
we're
we're
updating
updating
more
more
than
than
just
just
one
one
variable.
variable
So
so
to
to
update
update
a
a
whole
whole
bunch
bunch
of
of
variables
variables
at
at
once,
once
We
we
can
can
pass
pass
in
in
a
a
full
full
CSS
css
string.
string
Making
making
that
that
update
update
on
on
the
the
DOM
dom
is
is
pretty
pretty
much
much
the
the
same
same
process.
process
But
but
instead
instead
of
of
saying
saying
set
set
property
property
on
on
style,
style
We'll
we'll
just
just
go
go
ahead
ahead
and
and
say
say
CSS
css
text
text
and
and
make
make
that
that
equal
equal
to
to
whatever
whatever
CSS
css
string
string
we
we
pass
pass
in
in
here.
here
And
and
that's
that's
all
all
there
there
is
is
to
to
the
the
service.
service
We
we
can
can
now
now
bind
bind
these
these
methods
methods
to
to
any
any
component,
component
button,
button
or
or
whatever
whatever
and
and
it's
it's
going
going
to
to
update
update
the
the
entire
entire
global
global
theme
theme
throughout
throughout
the
the
application.
application
Now
now
the
the
last
last
thing
thing
I
i
wanna
wanna
show
show
you
you
is
is
how
how
we
we
can
can
use
use
CSS
css
to
to
animate
animate
this
this
SVG
svg
graphic.
graphic
You
you
can
can
just
just
grab
grab
any
any
SVG
svg
graphic
graphic
off
off
the
the
Internet.
internet
And
and
if
if
you
you
open
open
it
it
up
up
in
in
Versus
versus
Code,
code
you'll
you'll
see
see
that
that
it
it
looks
looks
very
very
similar
similar
to
to
HTML.
html
If
if
you
you
use
use
this
this
SVG
svg
graphic
graphic
in
in
your
your
HTML,
html
you
you
can
can
actually
actually
just
just
Inline
inline
your
your
CSS
css
variables
variables
to
to
control
control
the
the
fill
fill
and
and
stroke
stroke
colors
colors
in
in
the
the
graphic.
graphic
It's
it's
kind
kind
of
of
hard
hard
to
to
see,
see
but
but
I'm
i'm
replacing
replacing
the
the
hex
hex
color
color
with
with
var
var
and
and
the
the
name
name
of
of
our
our
global
global
variable.
variable
And
and
now
now
the
the
colors
colors
of
of
this
this
graphic
graphic
will
will
update
update
dynamically
dynamically
whenever
whenever
this
this
global
global
variable
variable
changes.
changes
So
so
I've
i've
already
already
updated
updated
all
all
the
the
values,
values
and
and
then
then
I'm
i'm
taking
taking
this
this
SVG
svg
code
code
and
and
pasting
pasting
it
it
directly
directly
in
in
the
the
HTML
html
in
in
my
my
Homepage
homepage
component.
component
You'll
you'll
also
also
notice
notice
that
that
I've
i've
added
added
a
a
class
class
of
of
spin
spin
to
to
the
the
SVG
svg
itself,
itself
so
so
make
make
sure
sure
to
to
add
add
that
that
as
as
well.
well
Then
then
we'll
we'll
go
go
ahead
ahead
and
and
create
create
the
the
easiest
easiest
animation
animation
ever,
ever
which
which
is
is
just
just
a
a
simple
simple
rotation.
rotation
We
we
can
can
go
go
ahead
ahead
and
and
set
set
up
up
some
some
key
key
frames
frames
that
that
animate
animate
to
to
a
a
rotation
rotation
of
of
360
360
degrees.
degrees
Then
then
the
the
interesting
interesting
part
part
is
is
when
when
you
you
define
define
the
the
animation
animation
parameters
parameters
itself,
itself
you
you
can
can
set
set
up
up
variables
variables
here
here
for
for
each
each
one
one
of
of
the
the
properties.
properties
In
in
this
this
case,
case
we'll
we'll
only
only
set
set
a
a
variable
variable
for
for
the
the
actual
actual
speed,
speed
but
but
you
you
could
could
really
really
set
set
up
up
a
a
variable
variable
for
for
anything
anything
here.
here
So
so
currently,
currently
that
that
Speed
speed
variable
variable
is
is
undefined.
undefined
But
but
our
our
service
service
can
can
set
set
individual
individual
variables,
variables
so
so
all
all
we
we
have
have
to
to
do
do
is
is
call
call
that
that
method
method
we
we
defined
defined
on
on
the
the
service
service
and
and
it
it
will
will
update
update
the
the
speed
speed
to
to
whatever
whatever
we
we
want.
want
That's
that's
exactly
exactly
what
what
I'm
i'm
doing
doing
in
in
the
the
component,
component
and
and
we'll
we'll
do
do
one
one
that
that
changes
changes
the
the
speed
speed
to
to
2,000
2,000
milliseconds
milliseconds
and
and
another
another
to
to
500
500
milliseconds.
milliseconds
And
and
that
that
takes
takes
care
care
of
of
that.
that
You
you
now
now
have
have
a
a
dynamically
dynamically
animated
animated
SVG
svg
graphic
graphic
in
in
your
your
Ionic
ionic
app.
app
The
the
one
one
thing
thing
I
i
didn't
didn't
show
show
you
you
is
is
how
how
to
to
use
use
Ionic
ionic
storage
storage
to
to
have
have
the
the
theme
theme
be
be
maintained
maintained
between
between
sessions.
sessions
So
so
if
if
the
the
user
user
refreshes
refreshes
the
the
browser
browser
window
window
or
or
if
if
close
close
the
the
app
app
on
on
their
their
mobile
mobile
device
device
and
and
come
come
back
back
later.
later
The
the
same
same
theme
theme
will
will
be
be
displayed.
displayed
This
this
is
is
actually
actually
a
a
super
super
easy
easy
final
final
touch
touch
that
that
I
i
wanna
wanna
show
show
you
you
here.
here
So
so
first
first
install
install
the
the
Ionic
ionic
storage
storage
library.
library
You
you
can
can
look
look
at
at
the
the
official
official
docs
docs
for
for
that.
that
Then
then
you
you
can
can
inject
inject
the
the
storage
storage
service
service
in
in
the
the
constructor.
constructor
When
when
the
the
app
app
is
is
first
first
loaded,
loaded
we're
we're
going
going
to
to
look
look
in
in
our
our
local
local
storage
storage
to
to
see
see
if
if
there's
there's
an
an
existing
existing
theme
theme
saved.
saved
If
if
so,
so
we'll
we'll
go
go
ahead
ahead
and
and
set
set
that
that
as
as
the
the
global
global
CSS
css
theme
theme
for
for
this
this
user.
user
But
but
otherwise,
otherwise
they'll
they'll
just
just
get
get
the
the
default
default
values.
values
Then
then
whenever
whenever
the
the
theme
theme
changes,
changes
we'll
we'll
want
want
to
to
set
set
that
that
as
as
the
the
value
value
in
in
storage.
storage
We
we
can
can
just
just
add
add
that
that
logic
logic
to
to
our
our
SetTheme
settheme
method.
method
And
and
whenever
whenever
the
the
theme
theme
changes,
changes
we'll
we'll
call
call
storage
storage
set
set
with
with
the
the
new
new
theme
theme
data.
data
And
and
you
you
now
now
have
have
a
a
pretty
pretty
powerful
powerful
theme
theme
controller
controller
that
that
works
works
on
on
all
all
platforms
platforms
and
and
is
is
100%
100%
based
based
on
on
CSS
css
variables.
variables
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
to
to
take
take
your
your
Ionic
ionic
development
development
to
to
the
the
next
next
level,
level
consider
consider
becoming
becoming
apromember@angularfirebase.com.
apromember@angularfirebase.com
And
and
don't
don't
forget
forget
to
to
leave
leave
me
me
a
a
comment
comment
about
about
what
what
you
you
wanna
wanna
see
see
in
in
the
the
upcoming
upcoming
Ionic
ionic
4
4
course.
course
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss how to use Ionic 4 variables and use them in the app, as well as how to update them. They also explain how to use a color generator in Ionic to create a fully-Financialreged theme and how to update multiple variables and default colors. They stress the importance of updating multiple variables and use the CSS function to update them. Finally, they show how to create a theme by using the Ionic app and remind viewers to leave comments and subscribe to their channel.
Ionic 4 Theme Builder with CSS Variables
1 One of the coolest things about Ionic 4 is that it uses CSS variables. Over the next few minutes, you'll learn everything you need to know about CSS variables, how they're used in Ionic, and we'll build this dynamic theme generator from scratch that allows users to change the colors on the fly and also change the behavior of CSS animations. If you're new here like and subscribe, and I also wanna let everybody know that I'm working on a brand new course for Ionic 4 and Firebase from scratch. If there's anything you wanna see in that course leave me a comment below and it will cover some pretty advanced concepts that you won't see anywhere else, and it'll be free to all Pro members when it comes out in the next week or 2. The thing that makes CSS variables special as opposed to variables in Sass or less is that they can be interpreted by the browser on the fly. So that means we can use JavaScript to change global CSS variables and get different styling in the UI. As you can see here, when I click a button, we get an entirely theme with different shade colors for all the different components in the app. So let's go ahead and start with the absolute basics and just look at what CSS variables are. I have generated a new Ionic 4 app and then I have it opened here in Versus Code. You'll notice a theme directory inside the source directory that has all of our global CSS variables. You'll notice that they're defined with this root selector. That just gives them a global scope, meaning that all elements in the DOM can use them, including any web components that also use the shadow In Ionic 4, all of the components are just web components that use the Shadow DOM. So global variables like this are a really easy way to style them. But it's really important that you understand that variables like this can cascade just like normal CSS styles. So let's imagine we define a global CSS variable inside of a button instead of the root. In this case, we're overriding the ion color primary variable. Now the button and all of its children elements will inherit the red color, but everything else that's not a button or a child of a button will still inherit the global one that we set on the root. So that's just something to keep in mind. Then to actually use a variable, we just use the var keyword and then pass in the variable name itself. So, overall, they're very simple and should feel very intuitive if you're already familiar with CSS. A really common use case is to allow your users to switch between a light theme and a dark theme. For example, here I'm on Alligator IO. And when we switch to the dark theme, you'll see we have all these different CSS variables that completely redefine the way the UI looks. And that's exactly what I wanna show you how to build in Ionic 4. And we'll even take things a step further to dynamically color an SVG graphic and will also allow the user to control the speed of its animation spin. But before we do that, if you're not a designer, I wanna point out that there's a color generator in the Ionic docs that allows you to update and preview the changes to global CSS variables. So this can be really handy for setting some default values. But if you're not really good at creating a color palette, I recommend checking out colors.c0. This is a web app that allows you to just mash the space bar until you find a color palette that you like. But you can even create color palettes that are suitable for color blindness, create a color palette from an image, and a whole bunch of other useful little things. Now getting to the code, we'll actually build this feature by using an Angular service that I can update the global CSS variables. But, first, I wanna show you how it actually looks being used in a component. To update the global theme, It will expect an object with various colors on them. Then we'll write some code to automatically generate the shade and tint colors as well as the contrasting colors depending on how dark or light a color is. So to create a new theme, you just need to choose 5 or 6 colors and then call the method on the service, and everything will update on the fly. So I've defined 3 different themes on this object. Then I'm gonna go down here and inject the theme service in the constructor. And we'll have our service provide 2 main methods. The first one is setTheme, which will update all of the global variables. So it's expecting a big string with a whole bunch of different variables to find on it. The service will also expose a second method called Set variable, which will create or update a single global variable. At the end of the video, we'll set a speed variable, then we'll have that control the speed of the Spinner that you saw in the UI earlier. So really simple usage in a component. Now let's go ahead and write out the service that makes all this possible. The first thing we'll do is generate the service file by running Ionic generate service theme. After that, we'll install a package called color from npm. This is just a little utility library that allows you to lighten and darken colors. It's going to come in very useful later on when we need to create different shades intensive colors to generate a fully fledged theme. To override all the global variables, we'll need to create a string that has all of the existing Ionic variables was in it. I'm going to write this code in the service but just as a pure function called CSS Text Generator. It takes an object of colors and then returns a big long string of CSS with all of the global variables in it. 1st, we'll go ahead and import the color library. Then one of the most difficult things about This is determining the correct contrast for a color. So for that, I'm gonna write out a helper function that will determine if a color is light or dark, Then we'll lighten or darken it by a certain amount. So if we have a dark button, it will have light text and vice versa. In other words, if a color is dark, then its contrast should be lighter. Otherwise, it should be darker. The next thing I'm going to do is just define a set of default colors. These are actually just the defaults that you'll find in Ionic. The reason I'm setting these defaults is that I don't want a global variable to be undefined. So the user can just pass in one color and then it'll use the defaults for everything else. So we can compose the defaults together with whatever the User passes into this function by using the spread syntax with the defaults followed by the colors argument. Then to keep our code nice and clean, I'm also going to Structure this object. This just defines every object property as its own variable name. So we can then call it in the code without having to do colors dot primary, colors secondary and so on. And I'll also set up specific variables for the tint and the shade so you can tweak those as you feel necessary. Now we can use a template literal in JavaScript to define the CSS string. Basically, we're just mirroring the CSS variables that we looked at earlier in the theme directory. But we'll create all of the values dynamically based on the user input plus whatever logic we want to define in This is by no means a perfect theme generator. I'm just adjusting certain values based on how I think they should look in the UI. So, for example, I'm adding some additional contrast in places. Then for every major color in Ionic, like primary, success, warning, cetera, there's a shade color and a tint color. To create those colors, I'm just taking the base color and then making it a little bit darker and a little bit lighter. There's kind of a lot of duplication here, and you could definitely make this more efficient. But you could also just copy and paste the work that I did from the main article. So that handles all the logic for generating the colors and the CSS styles. Now we need to actually apply them to the DOM. This is the part where we write the actual Angular service, and we'll need to import inject as well as the document from Angular common. What we'll actually do is grab the root element from the document and update the global CSS variables that exist there. And you can access the DOM in Angular by injecting this document constant here. And then we'll strong type that as a document. If you remember from earlier when I showed you the component, we have 2 main methods. 1 is to set the entire global theme and the other one is to set an individual variable. So this method will expect an object of colors. And then we'll take that object and pass it to our CSS text generator method that we just defined. Then I have another private method that we'll define in a second here called set Global CSS, which will take care of the actual DOM update. Then to set an individual variable, we'll create another method here called set variable, and it's going to expect the name of the variable as well as the value. Then to make the actual update on the DOM, we will first get the root element by calling this document document element. Then we'll grab its styles and we'll say set property with the arguments passed into this method. And that's really all it takes to update a global CSS variable with plain JavaScript. But obviously throughout this demo, we're updating more than just one variable. So to update a whole bunch of variables at once, We can pass in a full CSS string. Making that update on the DOM is pretty much the same process. But instead of saying set property on style, We'll just go ahead and say CSS text and make that equal to whatever CSS string we pass in here. And that's all there is to the service. We can now bind these methods to any component, button, or whatever and it's going to update the entire global theme throughout the application. Now the last thing I wanna show you is how we can use CSS to animate this SVG graphic. You can just grab any SVG graphic off the Internet. And if you open it up in Versus Code, you'll see that it looks very similar to HTML. If you use this SVG graphic in your HTML, you can actually just Inline your CSS variables to control the fill and stroke colors in the graphic. It's kind of hard to see, but I'm replacing the hex color with var and the name of our global variable. And now the colors of this graphic will update dynamically whenever this global variable changes. So I've already updated all the values, and then I'm taking this SVG code and pasting it directly in the HTML in my Homepage component. You'll also notice that I've added a class of spin to the SVG itself, so make sure to add that as well. Then we'll go ahead and create the easiest animation ever, which is just a simple rotation. We can go ahead and set up some key frames that animate to a rotation of 360 degrees. Then the interesting part is when you define the animation parameters itself, you can set up variables here for each one of the properties. In this case, we'll only set a variable for the actual speed, but you could really set up a variable for anything here. So currently, that Speed variable is undefined. But our service can set individual variables, so all we have to do is call that method we defined on the service and it will update the speed to whatever we want. That's exactly what I'm doing in the component, and we'll do one that changes the speed to 2,000 milliseconds and another to 500 milliseconds. And that takes care of that. You now have a dynamically animated SVG graphic in your Ionic app. The one thing I didn't show you is how to use Ionic storage to have the theme be maintained between sessions. So if the user refreshes the browser window or if close the app on their mobile device and come back later. The same theme will be displayed. This is actually a super easy final touch that I wanna show you here. So first install the Ionic storage library. You can look at the official docs for that. Then you can inject the storage service in the constructor. When the app is first loaded, we're going to look in our local storage to see if there's an existing theme saved. If so, we'll go ahead and set that as the global CSS theme for this user. But otherwise, they'll just get the default values. Then whenever the theme changes, we'll want to set that as the value in storage. We can just add that logic to our SetTheme method. And whenever the theme changes, we'll call storage set with the new theme data. And you now have a pretty powerful theme controller that works on all platforms and is 100% based on CSS variables. I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe. And if you want to take your Ionic development to the next level, consider becoming apromember@angularfirebase.com. And don't forget to leave me a comment about what you wanna see in the upcoming Ionic 4 course. Thanks for watching, and I'll talk to you soon.
The speakers discuss how to use Ionic 4 variables and use them in the app, as well as how to update them. They also explain how to use a color generator in Ionic to create a fully-Financialreged theme and how to update multiple variables and default colors. They stress the importance of updating multiple variables and use the CSS function to update them. Finally, they show how to create a theme by using the Ionic app and remind viewers to leave comments and subscribe to their channel.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Ionic 4 Theme Builder with CSS Variables 
        and a small summary : The speakers discuss how to use Ionic 4 variables and use them in the app, as well as how to update them. They also explain how to use a color generator in Ionic to create a fully-Financialreged theme and how to update multiple variables and default colors. They stress the importance of updating multiple variables and use the CSS function to update them. Finally, they show how to create a theme by using the Ionic app and remind viewers to leave comments and subscribe to their channel.
        [/INST]
        
        Generate the video : 1 One of the coolest things about Ionic 4 is that it uses CSS variables. Over the next few minutes, you'll learn everything you need to know about CSS variables, how they're used in Ionic, and we'll build this dynamic theme generator from scratch that allows users to change the colors on the fly and also change the behavior of CSS animations. If you're new here like and subscribe, and I also wanna let everybody know that I'm working on a brand new course for Ionic 4 and Firebase from scratch. If there's anything you wanna see in that course leave me a comment below and it will cover some pretty advanced concepts that you won't see anywhere else, and it'll be free to all Pro members when it comes out in the next week or 2. The thing that makes CSS variables special as opposed to variables in Sass or less is that they can be interpreted by the browser on the fly. So that means we can use JavaScript to change global CSS variables and get different styling in the UI. As you can see here, when I click a button, we get an entirely theme with different shade colors for all the different components in the app. So let's go ahead and start with the absolute basics and just look at what CSS variables are. I have generated a new Ionic 4 app and then I have it opened here in Versus Code. You'll notice a theme directory inside the source directory that has all of our global CSS variables. You'll notice that they're defined with this root selector. That just gives them a global scope, meaning that all elements in the DOM can use them, including any web components that also use the shadow In Ionic 4, all of the components are just web components that use the Shadow DOM. So global variables like this are a really easy way to style them. But it's really important that you understand that variables like this can cascade just like normal CSS styles. So let's imagine we define a global CSS variable inside of a button instead of the root. In this case, we're overriding the ion color primary variable. Now the button and all of its children elements will inherit the red color, but everything else that's not a button or a child of a button will still inherit the global one that we set on the root. So that's just something to keep in mind. Then to actually use a variable, we just use the var keyword and then pass in the variable name itself. So, overall, they're very simple and should feel very intuitive if you're already familiar with CSS. A really common use case is to allow your users to switch between a light theme and a dark theme. For example, here I'm on Alligator IO. And when we switch to the dark theme, you'll see we have all these different CSS variables that completely redefine the way the UI looks. And that's exactly what I wanna show you how to build in Ionic 4. And we'll even take things a step further to dynamically color an SVG graphic and will also allow the user to control the speed of its animation spin. But before we do that, if you're not a designer, I wanna point out that there's a color generator in the Ionic docs that allows you to update and preview the changes to global CSS variables. So this can be really handy for setting some default values. But if you're not really good at creating a color palette, I recommend checking out colors.c0. This is a web app that allows you to just mash the space bar until you find a color palette that you like. But you can even create color palettes that are suitable for color blindness, create a color palette from an image, and a whole bunch of other useful little things. Now getting to the code, we'll actually build this feature by using an Angular service that I can update the global CSS variables. But, first, I wanna show you how it actually looks being used in a component. To update the global theme, It will expect an object with various colors on them. Then we'll write some code to automatically generate the shade and tint colors as well as the contrasting colors depending on how dark or light a color is. So to create a new theme, you just need to choose 5 or 6 colors and then call the method on the service, and everything will update on the fly. So I've defined 3 different themes on this object. Then I'm gonna go down here and inject the theme service in the constructor. And we'll have our service provide 2 main methods. The first one is setTheme, which will update all of the global variables. So it's expecting a big string with a whole bunch of different variables to find on it. The service will also expose a second method called Set variable, which will create or update a single global variable. At the end of the video, we'll set a speed variable, then we'll have that control the speed of the Spinner that you saw in the UI earlier. So really simple usage in a component. Now let's go ahead and write out the service that makes all this possible. The first thing we'll do is generate the service file by running Ionic generate service theme. After that, we'll install a package called color from npm. This is just a little utility library that allows you to lighten and darken colors. It's going to come in very useful later on when we need to create different shades intensive colors to generate a fully fledged theme. To override all the global variables, we'll need to create a string that has all of the existing Ionic variables was in it. I'm going to write this code in the service but just as a pure function called CSS Text Generator. It takes an object of colors and then returns a big long string of CSS with all of the global variables in it. 1st, we'll go ahead and import the color library. Then one of the most difficult things about This is determining the correct contrast for a color. So for that, I'm gonna write out a helper function that will determine if a color is light or dark, Then we'll lighten or darken it by a certain amount. So if we have a dark button, it will have light text and vice versa. In other words, if a color is dark, then its contrast should be lighter. Otherwise, it should be darker. The next thing I'm going to do is just define a set of default colors. These are actually just the defaults that you'll find in Ionic. The reason I'm setting these defaults is that I don't want a global variable to be undefined. So the user can just pass in one color and then it'll use the defaults for everything else. So we can compose the defaults together with whatever the User passes into this function by using the spread syntax with the defaults followed by the colors argument. Then to keep our code nice and clean, I'm also going to Structure this object. This just defines every object property as its own variable name. So we can then call it in the code without having to do colors dot primary, colors secondary and so on. And I'll also set up specific variables for the tint and the shade so you can tweak those as you feel necessary. Now we can use a template literal in JavaScript to define the CSS string. Basically, we're just mirroring the CSS variables that we looked at earlier in the theme directory. But we'll create all of the values dynamically based on the user input plus whatever logic we want to define in This is by no means a perfect theme generator. I'm just adjusting certain values based on how I think they should look in the UI. So, for example, I'm adding some additional contrast in places. Then for every major color in Ionic, like primary, success, warning, cetera, there's a shade color and a tint color. To create those colors, I'm just taking the base color and then making it a little bit darker and a little bit lighter. There's kind of a lot of duplication here, and you could definitely make this more efficient. But you could also just copy and paste the work that I did from the main article. So that handles all the logic for generating the colors and the CSS styles. Now we need to actually apply them to the DOM. This is the part where we write the actual Angular service, and we'll need to import inject as well as the document from Angular common. What we'll actually do is grab the root element from the document and update the global CSS variables that exist there. And you can access the DOM in Angular by injecting this document constant here. And then we'll strong type that as a document. If you remember from earlier when I showed you the component, we have 2 main methods. 1 is to set the entire global theme and the other one is to set an individual variable. So this method will expect an object of colors. And then we'll take that object and pass it to our CSS text generator method that we just defined. Then I have another private method that we'll define in a second here called set Global CSS, which will take care of the actual DOM update. Then to set an individual variable, we'll create another method here called set variable, and it's going to expect the name of the variable as well as the value. Then to make the actual update on the DOM, we will first get the root element by calling this document document element. Then we'll grab its styles and we'll say set property with the arguments passed into this method. And that's really all it takes to update a global CSS variable with plain JavaScript. But obviously throughout this demo, we're updating more than just one variable. So to update a whole bunch of variables at once, We can pass in a full CSS string. Making that update on the DOM is pretty much the same process. But instead of saying set property on style, We'll just go ahead and say CSS text and make that equal to whatever CSS string we pass in here. And that's all there is to the service. We can now bind these methods to any component, button, or whatever and it's going to update the entire global theme throughout the application. Now the last thing I wanna show you is how we can use CSS to animate this SVG graphic. You can just grab any SVG graphic off the Internet. And if you open it up in Versus Code, you'll see that it looks very similar to HTML. If you use this SVG graphic in your HTML, you can actually just Inline your CSS variables to control the fill and stroke colors in the graphic. It's kind of hard to see, but I'm replacing the hex color with var and the name of our global variable. And now the colors of this graphic will update dynamically whenever this global variable changes. So I've already updated all the values, and then I'm taking this SVG code and pasting it directly in the HTML in my Homepage component. You'll also notice that I've added a class of spin to the SVG itself, so make sure to add that as well. Then we'll go ahead and create the easiest animation ever, which is just a simple rotation. We can go ahead and set up some key frames that animate to a rotation of 360 degrees. Then the interesting part is when you define the animation parameters itself, you can set up variables here for each one of the properties. In this case, we'll only set a variable for the actual speed, but you could really set up a variable for anything here. So currently, that Speed variable is undefined. But our service can set individual variables, so all we have to do is call that method we defined on the service and it will update the speed to whatever we want. That's exactly what I'm doing in the component, and we'll do one that changes the speed to 2,000 milliseconds and another to 500 milliseconds. And that takes care of that. You now have a dynamically animated SVG graphic in your Ionic app. The one thing I didn't show you is how to use Ionic storage to have the theme be maintained between sessions. So if the user refreshes the browser window or if close the app on their mobile device and come back later. The same theme will be displayed. This is actually a super easy final touch that I wanna show you here. So first install the Ionic storage library. You can look at the official docs for that. Then you can inject the storage service in the constructor. When the app is first loaded, we're going to look in our local storage to see if there's an existing theme saved. If so, we'll go ahead and set that as the global CSS theme for this user. But otherwise, they'll just get the default values. Then whenever the theme changes, we'll want to set that as the value in storage. We can just add that logic to our SetTheme method. And whenever the theme changes, we'll call storage set with the new theme data. And you now have a pretty powerful theme controller that works on all platforms and is 100% based on CSS variables. I'm gonna go ahead and wrap things up there. If this video helped you please like and subscribe. And if you want to take your Ionic development to the next level, consider becoming apromember@angularfirebase.com. And don't forget to leave me a comment about what you wanna see in the upcoming Ionic 4 course. Thanks for watching, and I'll talk to you soon.
        