This library provides multiple color themes for websites.it has pre-design darkmode
๐ and lightmode
๐ themes in it's installation but you can add as much as color themes you want. to add your own custom colors themes referes to add custom multiple color themes topic.
npm i @sonuyadav51/theme
https://sonuyadav51.github.io/courseEnrrolment/index.html
just add following code in your javascript file or script tag.
Important => add attribute type="module"
in script tag in which you will import
this library.
// import library to your js file
import theme from "./node_modules/@sonuyadav51/theme/lib/theme.js";
// call this function to activate library
theme(); // you can pass an object type optional argument to this funtion
Note : You can pass an object type
optional argument to theme()
function.
- if
background color
does not change then add attributedata-type="bg"
ordata-type="box"
to that div, section in your html file. - if
text color
orheading color
does not change then adddata-type="text"
ordata-type="heading"
according to element type in your html file.
- in this case just add
data-type="no"
to that element in your html file.
You can pass an object type options
argument to theme()
function.
//creating options object
options = {
hideButton: true, // hide default toggle button provided by library | default value is false
top: "95%", // position toggle button from top | default value is "5%"
left: "53%", // position toggle button from left | default value is "83%"
lightTheme: true, // to add the light-theme provided by library | default values is false,
removeAutoDark: true, // to remove autometic adding dark theme on installation | default value is false.
};
// passing to theme function
theme(options);
Note: lightTheme: true
can change the color of your website's elemetns on which you added data-type
attribute
This library autometic generates classes with the value of attribute data-newtheme
of toggle button.
this library takes this attribute value and concatinate it with (-) with following values
bg
box
header
nav
text
heading
link
list
footer
and generate classes which will append to html elements according to these value type.
bg
generated classes withbg
will added tobody
main
tag.box
generated classes withbox
will added toinput
textarea
tag.header
generated classes withheader
will added toheader
tag.nav
generated classes withnav
will added tonav
tag.text
generated classes withtext
will added top
td
andspan
tag.heading
generated classes withheading
will added toh1,h2,h3,h3,h5,h6
th
label
.link
generated classes withlink
will added toa
tag.list
generated classes withlist
will added toli
andul
tag.footer
generated classes withfooter
will added tofooter
tag
see below step to add custom color theme and example of generated classes.
- add a button for toggling your custom color theme with
data-newtheme
,data-beforetitle, data-aftertitle
attribute. Heredata-newtheme
attribute isrequired
other two are optional.know more about toggle button - now this library will concatinate value of
data-newtheme
attribute of button with above listed values with (-) and generate classes. see below example. - you need to write color style for generated classes for your custom color theme in your css file. see below example for generated classes.
- add a toggle button with
data-newtheme="red"
in your html file.<button data-newtheme="red" data-beforetitle="change to red" data-aftertitle="change to light">change to red </button>
- now this library will concatinate value
red
ofdata-newtheme
attribute of button with above listed values with (-) and generate following classes. - write your own color to following classes for red theme.
/* ================ GENERATED CLASSES BY LIBRARY WITH data-newtheme="red" VALUE ====================== */
.red-bg {
/* this will change background color of body*/
}
.red-box {
/* this will change background color of main */
}
.red-header {
/* this will change header background*/
}
.red-nav {
/* this will change background color of navbar */
}
.red-heading {
/* this will change color of heading*/
}
.red-text {
/* this will change color of content of p and span tag*/
}
.red-link {
/* this will change color of link*/
}
.red-list {
/* this will change color of ul and li*/
}
.red-footer {
/* this will change background color of footer */
}
Note: You can generate your custom classes for any specific HTML elements too which will be added to this specific element when you toggle custom color theme. see example of generating custom classes.
- add a toggle button with
data-newtheme="drakula"
in your html file.<button data-newtheme="drakula" data-beforetitle="change to drakula theme" data-aftertitle="change to light">change to drakula theme </button>
- now this library will concatinate value
drakula
ofdata-newtheme
attribute of button with above listed values with (-) and generates following classes. - write your own color to following classes for drakula theme.
/* ================ GENERATED CLASSES BY LIBRARY WITH data-newtheme="drakula" VALUE ==================== */
.drakula-bg {
/* this will change background color of body*/
}
.drakula-box {
/* this will change background color of main tag */
}
.drakula-header {
/* this will change header background*/
}
.drakula-nav {
/* this will change background color of navbar */
}
.drakula-heading {
/* this will change color of heading*/
}
.drakula-text {
/* this will change color of content of p and span tag*/
}
.drakula-link {
/* this will change color of link*/
}
.drakula-list {
/* this will change color of ul and li*/
}
.drakula-footer {
/* this will change background color of footer */
}
Note: You can generate your custom classes for any specific HTML elements too which will be added to this specific element when you toggle custom color theme. see example of generating custom classes.
- You can have both these above color theme in your website at a same time. write all these css classes code in your stylesheet and both button in your html file. see a full example of multiple custom theme.
- When we will click on theme toggle button for changing theme then this library add a
active
class to it. with the help of thisactive
class we can write styles for button when custom color theme activated.
for example.
<button class="mybtn" data-newtheme="blue"> change to blue</button>
/* This style will be applied on button in light theme*/
.mybtn {
background-color: blue;
}
/* this style will be applied on button when you change theme to your custom color theme*/
.mybtn.active {
background-color: white;
}
- add built-in
theme-toggle-btn
class to your button to make it toggling like default toggle button provided by library. it is not required to add this class. you can design your toggle button as you want with your custom class just like above.<button class="theme-toggle-btn" data-newtheme="blue"> change to blue</button>
data-newtheme
=> this isrequired
and used for generating classes for custom color themes.data-beforetitle
=> this isoptional
attribute. it's value will be display on button before custom color theme activated.data-aftertitle
=> this isoptional
attribute. it's value will be display on button after custom color theme activated.
Note: if you want to create a toggle button withought title like library's default toggle button then no need to write above 2nd and 3rd attribute in your custom toggle button. like
<button data-newtheme="anything"> change to blue</button>
you can generate your own custom classes. which will be added to elements when you toggle your theme.
for generating custom classes you need to add data-type
attribute in your html file.
for example, if your html file has a div
element and when you will click on button to change your theme you want to apply some css on this div
then you have to add an attribute data-type="anyvalue"
on this div
. then this library will take this attribute value anyvalue
and concatinate it with your toggle button data-newtheme
value. and generate a class and when you toggle theme then this library will add this class to this div
. all you need to write css for this generated class. see below full example.
Note: here anyvalue
can be anything, not neccessary to write this exact word. you can write what you want.
this example has custom data-type values too. see in following example.
<body>
<!-- red theme button -->
<button
data-newtheme="red"
data-beforetitle="change to red theme"
data-aftertitle="change to light"
>
change to red theme
</button>
<!-- drakula theme button withought data-beforetitle and data-aftertitle attribute-->
<button data-newtheme="drakula"></button>
<!-- =================ADDING data-type IN HTML ELEMENTS FOR CUSTOM CLASSES -->
<div data-type="mybox"></div>
<p data-type="mytext"></p>
</body>
/* ================ GENERATED CLASSES BY LIBRARY WITH data-newtheme="red" VALUE ====================== */
.red-bg {
/* this will change background color of body*/
}
.red-box {
/* this will change background color of main */
}
.red-header {
/* this will change header background*/
}
.red-nav {
/* this will change background color of navbar */
}
.red-heading {
/* this will change color of heading*/
}
.red-text {
/* this will change color of content of p and span tag*/
}
.red-link {
/* this will change color of link*/
}
.red-list {
/* this will change color of ul and li*/
}
.red-footer {
/* this will change background color of footer */
}
/* ======== CUSTOM CLASSES ===========*/
.red-mybox {
/* write your css here */
}
.red-mytext {
/* write your css here */
}
/* ================ GENERATED CLASSES BY LIBRARY WITH data-newtheme="drakula" VALUE ==================== */
.drakula-bg {
/* this will change background color of body*/
}
.drakula-box {
/* this will change background color of main tag */
}
.drakula-header {
/* this will change header background*/
}
.drakula-nav {
/* this will change background color of navbar */
}
.drakula-heading {
/* this will change color of heading*/
}
.drakula-text {
/* this will change color of content of p and span tag*/
}
.drakula-link {
/* this will change color of link*/
}
.drakula-list {
/* this will change color of ul and li*/
}
.drakula-footer {
/* this will change background color of footer */
}
/* ======== CUSTOM CLASSES ===========*/
.drakula-mybox {
/* write your css here */
}
.drakula-mytext {
/* write your css here */
}