- 00:00:01 well again to this video my name is Max
- 00:00:03 and in the last video of this series we
- 00:00:06 actually got started with our beautiful
- 00:00:08 project we installed it and now we have
- 00:00:11 it here I open that in webstorm and if
- 00:00:13 we have a look at the running project
- 00:00:15 this is how it looks like now that's
- 00:00:18 default setup and as you can see it
- 00:00:20 already ships with a lot of components
- 00:00:22 and I don't want to use these instead
- 00:00:25 I'll go to my app but view file and here
- 00:00:27 I will simply start by deleting
- 00:00:31 everything which is in there now I will
- 00:00:34 re add some of these things
- 00:00:36 I'll also delete everything in my data
- 00:00:37 here but I want to start with a clean
- 00:00:40 project and then I add the things step
- 00:00:42 by step so that you really well see what
- 00:00:44 we use and why we use it so doesn't the
- 00:00:47 cleanup project if we now save this this
- 00:00:50 certainly is a little bit leaner now
- 00:00:53 let's start adding elements and you see
- 00:00:56 a left EVF element here now generally
- 00:00:59 all these beautiful components I'm going
- 00:01:02 to use start with we – and a good place
- 00:01:06 to learn more about beautify obviously
- 00:01:08 is their official page beautify
- 00:01:11 chase.com there if you click on get
- 00:01:13 started you can get detailed
- 00:01:15 explanations on all kinds of components
- 00:01:18 you might use how would you use them you
- 00:01:20 get examples you can have a look at and
- 00:01:21 at the bottom of each page you see the
- 00:01:24 different props you can set up and so on
- 00:01:26 so really an important page when working
- 00:01:28 with beautify is also another important
- 00:01:32 note over the course of the series or by
- 00:01:34 the point of time you're watching this
- 00:01:36 video the version of Butte approaches
- 00:01:38 might have changed and some things might
- 00:01:41 not work the same definitely always have
- 00:01:44 a look at the latest release notes of
- 00:01:46 beautified shares if something is broken
- 00:01:49 I'll also try to add annotations in the
- 00:01:52 video description if possible to point
- 00:01:54 you towards potential issues and with
- 00:01:57 that you should get a working project
- 00:01:59 again right now everything should work
- 00:02:00 though so this is give you deployed
- 00:02:03 chest page and I want to start by
- 00:02:05 populating the main page with some life
- 00:02:09 again I also want to change the default
- 00:02:11 colors though because if you have a look
- 00:02:13 at it
- 00:02:14 well now it's white but if you remember
- 00:02:16 the old state it was really great and
- 00:02:19 thankfully we can set our own theme in a
- 00:02:22 beauteous project for that theme we can
- 00:02:26 choose from many colors which you can
- 00:02:28 find on the official page under style
- 00:02:30 colors these are all the material colors
- 00:02:33 and these are basically the CSS classes
- 00:02:35 you can add to any element to add this
- 00:02:38 as a color for the element however you
- 00:02:41 can also set up a main theme for your
- 00:02:43 application to give your overall
- 00:02:45 application a certain style without you
- 00:02:47 having to add these individual classes
- 00:02:49 to all elements you're going to use more
- 00:02:52 information can of course be found under
- 00:02:54 the theme section here and there you see
- 00:02:57 you can choose between a light and a
- 00:02:59 dark theme now in order to be able to
- 00:03:02 see that we need some components though
- 00:03:03 so before diving into theming why don't
- 00:03:06 we add some components again in our
- 00:03:08 applet view file again we have to be app
- 00:03:11 component and that basically wraps your
- 00:03:14 entire app it's that simple
- 00:03:15 this really is all now in sight that we
- 00:03:18 have you can add different things for
- 00:03:21 example a main element this is not a
- 00:03:24 beautified shared component this is a
- 00:03:26 normal HTML element in this main element
- 00:03:29 we'll place our main content so the D
- 00:03:33 content we're going to display in our
- 00:03:35 application so you might wonder well
- 00:03:37 what's outside of the main element then
- 00:03:39 well all the content of our application
- 00:03:41 but basically our navigation so the
- 00:03:44 static content which is the same for
- 00:03:46 every page which isn't dynamic the
- 00:03:48 dynamic content goes into main and we'll
- 00:03:50 add a navigation above main now I want
- 00:03:53 to have a responsive navigation with a
- 00:03:56 hamburger menu for smaller devices in
- 00:03:58 the toolbar with icons and buttons for
- 00:04:01 bigger devices so why don't we start
- 00:04:03 adding that and we actually got a B –
- 00:04:07 toolbar component and beautify cheese
- 00:04:09 which you can use so let's add that
- 00:04:12 toolbar and let's see if we already can
- 00:04:14 see something after adding this well we
- 00:04:17 can't see it right here right it's great
- 00:04:19 so you might have over seen it but this
- 00:04:21 was actually added this bar here at the
- 00:04:23 top now you can already see that we can
- 00:04:27 switch
- 00:04:27 theme on the app element by default it's
- 00:04:31 the light theme can switch to the dark
- 00:04:33 theme which will change the overall look
- 00:04:36 of your page might not be the look you
- 00:04:38 want to use but you can do that changes
- 00:04:40 the background color and the color of
- 00:04:42 your toolbar now we're going to change
- 00:04:45 this color anyways later so I'll revert
- 00:04:47 to the light theme for now that's the v2
- 00:04:50 are now in the toolbar I want to have
- 00:04:53 certain elements to display and these
- 00:04:56 elements actually are the icons or DVD
- 00:05:01 navigation elements we'll have but it's
- 00:05:04 also the brand for example now in a V
- 00:05:07 toolbar component we can add a V toolbar
- 00:05:11 title component now you might be
- 00:05:14 wondering how do I know all these
- 00:05:16 components and how do I know how to use
- 00:05:18 them in which way well if you go back to
- 00:05:22 the beautify chest page there under
- 00:05:24 components to scroll down to the tool
- 00:05:27 bar here you'll find some examples which
- 00:05:32 you can simply check out and there you
- 00:05:34 will already see the structure I'm using
- 00:05:36 here like using a be toolbar title
- 00:05:38 inside of the toolbar this part here at
- 00:05:41 the bottom of this page as I mentioned
- 00:05:43 earlier you'll also see a full
- 00:05:46 explanation of all the properties you
- 00:05:48 can set but here you'll also see the
- 00:05:51 different elements under functional here
- 00:05:54 v toolbar title and so on so this is
- 00:05:57 where I got this from but the best way
- 00:06:00 to learn it really are the various
- 00:06:02 examples you can have a look at to see
- 00:06:04 the code of well what you're seeing on
- 00:06:06 screen here back to our element we add
- 00:06:09 up the V toolbar title component and
- 00:06:11 with that we can of course set our title
- 00:06:14 and I'll name our app death meetup now
- 00:06:17 if I save this and we go back to the
- 00:06:19 application now we see a nicely aligned
- 00:06:22 and styled title on that toolbar which
- 00:06:25 already is pretty great now remember
- 00:06:28 that I also wanted to add some links
- 00:06:31 later or for now simply some dummy
- 00:06:33 buttons which won't do anything but
- 00:06:35 which will represent our navigation
- 00:06:37 later on that's very easy to do too
- 00:06:40 can simply add the buttons and again
- 00:06:44 that is as for all components something
- 00:06:46 you can find out on the official
- 00:06:48 documentation we want to add buttons to
- 00:06:51 the navigation to the toolbar and
- 00:06:52 actually you don't even have to go to
- 00:06:54 the buttons component to know that you
- 00:06:56 can simply have a look at this example
- 00:06:59 again and here you see the V buttons you
- 00:07:03 also see the V toolbar items component
- 00:07:06 here which we use to wrap these buttons
- 00:07:08 and of course we can add this too so
- 00:07:12 here in the toolbar I'll actually remove
- 00:07:15 the button for now and add B toolbar
- 00:07:17 items to wrap all the items which
- 00:07:20 basically are not the title or some
- 00:07:22 other element which I'll come back so
- 00:07:25 here I'll now add my button and again we
- 00:07:27 can take the structure from here the
- 00:07:29 button and basically then add a text
- 00:07:31 like for example view meetups and here
- 00:07:36 we save this we don't have to add the
- 00:07:39 flat attribute as a side note that just
- 00:07:42 changes how the button is displayed come
- 00:07:44 back to this tube we save this we see
- 00:07:46 the button here sitting right next to
- 00:07:49 that title and also this button style
- 00:07:52 might not be the one we want that takes
- 00:07:55 us back to the different button styles
- 00:07:57 which we can now learn on the detailed
- 00:08:00 documentation page of how to pattern
- 00:08:02 there you click on it you see the
- 00:08:05 different kinds of buttons like flat
- 00:08:07 buttons which don't have a border
- 00:08:09 basically raised buttons which have a
- 00:08:12 border and a tiny shadow and then some
- 00:08:14 other buttons you may use now the flat
- 00:08:17 button actually makes sense on the
- 00:08:18 navigation so why don't we add flat here
- 00:08:21 and to get some space in between our
- 00:08:25 title and the toolbar items there
- 00:08:27 actually is a V space or a helper
- 00:08:29 component which allows us to distribute
- 00:08:31 this because behind the scenes B
- 00:08:34 toolbars uses flexbox VCS as concept
- 00:08:37 flex box and in Flex box by default here
- 00:08:41 all the items are aligned to the start
- 00:08:43 however if you add a spacer in between
- 00:08:46 it will add some well space between the
- 00:08:48 title and the our elements so if we save
- 00:08:52 it with this setup here
- 00:08:54 you will see that in our application now
- 00:08:56 it's pushed all the way to the right and
- 00:08:58 that it now has this flat look which
- 00:09:01 looks better in my opinion we can even
- 00:09:04 enhance this a bit more though we could
- 00:09:07 go to that button here and it could add
- 00:09:10 an icon to it to do this I simply add
- 00:09:14 inside of this button up besides the
- 00:09:17 text I add the V icon component now
- 00:09:20 again that is provided by beautified as
- 00:09:22 all the elements starting with V dash we
- 00:09:26 have a look at the beautified
- 00:09:27 documentation we actually see I can bust
- 00:09:30 nose here to here for example but we
- 00:09:34 also have a dedicated article about
- 00:09:37 icons to click on that we find a link to
- 00:09:40 the material icons page which allows us
- 00:09:43 to find all the icons supported by the
- 00:09:46 materials style guide or by the material
- 00:09:48 style and here you can choose any I can
- 00:09:51 you find appropriate for the element you
- 00:09:54 are about you create so for our example
- 00:09:57 here of the view meetups we can find a
- 00:10:01 fitting icon for dad what would make
- 00:10:03 sense for viewing meetups obviously
- 00:10:07 there are a lot of icons which might
- 00:10:08 make sense but I think the supervisor
- 00:10:10 account here would also make sense so we
- 00:10:13 can take this or remember this name
- 00:10:16 actually also click on it and copy it
- 00:10:18 and go back to our application at this
- 00:10:22 in between the icon without that extra
- 00:10:25 information here though and important to
- 00:10:27 remove the white space turn it into an
- 00:10:29 underscore with that if you now reload
- 00:10:33 the application you have two icon here
- 00:10:35 however it's it's really close to the
- 00:10:38 text and that might also not be the
- 00:10:41 behavior you're looking for that is an
- 00:10:43 issue though we simply have to add a
- 00:10:45 directive QD icon which is called left
- 00:10:49 in this case and should be setting left
- 00:10:51 of the text by adding this it beautifies
- 00:10:54 made aware that it probably is next to a
- 00:10:57 text and that we wanted some spacing in
- 00:10:59 between so now you see this looks much
- 00:11:01 better and that's how you could build
- 00:11:03 your menu I will come back to building
- 00:11:05 the menu a later
- 00:11:07 so right now I want to jump to another
- 00:11:10 menu we have to build the responsive one
- 00:11:13 the hamburger menu we need for mobile
- 00:11:16 devices because right now we only have a
- 00:11:18 toolbar and it won't auto collapse if I
- 00:11:21 open my developer tools and shrink the
- 00:11:23 page you see it's not collapsing so this
- 00:11:26 alone doesn't give us a responsive
- 00:11:28 design in order to add a responsive
- 00:11:31 design we need to add a different
- 00:11:33 component to beautify actually we can
- 00:11:37 look for one in the beautify
- 00:11:38 documentation there you can go to
- 00:11:41 layouts and predefined to learn about
- 00:11:44 some common layouts you use and actually
- 00:11:47 we're also using one this year's default
- 00:11:50 application market but now we can have a
- 00:11:53 look at which layout would fit our needs
- 00:11:54 this one has some drawer but I actually
- 00:11:59 know that there is one which I like more
- 00:12:02 I like the temporary floating one here
- 00:12:08 which floats the navigation drawer over
- 00:12:11 our main content I really like that a
- 00:12:13 lot of course you can choose any other
- 00:12:14 setup here so let's expect the source
- 00:12:17 code for this setup and here we see
- 00:12:19 quite a lot of elements we see our tool
- 00:12:22 bar here which we already added as one
- 00:12:26 extra element though we still have to
- 00:12:28 add but then we see that all this part
- 00:12:30 here at the top is responsible for
- 00:12:33 rendering this navigation drawer as it
- 00:12:36 is called this side menu which slides in
- 00:12:39 death decibel user is all component DB
- 00:12:42 navigation drawer component again under
- 00:12:44 components you would find a dedicated
- 00:12:46 article and inside this drawer
- 00:12:49 we're nesting another component made
- 00:12:51 available by beautifying the b-list
- 00:12:54 component also to be found in that
- 00:12:56 components documentation now here you
- 00:13:00 see how such a list could be structured
- 00:13:02 and how it could look like I'll simply
- 00:13:05 create a almost comparable list a bit
- 00:13:09 easier though to find the style I'm
- 00:13:11 looking for I'll go to components and
- 00:13:14 their twist and now here I don't want to
- 00:13:19 have an avatar or something like that
- 00:13:21 what you have all I can in my list
- 00:13:22 though so I basically want you will
- 00:13:26 build this style here where I have a
- 00:13:29 list with an action which holds an icon
- 00:13:32 and then the content which is a text and
- 00:13:34 I don't need the avatar
- 00:13:35 so what did we gathered all the
- 00:13:37 information we need now let's build this
- 00:13:39 step by step for that I'll go back to my
- 00:13:42 application and now outside of the
- 00:13:45 toolbar that's important
- 00:13:46 add your navigation drawer which was the
- 00:13:49 navigation drawer just like that now the
- 00:13:53 navigation drawer alone doesn't do much
- 00:13:56 it also meets you be connected to
- 00:14:00 something which opens it basically we
- 00:14:03 can use v-model for this we can use this
- 00:14:06 because beautifly set this component up
- 00:14:08 to be bindable via v-model
- 00:14:10 and here we have to connect it to a
- 00:14:13 property which holds a boolean if that
- 00:14:16 boolean is true the menu will be opened
- 00:14:18 if it's false it will be not shown it's
- 00:14:20 closed here I'll name this side nav and
- 00:14:24 of course I have to add this
- 00:14:26 so here I'll add it in my data object
- 00:14:29 and I'll set it to false initially so
- 00:14:31 that it's closed now of course we need a
- 00:14:34 way to open this now and four days I now
- 00:14:39 will add another element to my toolbar
- 00:14:41 here next to the title I'll add a V
- 00:14:45 toolbar side icon and that's element you
- 00:14:50 could also find on this predefined
- 00:14:52 layouts page I showed you a second ago
- 00:14:54 this adds a hamburger icon that is what
- 00:14:57 it does and this is dedicated for
- 00:14:59 opening the drawer basically we still
- 00:15:02 have to connect it though so what we do
- 00:15:05 here on that side icon is we add a click
- 00:15:09 listener we add a click listener where
- 00:15:12 we want to set side nav to what is
- 00:15:15 currently not so if sign app is true we
- 00:15:18 will set it to false and the other way
- 00:15:19 around to close or open the drawer if we
- 00:15:23 do that and we save this let's have a
- 00:15:26 look at our application we see the
- 00:15:29 hamburger menu there and actually of
- 00:15:31 course we should add it in front of the
- 00:15:32 title here to have it on the left
- 00:15:34 like this if they click this you see
- 00:15:38 nothing happens though we also don't get
- 00:15:41 an error so what's going wrong here
- 00:15:43 actually this is related to a change you
- 00:15:47 chase introduced in view 2.1 I guess
- 00:15:51 that clicks on components by default
- 00:15:55 don't propagate up they don't give you
- 00:15:57 this native click event you can still
- 00:16:00 easily get it though by adding a
- 00:16:01 modifier which is dot native with dad
- 00:16:04 you're telling view if I'm clicking on
- 00:16:06 the component give me the native Dom
- 00:16:08 click event now with that we should be
- 00:16:11 able to listen to that so let's click
- 00:16:14 this and something changed we get the
- 00:16:17 backdrop at least so somehow half of the
- 00:16:21 drawer is loaded but the drawer itself
- 00:16:23 is missing dad is related to another
- 00:16:26 thing we did with this click there click
- 00:16:28 on the backdrop actually also dismisses
- 00:16:31 the drawer and it turns out that if we
- 00:16:34 open the drawer with a click listener we
- 00:16:36 automatically dismiss it because our
- 00:16:39 click now propagates up and it's also
- 00:16:41 consumed by the drawer component which
- 00:16:44 then again dismisses the drawer so we
- 00:16:47 have to add another modifier to stop
- 00:16:49 modifier to stop the propagation now
- 00:16:53 with that we should make sure that we
- 00:16:55 only handle a click on the level of this
- 00:16:58 button and we get the drawer of course
- 00:17:00 it's empty though because we haven't
- 00:17:01 added anything in there you
- 00:17:04 theoretically can now add what you want
- 00:17:06 but a typical thing is a list which
- 00:17:08 displays really nicely inside the drawer
- 00:17:11 so in that navigation drawer we can
- 00:17:13 create a list with we – list now with
- 00:17:16 that we basically add or set up a list
- 00:17:19 now we can start adding items we do that
- 00:17:22 by adding V list tiles each tile is
- 00:17:25 basically a row in the list you could
- 00:17:27 say and this tile now can hold a V list
- 00:17:32 tile action action is like the icon in
- 00:17:36 our case so here I'll add a V icon and
- 00:17:40 now again I will pick this supervisor
- 00:17:44 account I can here because it worked out
- 00:17:46 really well and of course
- 00:17:48 to replicate my toolbar menu in the list
- 00:17:50 now because I need to have the same menu
- 00:17:52 invoked responsive and the unresponsive
- 00:17:54 approach at least in this application so
- 00:17:58 we have the supervisor account and next
- 00:18:00 to the realize a list tile action all
- 00:18:03 now at the b-list tile content and if
- 00:18:07 that is super confusing with all these
- 00:18:09 components you'll get into that really
- 00:18:11 quickly it's just a matter of practicing
- 00:18:14 and using do defy a bit and you always
- 00:18:15 have the official documentation to have
- 00:18:17 a look at if your stack or if you're not
- 00:18:19 sure which elements you should use so we
- 00:18:22 list tile context now will hold the
- 00:18:25 actual text like view meet us and now if
- 00:18:29 I save this and we go back to the
- 00:18:31 application
- 00:18:32 you already see it here due to hot
- 00:18:34 reloading can also reload now we see our
- 00:18:37 list item here so now we have a
- 00:18:39 responsive menu and we have the normal
- 00:18:42 toolbar we can now also add CSS classes
- 00:18:45 to make sure that we only display what
- 00:18:49 we want to display so only display the
- 00:18:51 toolbar menu if we are on a big screen
- 00:18:54 and display the drawer and the hamburger
- 00:18:57 icon on smaller screens that is super
- 00:18:59 simple to do we can simply go to that
- 00:19:02 hamburger menu here and add a CSS class
- 00:19:05 to it and I'll let those over multiply
- 00:19:07 to make it easier to read this class
- 00:19:09 needs to control whether this icon is
- 00:19:11 shown or not and if we have a look at
- 00:19:14 the official beautify documentation you
- 00:19:16 can find it under layout you actually
- 00:19:19 have this display part here you find
- 00:19:23 classes which allow you to control
- 00:19:25 whether something is displayed on a
- 00:19:27 certain screen resolution or not which
- 00:19:30 of course is key to creating responsive
- 00:19:32 designs for example we want to hide that
- 00:19:35 hamburger menu let's say on everything
- 00:19:38 which is a small device you can see the
- 00:19:41 definitions for device sizes on the grid
- 00:19:43 page here as a side note here small is
- 00:19:46 greater than 600 pixels so we can
- 00:19:49 basically hide it on small devices or
- 00:19:52 bigger with the hidden SM and up class
- 00:19:55 here and if you only want to hide it on
- 00:19:58 medium sizes and up well then you would
- 00:20:00 choose
- 00:20:01 this one so I'll go with hidden SM and
- 00:20:04 up go back to the application and add
- 00:20:06 this as a CSS class to my hamburger menu
- 00:20:08 of course the toolbar items on the other
- 00:20:11 hand should be hidden on small devices
- 00:20:14 so here we can add a class which is
- 00:20:17 hidden XS only to only hide it on very
- 00:20:20 small devices here with that if we now
- 00:20:24 save this you see we have no hamburger
- 00:20:28 icon on this screen size but if I
- 00:20:30 decrease the size now we get the
- 00:20:33 hamburger and we get no more item here
- 00:20:36 in our toolbar so now I can choose from
- 00:20:39 the hamburger icon from the navigation
- 00:20:42 drawer this is the basic set above one I
- 00:20:46 use now I also want to change the
- 00:20:48 styling the theme and I did mention that
- 00:20:51 we could do this with beautified it's
- 00:20:53 actually simple to do for one we can add
- 00:20:57 CSS classes to change colors and we can
- 00:20:59 pick colors from the style colors page
- 00:21:02 if we wanted to turn our toolbar into a
- 00:21:06 purple toolbar we could pick up fitting
- 00:21:09 purple maybe purple darken one can just
- 00:21:12 copy that here go to our code and on the
- 00:21:17 toolbar we can add a normal CSS class
- 00:21:19 where we apply the two classes we just
- 00:21:21 copied with dead if we go back now it
- 00:21:25 turns purple you will also see of course
- 00:21:27 that now all the text cells black so
- 00:21:29 that might not be the contrast you're
- 00:21:32 looking for we can simply fix this by
- 00:21:35 assigning dark directive to the toolbar
- 00:21:39 this will mark this as using a dark
- 00:21:42 theme and by doing that it automatically
- 00:21:45 turns the text into white text as you
- 00:21:48 can see now to also convert the icon
- 00:21:51 color here we have to go to that I can
- 00:21:55 here is our button and there we can now
- 00:21:57 also add the dark theme to inform it
- 00:21:59 that it's sitting on a dark background
- 00:22:00 and you see this turns it into white
- 00:22:04 cube so this is how you work with that
- 00:22:06 you give beautify the information is the
- 00:22:10 dark or a light color the one you're
- 00:22:13 assigning here
- 00:22:14 and with that information beautiful I
- 00:22:16 will adjust the text and the displaying
- 00:22:18 of icons and zone automatically as we
- 00:22:21 did here so this is one step now as I
- 00:22:25 said it would also be nice if you could
- 00:22:27 adjust the overall theme of our
- 00:22:29 application and not just work with CSS
- 00:22:31 classes we apply like this for that we
- 00:22:34 can visit that stylus folder and there
- 00:22:37 we get the main dot style file now
- 00:22:39 stylus is a CSS preprocessor just like
- 00:22:43 sass would be and you don't have to use
- 00:22:45 it you can though since it by default is
- 00:22:47 set up to be usable in this beautiful
- 00:22:50 project you will have to use it if you
- 00:22:52 want to override the theme though and a
- 00:22:54 detailed guide on overwriting the theme
- 00:22:56 can also be find a found on the beautify
- 00:22:59 page under oops it was under style theme
- 00:23:03 here if you scroll down you actually see
- 00:23:05 the setup you'll need to have in the end
- 00:23:07 this one here now what's happening here
- 00:23:11 let's copy this import because we
- 00:23:14 already have two second one in our main
- 00:23:16 style file and then I'll explain what
- 00:23:18 these two imports do this one the bottom
- 00:23:21 one basically imports the beautified
- 00:23:24 styles and your file happily uses
- 00:23:27 variables so our goal is to override
- 00:23:30 some variables before this gets imported
- 00:23:32 because since all of this gets built
- 00:23:35 dynamically here in our build workflow
- 00:23:37 with that we can change the styling of
- 00:23:39 the build CSS file now we can overwrite
- 00:23:42 variables here if you want to use the
- 00:23:44 material colors though we need to import
- 00:23:47 that colors file from the beautify
- 00:23:49 package which simply also stores various
- 00:23:52 colors we saw on the colors page in
- 00:23:53 their own variables and what we can now
- 00:23:56 overwrite the theme variable which is
- 00:23:59 one which will get used in that main
- 00:24:01 file and assign our own colors let's
- 00:24:05 choose the one I just copied if we save
- 00:24:08 this and we actually remove the purple
- 00:24:11 class on our toolbar and we go back to
- 00:24:14 our application you now see it's black
- 00:24:19 but that is not due to our theme but
- 00:24:21 because we added the dark theme to the
- 00:24:24 toolbar here how can we make our
- 00:24:26 teamwork then
- 00:24:28 well by default you chase or beautify it
- 00:24:31 we'll choose the black or the light gray
- 00:24:34 look however since we set up our own
- 00:24:36 theme with our own primary colors and so
- 00:24:39 on we can go to the after view file and
- 00:24:42 still apply a CSS class here however we
- 00:24:45 can just use primary now could have you
- 00:24:47 set the four but with the tree which has
- 00:24:49 used defaults now we're using our own
- 00:24:51 primary class or our own primary style
- 00:24:54 as we set it up in our theme file and we
- 00:24:57 can use it anywhere in our application
- 00:24:59 now you see we have this red colored
- 00:25:02 toolbar due to our own theme being
- 00:25:05 applied this is where I want to stop in
- 00:25:07 this video in the next video we're going
- 00:25:10 to finish this menu both menus this one
- 00:25:14 and the responsive one we'll learn how
- 00:25:17 we can dynamically populate these menus
- 00:25:20 and thereafter we'll start diving into
- 00:25:23 the core functionalities of this
- 00:25:25 application