ColinEspinas / darken, Hacker News

🌑Darkmode made easy

**********************

************ (Getting Started) ************************

************************** Usage************ Basic

**************************** (Options ****************

**************************** API

******************************** Contributing

******************************** (License********************************

********************************** (Contact

************************************ Acknowledgment********************************************

(****************************************** ******************************

Just use this snippet to include darken to your code:

script

(src) ************************************************=(********************************  (https://unpkg.com/darken) ********************************************
************************ (************************************************> (script) **************************************************
(********************************************** const
darkmode
=
(new)   (darken)  ();
(************************************************ (script>
(************************************************ () **********************

Using NPM
Install darken with npm:
And import it in your code:
(import)   (darken)   (from************  (******************************** (') ************************************************ (darken) ********************************************** '';   const
darkmode
=
(new)   (darken)  ();  (**********************************
************************************************Usage
(Basic) ********************************************
Here is a basic usage of darken:

	

			
	

			


		
			
			
					
			
		

(********************************************** id=
"
darkmode-button” (**********************************src=
"
path / to / darken  (************************************************ (********************************> (script)
(********************************************** const
darkmode
=
(new)   (darken)  ({class:"darkmode-active"
,variables:{(**********************************************
- primary-color"
:  ["#000000","#fafafa"],(**********************************************
- background-color"
:  ["#fafafa","#000000"] },toggle:"# darkmode-button"(************************************************,
});
(************************************************ (script>
You can either use a class and / or CSS variables to customize your styles.
**************************************************Options

(const)   (defaultOptions)={ container:null, default:" (light)  "

, toggle:null, class:" (darken)  "
, variables:{}, }
(Type:) ****************************************************** (String) *********************************************************,  (Default:) **************************************************** (null) ********************************************************
Element selector to the container of darken. The darkmode will be applied only to the selected container.
If the value is left to `` null`, the document element will be selected instead.
********************
******************************
(Type:) ****************************************************** (String) *********************************************************,  (Default:) ****************************************************** “light”  (*************************************************************
Defines the default mode on page load.
**********************
****************************
toggle
(Type:) ****************************************************** (String) *********************************************************,  (Default:) **************************************************** (null) ********************************************************
Element selector to the toggle button, the selected element will call the  togglemethod on click .(****************************************************************************************  class
********************************
(Type:) ****************************************************** (String) *********************************************************,  (Default:)  "darken"  (*************************************************************
Class that will be added to the selected container when the darkmode is active. The class is removed of the selected container once the darkmode is disabled.
If no container is selected, the class will be added to the  (body) ************************************************ element instead.(******************************************************************
**************************
****************************
variables
(Type:) ****************************************************** (Object) ********************************************************,  (Default:) ****************************************************** {}
List of CSS variables that will change when the darkmode is active.
The Keys of the object are the variables names, the value are arrays where the 1th index is the value the variable will take in lightmode and the 2nd index the value the variable will take in darkmode.
(variables) :
{  (**********************************************
- name-of-the-variable” (********************************** (********************************:  ["lightmode value","darkmode value"],  (**********************************************
- background-color"
:  ["white","black"], }
**************************************************************************************API
The  (darken) ******************************************************** (class is the entry point to the library.)
(const)   (darkmode)=(******************************** (new) ************************************************  (darken) ************************************************ (options);  (************************************************  (**********************************************************************************************************************toggle ()
(Return:) ******************************************************* (none) ********************************************************
Toggles darkmode. (********************************************************************
************************on ()
(Return:) ******************************************************* (none) ********************************************************
Enables darkmode. (**********************************************************************  () ************off ()
(Return:) ******************************************************* (none) ********************************************************
Disables darkmode.
**************************************************************  (**********************************************
Contributing
Any help and contribution is always welcome, feel free to submit issues and / or contribute to the project.Fork the Project
Create your Feature or Fix Branch (************************************************ git checkout -b feature / feature-name  (or) ********************************************************** git checkout -b fix / fix-name)
Commit your Changes************************************** git commit - m 'Add some feature or fix'
Push to the Branch (
************************************ git push origin feature / feature-name  or  git push origin fix / fix-name
Open a Pull Request********************************************************************
darken is distributed under the MIT License. See  (LICENSE) ********************************************************** for more information.
********************************************************************Contact
Colin Espinas -  Website-  ([email protected])
Project link:https://github.com/ ColinEspinas / darken
************  (microbundler)
********************************************************************     (********************************************************************************Read More************************************************************************