Dark Mode

A pure html and css library for dark mode in your website.

Features

It has a smooth setting and also it changes via system settings aswell. Small, but useful.

Usage

To use this library follow the steps below:

First, import the css with the following:

<link rel="stylesheet" href="https://kk-designs.github.io/dark-mode/dark-mode.css">

Then you need the javascript with can be done similar to the css:

<script src="https://kk-designs.github.io/dark-mode/dark-mode.js"></script>

Once your done with the imports your code looks something like this:

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="https://kk-designs.github.io/dark-mode/dark-mode.css">
      <script src="https://kk-designs.github.io/dark-mode/dark-mode.js"></script>
   </head>
   <body>
      <!-- Body content yet to be added -->
   </body>
</html>

Now its time to add the last element; The button. Add it in the body as the following:

<button onclick='changeToDarkMode();'>Toggle dark mode</button>

And boom your done! See options and more below.

Settings

Want to customize it? We'll we have some options for you. More options coming in the feature.

The only option we have right now is smooth change. It makes a trasistion so it doesn't look so abrupt. See the code below have to to get this:

<button onclick='changeToDarkMode({ "smooth_transition": true });'>Toggle dark mode</button>

Demo

Use this demo to see how it works.

DEMO

Thanks for using this library!

Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Jan 2, 2023

RxHtmlButtonLibrary - Html Button Styling Library by roxunlimited.com using CSS and jQuery.

rxHTMLButton Library v0.3 rxHTMLButton Library will work on almost every HTML tag. It will smoothly work on 'a href link', 'button type button', 'inpu

Sep 16, 2022

Simple CSS library for semantic HTML markup

awsm.css awsm.css is a simple CSS library for semantic HTML, which doesn't require classes, ids, attributes, etc. Just start to create page with HTML5

Dec 30, 2022

micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Mar 26, 2022

Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Dec 31, 2022

🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Dec 24, 2022