A Cutesy Dark Mode Toggle Button for React

use-dark-mode .A custom React Hook to help you implement a “dark mode” component for your application. The user setting persists to localStorage.

useDarkMode works in one of two ways:

By toggling a CSS class on whatever element you specify (defaults to document.body). You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.
```
body.light-mode {
  background-color: #fff;
  color: #333;
  transition: background-color 0.3s ease;
}
body.dark-mode {
  background-color: #1a1919;
  color: #999;
}
```
If you don’t use global classes, you can specify an onChange handler and take care of the implementation of switching to dark mode yourself.

New in Version 2.x

useDarkMode now persists between sessions. It stores the user setting in localStorage.
It shares dark mode state with all other useDarkMode components on the page.
It shares dark mode state with all other tabs/browser windows.
The initial dark mode is queried from the system. Note: this requires a browser that supports the prefers-color-scheme: dark media query (currently Chrome, Firefox, Safari and Edge) and a system that supports dark mode, such as macOS Mojave.
Changing the system dark mode state will also change the state of useDarkMode (i.e, change to light mode in the system will change to light mode in your app).
Support for Server Side Rendering (SSR) in version 2.2 and above.

Requirement

To use use-dark-mode, you must use react@16.8.0 or greater which includes Hooks.

Installation

$ npm i use-dark-mode

Usage

const darkMode = useDarkMode(initialState, darkModeConfig);

Parameters

You pass useDarkMode an initialState (a boolean specifying whether it should be in dark mode by default) and an optional darkModeConfig object. The configuration object may contain the following keys.

Key	Description
`classNameDark`	The class to apply. Default = `dark-mode`.
`classNameLight`	The class to apply. Default = `light-mode`.
`element`	The element to apply the class name. Default = `document.body`.
`onChange`	A function that will be called when the dark mode value changes and it is safe to access the DOM (i.e. it is called from within a `useEffect`). If you specify `onChange` then `classNameDark`, `classNameLight`, and `element` are ignored (i.e. no classes are automatically placed on the DOM). You have full control!
`storageKey`	A string that will be used by the `storageProvider` to persist the dark mode value. If you specify a value of `null`, nothing will be persisted. Default = `darkMode`.
`storageProvider`	A storage provider. Default = `localStorage`. You will generally never need to change this value.

Return object

A darkMode object is returned with the following properties.

Key	Description
`value`	A boolean containing the current state of dark mode.
`enable()`	A function that allows you to set dark mode to `true`.
`disable()`	A function that allows you to set dark mode to `false`.
`toggle()`	A function that allows you to toggle dark mode.

Note that because the methods don’t require any parameters, you can call them direcly from an onClick handler from a button, for example (i.e., no lambda function is required).

Example

Here is a simple component that uses useDarkMode to provide a dark mode toggle control. If dark mode is selected, the CSS class dark-mode is applied to document.body and is removed when de-selected.

import React from 'react';
import useDarkMode from 'use-dark-mode';

import Toggle from './Toggle';

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <div>
      <button type="button" onClick={darkMode.disable}>
        ☀
      </button>
      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />
      <button type="button" onClick={darkMode.enable}>
        ☾
      </button>
    </div>
  );
};

export default DarkModeToggle;

That flash!

If your CSS is setup to default to light mode, but the user selects dark mode, the next time they visit your app, they will be in dark mode. However, the user will see a flash of light mode before the app is spun up and useDarkMode is called.

To prevent this, I’ve included some vanilla JavaScript that you can insert in your index.html just after the <body> tag. It is in a file named noflash.js.txt. You can either insert the contents of this file in a <script> tag or automate the step in your build process.

Note that if you change any of the default—such as storageKey or classNameDark for example—the noflash.js file will need to be modified with the same values.

Gatsby users may leverage gatsby-plugin-use-dark-mode to inject noflash.js for you.

Sample Apps

Here is a list of apps build with use-dark-mode. If you have an app you would like to include on this list, open a PR.

Demo App on CodeSandbox - by @donavon

Download Details:

Author: donavon

GitHub: https://github.com/donavon/use-dark-mode

#reactjs #javascript

What is GEEK

Buddha Community

A Cutesy Dark Mode Toggle Button for React

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

websolution stuff

1626415140

How To Toggle Dark and Light Mode using jQuery

Hello Guys,

In this tutorial I will show you how to toggle between dark and light mode using jQuery.

As per the current trend of web development in many websites provides to user for reading select theme like dark mode and light mode or day mode and night mode of website and it’s very easy to implement in website.

In this just write some css code and java script for toggle dark mode and light mode website also you can store in local storage for save the state of user select theme like dark mode and light of website.

https://websolutionstuff.com/post/how-to-toggle-dark-and-light-mode-using-jquery

Read Also : How Generate PDF From HTML View In Laravel

https://websolutionstuff.com/post/how-generate-pdf-from-html-view-in-laravel

#how to toggle dark and light mode using jquery #dark and light mode #toggle between light and dark mode #jquery #day and night mode #dark mode website

Ayan Code

1657830250

Dark Mode Toggle Button in JavaScript | Source code

Hey Devs, Today in this post we’ll learn How to Create a Dark Mode Toggle Button in JavaScript with fantastic design. Hope you enjoy this post.

Adding a dark/light mode feature on a website has been on rising. You could have already seen them on different websites. This feature enhances quality and user satisfaction. Various websites like YouTube, and Facebook have introduced such dark mode features.

Let's head to create it!

Demo

Click to watch demo!

Dark Mode Toggle Button in JavaScript | source code

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <div class="all">
    <div class="container">
        <input type="checkbox" id="toggle">
    </div>

    <p>
        Lorem30
    </p>
   </div>

    <script src="script.js"></script>
  </body>
</html>

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.all{
  width: 400px;
  margin: 40px auto;
}
.container{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    position: relative;
}
#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 32px;
    width: 65px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}
#toggle:after{
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}
p{
    font-family: "Open Sans",sans-serif;
    line-height: 35px;
    padding: 10px;
    text-align: justify;
    }
.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}

JavaScript Code

document.getElementById("toggle").addEventListener("click", function()
{
    document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});

Congratulations! You have now successfully created our Dark Mode Toggle Button in JavaScript.

My Website: codewithayan, see this to check out all of my amazing Tutorials.

JavaScript Daily

1680087863

How to Day and Night Mode Toggle using JavaScript

In this article, I have shown you how to create Day and Night Mode Toggle using HTML CSS and JavaScript. Earlier I shared with you the design of many more types of CSS Toggle Switch. This is the first time we have created a Day and Night Mode design using toggle design.

Now, different types of websites use dark and light themes. This kind of feature undoubtedly enhances the quality and user satisfaction of the website. Various websites like YouTube, Facebook have introduced such dark mode features. If you want, you can easily create such designs with the help of HTML CSS, and JavaScript.

Day and Night Mode Toggle JavaScript

In the following tutorial, I have shown how to create a dark mode toggle. There is no reason to worry if you are a beginner. Here is a complete step-by-step tutorial for you. Here is an explanation of each code used.

Here JavaScript is just two lines and the rest is a little bit HTML and CSS. If you have an idea about basic HTML CSS and JavaScript then you can easily create a project (Day and Night Mode JavaScript) by following this tutorial.

Below is a demo that will help you learn how it works. Here you will find the required source code.

On the first, I have defined an area that will contain the contents. Then I created the toggle button which will change the dark and light mode. Then I added all the tests using the paragraph below.

Step 1: Basic area of content

I have created an area for this project using the code below. This area cannot be seen because the background color was not used. However, it will contain all the information. The width of this area 500px.

<div class=”all”>
 
</div>
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.all{
  width: 500px;
  margin: 40px auto;
}

Step 2: Create a day-night toggle button

Now I have made one of these switches that can be used to switch from dark to light mode and from light to dark mode. Checkboxes are used to install such switches. Similarly, I have taken the help of the check box using input.

<div class=”container”>
  <input type=”checkbox” id=”toggle”>
</div>
.container{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    position: relative;
}

Button width: 75px, height: 40px and background-color I used black.

#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 75px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}

Now I have created a button in it using CSS’s “: after” tag. If you watch the demo you will understand that there is a button in the Toggle switch.

The following codes have been used to create it. I saw the button equal in length and height and used border-radius: 50% to make it completely round.

#toggle:after{
    content: “”;
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}

Step 3: Add text with the help of paragraphs

Now I have added all the tests in the paragraph tags. This box does not have a specific height, it will determine its own height based on the amount of content. However, box-shadow has been used which will determine its size.

 <p>
    Lorem ipsum dolor sit amet …. ratione quisquam?
 </p>
p{
    font-family: “Open Sans”,sans-serif;
    line-height: 35px;
    padding: 10px;
    text-align: justify;
    box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

Step 4: Add CSS code for Dark Mode

Now I have added what will change during Dark Mode. What we have added above is for light mode only. I have added here what will change when the light mode is converted to dark mode. Then I will link these codes to Suez using JavaScript.

First indicates the background color and the color of the text. When you turn on the dark mode the background color of the text will be black and the text color will be white. This will change the background color of the switch from black to white.

.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}

Remember that you will not get the result shown in your picture in this step. This can be seen after adding JavaScript. But here I have given the image to understand what will change after using the css code.

Step 5: Activate dark mode toggle using JavaScript

Using a little bit of JavaScript I have linked the CSS codes of the dark mode added above in the switch. Using the click method here I have indicated that “dark-theme” will work when you click on “toggle”.

document.getElementById(“toggle”).addEventListener(“click”, function(){
    document.getElementsByTagName(‘body’)[0].classList.toggle(“dark-theme”);
});

Activate dark mode toggle using JavaScript

Hopefully, the above tutorial has helped you to know how I created this Day and Night Mode Toggle project using HTML CSS, and JavaScript.

If you have any problems you can let me know by commenting. Below is the source code for creating this day-night toggle button that you can download.

Original article source at: https://foolishdeveloper.com/

#javascript #day #toggle