docsify-darklight-theme

Docs & Preview | Changelog

A Dark and light theme with switch for your docsify site

docsify-darklight-theme is a simple and highly customizable theme for the documentation websites generated using docsify.js. Using this theme, documents will have a theme switcher to switch between dark-mode and light-mode .

Features

• Theme switcher
• Themes are customizable based on your color preferences
• Preferences can be modified directly in window.$docsify configuration object
• Default theme(Dark/Light) can be configured based on your needs.
• Themes are remembered and retrieved from local storage.
• Redesigned search box.

Installation

Add the below stylesheet on top of the index.html file

<link 
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css"
    title="docsify-darklight-theme"
    type="text/css"
/>

Note : Remove all stylesheets included on top of index.html if you have any conflict with above CSS file

Add the below script file on bottom of the index.html file

<script 
    src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js"
    type="text/javascript">
</script>

Configuration

You can customize the color preference for your document by modified the colors in window.$docsifyconfiguration object for both dark and light mode.

Variable structure

In your docsify config object on index.html add the below object with your own variables as follows:

    window.$docsify = {

        // ...

            darklightTheme: {

                defaultTheme : 'light | dark',
                dark: {
                    <your_variable> : <value>
                },
                light: {
                    <your_variable> : <value>
                }

            }

        // ...

    };

Default themes configuration

    window.$docsify = {

        darklightTheme: {

            defaultTheme : 'light',
            dark: {
                background: '#091a28',
                textColor: '#b4b4b4',
                codeTextColor : '#ffffff',
                codeBackgroudColor : '#0e2233',
                borderColor : '#0d2538'
            },
            light: {
                background: 'white',
                textColor: '#34495e',
                codeTextColor : '#525252',
                codeBackgroudColor : '#f8f8f8',
                borderColor : 'rgba(0, 0, 0, 0.07)'
            }
        }

Release notes

View the Change log to know the details of each versions.

License

This project is licensed under the terms of the MIT license. © Boopathi Kumar