Have ideas to improve npm?Join in the discussion! Β»

    @asomani/darkmode

    1.1.2Β β€’Β PublicΒ β€’Β Published

    Welcome to Dark Mode πŸ’«

    An easy-to-use customizable dark mode react component.

    Demo

    Demo Website!

    Install

    npm i --save @asomani/darkmode
    yarn add @asomani/darkmode
    

    Import

    import DarkMode from '@asomani/darkmode'
    

    Use

    Use it as a wrapper around everything you want to incorporate into low light mode (for most people, this would be the entire page –– and thus, the outermost component). An example:

    ReactDOM.render(
      <DarkMode>
        <App />
      </DarkMode>, document.getElementById('root'));
    

    Basic Rules For Passing Arguments

    • If you don't mention the prop (eg, if you pass in no value for background), the component will render into the default palette that I've set up.
    • If "" is set as the value of the prop (eg, <DarkMode background="" />) then no color change shall take place for that passed in prop.
    • If a certain valid color is passed in as the value of the prop (ed, <DarkMode background="black" />), then the HTML of that prop shall be rendered in that color.

    Passed-in Prop Options

    background

    Set the background of the entire page to the passed in color. If nothing is passed in, sets background color to #121212

    default

    Sets the default color of the text of the page, should it not be override by some more specific color. If nothing is passed in, sets text color to #f0f0f0e5

    h1, h2, h3, h4, h5, h6, p, code

    Sets the value for all specific text to passed in color. If nothing is passed in, sets text color to #f0f0f0e5

    a

    Sets the value for all links to passed in color. If nothing is passed in, sets text color to #e454f7

    ahover

    Sets the value for all links being hovered over to passed in color. If nothing is passed in, sets text color to #7e0a8d

    codebackground

    Sets the value for code line background color to passed in color. If nothing is passed in, sets background color to #784e85b2

    Example

    import React from 'react'
    import DarkMode from '@asomani/darkmode'
    
    const App = () => (
      <div>
        <h1> This is h1 text. </h1>
        <h2> This is h2 text, </h2>
        This is text that will be overriden by the default parameter.
      </div>
    );
    
    ReactDOM.render(
      <DarkMode background="black" default="white" h1="orange" h2="green">
        <App />
      </DarkMode>, document.getElementById('root'));
    

    Contributing 🀝

    If you're interested in helping out on this project, fork this repo. In the darkmode folder is the main component. It's pretty self-explanatory in that file, in my opinion.

    Currently, I'm working on:

    • Adding some parameters to pass in
    • Giving people the ability to pass in entire stylesheets
    • Setting up an option to pass in a custom toggle
    • Making toggle location more variable

    Made with β™₯️ by asomani

    Install

    npm i @asomani/darkmode

    DownloadsWeekly Downloads

    19

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    59.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar