theme.js

🌞 Add Multiple color Themes in Your Website in few Seconds.

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.

Installation

Using npm

npm i @sonuyadav51/theme

How To Use

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.

use this code if you have downloaded library using npm.

// 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.

What if some elements color or background color of your website does not change ?

• if background color does not change then add attribute data-type="bg" or data-type="box" to that div, section in your html file.
• if text color or heading color does not change then add data-type="text" or data-type="heading" according to element type in your html file.

What if you do not want this library to change color or background color of some elements ?

• in this case just add data-type="no" to that element in your html file.

Options

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

add custom multiple color themes

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 with bg will added to body main tag.
• box generated classes with box will added to input textarea tag.
• header generated classes with header will added to header tag.
• nav generated classes with nav will added to nav tag.
• text generated classes with text will added to p td and span tag.
• heading generated classes with heading will added to h1,h2,h3,h3,h5,h6 th label.
• link generated classes with link will added to a tag.
• list generated classes with list will added to li and ul tag.
• footer generated classes with footer will added to footer tag

see below step to add custom color theme and example of generated classes.

Steps to add custom multiple color theme.

1. add a button for toggling your custom color theme with data-newtheme, data-beforetitle, data-aftertitle attribute. Here data-newtheme attribute is required other two are optional.know more about toggle button
2. now this library will concatinate value of data-newtheme attribute of button with above listed values with (-) and generate classes. see below example.
3. you need to write color style for generated classes for your custom color theme in your css file. see below example for generated classes.

Example

1. adding a custom red theme.

1. 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>
2. now this library will concatinate value red of data-newtheme attribute of button with above listed values with (-) and generate following classes.
3. 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.

2. add a custom drakula theme.

1. 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>
2. now this library will concatinate value drakula of data-newtheme attribute of button with above listed values with (-) and generates following classes.
3. 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.

Toggle Button

• When we will click on theme toggle button for changing theme then this library add a active class to it. with the help of this active 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>

Toggle Button has 3 Attributes

1. data-newtheme => this is required and used for generating classes for custom color themes.
2. data-beforetitle => this is optional attribute. it's value will be display on button before custom color theme activated.
3. data-aftertitle => this is optional 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>

Generate custom classes

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.

full example for multiple custom theme

this example has custom data-type values too. see in following example.

add toggle button in your html file

<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>

write styles for generated clases for rend and drakula theme in your css file

/*  ================ 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 */
}