Multiple Color Themes Switcher in Angular Tutorial for Beginners
Aug 15, 2023
Multiple Color Themes Switcher in Angular Tutorial for Beginners
In this tutorial, we are creating a Multiple Color Themes Switcher in Angular. We have created this by using jQuery, React and VueJS also. Links are below. So make sure check them out as well. We are doing it in Angular this time. We will use ng-class, click event handler and local storage to create it. You will be able to switch between different color theme for app. Of course you will have to write CSS for different themes to achieve it. This app will persist its theme even when you reload the page or browse to another page or component.https://www.webstylepress.com https://www.facebook.com/webstylepress/ https://twitter.com/webstylepress https://www.instagram.com/webstylepress https://www.linkedin.com/company/webs …https://github.com/webstylepress
Content
4.59 -> hey devs how are you I am Hiroshi from
WebStylePress.com welcome to another tutorial
10.74 -> if this is your first time here I share tutorials
at this channel that can boost up your software
17.22 -> engineering skills so if you want to learn and
grow in this area join this channel by hitting
22.95 -> subscribe button and bell icon in this tutorial
guys we are cooking a multiple themes which are in
29.58 -> angular we have created this by using jquery react
and view g as before links are in the description
36.84 -> so make sure to check them out as well we are
doing it in angular this time we will use ng class
43.47 -> click and local storage to create it you will be
able to switch between different color themes for
49.71 -> app of course you will have to write CSS for
different themes to achieve it this app will
56.13 -> persist its theme even when you reload the page
or browse to another page your component we will
63.72 -> not create components for this app because it is
understood that this is a single page application
69.39 -> and the theme will persist while local storage
so let's start first of all guys you should have
75.84 -> no dias installed in your PC to create and use
JavaScript and command-line based applications
82.35 -> you can head over to node.js website and install
the latest version it will give you a node package
88.92 -> manager commonly known as NPM command-line utility
that you can use turn commands in order to install
97.38 -> and manage JavaScript packages efficiently and to
run JavaScript apps you can also use your package
104.79 -> manager to do so and this is yarn package manager
you can install it from here also you will need a
112.89 -> command-line utility or a terminal program to run
commands if you are using windows get for windows
120.42 -> can provide you great terminal utility this is
good for Windows that will provide you this kind
127.5 -> of utility after that you should have angular CLI
installed globally in PC you can head over to on
134.58 -> the website and then it's dogs then add this
other page and then you can see here it is npm
143.21 -> install' - g and go CLI - g flag is for installing
it globally in pc and then you can use new and
153.56 -> ingénue and then your app name command to create a
new application and then you can use ng serve and
165.62 -> flag - - open to fire up your project in a new tab
and it will give you and a default app like this
183.58 -> so if you browse files for this app we have
got an AB folder that contains files that
191.65 -> we will be changing I have created ab dot
component dot SES file in the app folder
199.99 -> and I have got this global style file that is
located here in this source folder this one
214.41 -> and I have used some styles in it I have
said the font family and the font size and
220.83 -> then I have got the content height and body
height hundred percent and heard VH and then
230.7 -> a title that has got styles like this so I am
using dot SC this file to style this component
240.03 -> and also we have got F dot component dot TS a
typescript file that will contain our logic and
250.38 -> then we have got this ab dot component dot HTML
that contains the HTML for this component and
258.75 -> it has got the CSS here and the HTML here
and this is the container and we have God
279.06 -> a lot of HTML for this component
288.13 -> so I will remove this as channel
because I do not need it and I
295.03 -> will save this file that will give us a blank page
308.09 -> and I will use my own HTML here in my estimate of
God dealt with the content class and then I have
318.68 -> got a dividend options class that contains
bunch of other deaths with unique IDs and
328.94 -> I deserve like team - white theme - blue team
- orange these will be basically our kind of
339.23 -> buttons and we will click at these buttons and
that will change the theme for us and this is
347.69 -> our content box with the headings and paragraphs
this is output this is output for our component
356.03 -> so let's apply CSS for this
370.15 -> so theme options and the devs inside it
theme - white theme - below these are
377.38 -> all boxes this will be clickable boxes that
will set the different theme theme option
388.09 -> this is rapper and these are our clickable
buttons so this is the common style that is
401.29 -> being applied for every day layer and we
do not need [ __ ] over here and this div
412 -> these divs will also receive an active class
and these boxes have got background colors
433.79 -> this is styling for our content box
437.09 -> margin background color and
border radius padding in max
448.04 -> width and then the heading inside
it we need a bigger form for this
473.21 -> okay
479.28 -> so this is our styling for the component
when different classes will be applied at
486.24 -> the content so this is the main components
wrapper gloss and it will contain this tile
494.91 -> so let's see so let's say if I use this class
theme purple with this content class our theme
508.92 -> will be changed to purple like this and we have
to adjust the content before that so let's do that
576.29 -> so we have got dip that in the add body that
we should remove and here is our theme so if
594.56 -> we have got this class's theme - blue and
theme - orange then these glasses will be
602.09 -> changed with the content the styles within
these glasses will apply to the component
610.52 -> and that contain a different theme for the app
so the background color for the content will
617.54 -> change and the content box will change and its
background color will change and the headings
624.71 -> colors and paragraph curve will change simple
right so we have to just switch the glasses so
635.24 -> I am removing this from here and let's apply our
logic now so I have used the a CSS file here this
645.53 -> is the this is our component main file and you
can use CSS here or you can use sass file here
656.18 -> in my case I have used sass file so as you can
import more stuff besides component here let's
668.63 -> say on in it and then you can use that here
export class AB component implements on in it
689.4 -> and then you can use here constructor
699.96 -> and ng on a net here but won't but we won't
be using these instead we need a function here
725.88 -> set theme and this set theme is a function that
will receive a parameter value via parameter and
738.81 -> inside it we will access the local storage and
we will set a value there our key will be team
756.12 -> color that will be this theme this value that
we will received from this function and then we
769.2 -> need something here stored theme and it will be
a string because this is typescript file and it
781.68 -> will be equal to local storage dot get item and
here will be this key that will contain the value
797.28 -> for the stored thing and then here we will call
this method again whenever this function will be
810.24 -> called so this dot stole theme is equal to this
statement again so this is our main function it
833.97 -> will set the value in the local storage it will
get a value from the event handler and then it
843.42 -> will set the value that it will get in a key theme
color in the local storage and then win and then
854.34 -> we are dragging this method again that will check
the value of stored theme from the local storage
874.66 -> pretty much straightforward right and now
we need clickhandler for these buttons and
880.21 -> this will be the method this will
be the variable that will contain
885.61 -> our value we have got the local storage
here if I inspect this page and I go to
897.13 -> her application fear of God local
storage here it has got a value I
910.99 -> will remove this value and reload the page again
924.18 -> and I will print the value here stole him
basically this stored theme value will be
933.69 -> applied ere that this content class and
then we need click handlers here these
950.97 -> divs will be clickable so click is equal
to this will find our function set team
969.8 -> and we will pass the value that we want to
store and in this case this value let's copy
982.16 -> this event handler in the other devs as well
and let's change the value he'll be blue here
1003.76 -> will be orange and here will be purple and
here will be green and this will be black
1041.43 -> so as you can see we are storing this value
in the local storage and we are receiving
1049.47 -> this value and we are based on this we
are adding the class in the content and
1057.06 -> then this click handler is sending a value
to the function set theme so set theme is
1066.21 -> here that is taking their value and storing
it in the local storage and then we update
1074.25 -> this method that caused that value and this is
being called in our HTML and as simple as that
1116.54 -> in this herb guys we missed something we'll
miss the active class we had to apply acted
1124.31 -> class here let's say if I use active class
here then this box becomes prominent so we
1148.88 -> had to indicate that which theme is applied
by using active clause on the relevant div
1157.34 -> so these are the devs we have God and we have
already mentioned it's active state for active
1165.98 -> class this is the div and if active Clause
will be added if it's so festive will be 1
1174.65 -> otherwise it will be half so this is the regular
state for the div and when active class will be
1182.57 -> applied this will be applied at that div so we
are receiving the stored theme value that will
1191 -> be either team White team blue team or Ranger
theme purple and we have to apply active class
1200.9 -> for the relevant div so this is the sin
tax so ng class if this stored theme is
1214.04 -> team - white then applied class active here else
no gloss so we'll copy this and apply to each div
1239.91 -> now all we have to do is to change the
names so this is team blue and this is
1277.2 -> team orange and this is team purple and
this is green and finally this is black
1316.91 -> so we are setting the store themed value
and if it will be themed as white activity
1323.51 -> loss will be applied here and if it will be
themed as blue active glass will be applied
1328.76 -> here so let's try this so we click here and
then you click here see active Clause applied
1344.33 -> here and then here let me show you the HTML
so I click at the blue so here active clause
1356.78 -> was applied and this is the orange and I
click at the orange an active clause was
1366.56 -> applied here and it was removed from the
other death that it was previously applied
1385.9 -> so this was this small check that we missed for
this tutorial now it's complete so that's it guys
1394.09 -> I hope you liked this video if I miss anything or
you have an something to add you can comment down
1400.63 -> below a score similar to this topic if you haven't
already subscribed subscribe to the channel and
1407.29 -> hit Bell icon to receive updates join us on social
media and the links are in the description below
1413.86 -> stay tuned for more updates I will see you in
the next video thanks for watching take care guys
Source: https://www.youtube.com/watch?v=PktZ157j4AE
