"Glowing orbs in the night: a dark mode spectacle with

Question

"Glowing orbs in the night: a dark mode spectacle with

I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage.

Here is a link to a perfect example showcasing what I am aiming for

However, unlike the provided link, I switch between night mode and light mode using the following code:

HTML I utilize a data-theme attribute to toggle between modes. (switching from night to light or light to night)

<body data-theme="">
    <div class="toggle" id="switch" onclick="toggleDarkMode()"></div>
</body>

JS

function toggleDarkMode() {
    var dataTheme = $('body').attr('data-theme');
    
    if(dataTheme == 'dark') {   
        $('body').attr('data-theme', 'light');
    } else {
        $('body').attr('data-theme', 'dark');
    }
};

I would appreciate any advice on how to implement a night mode toggle with an expanding circle animation using keyframes.
Thank you in advance!

javascript html css keyframe

Answer 1

Answer №1

An efficient approach to implementing a dark mode is to define a CSS class named dark, which contains all the necessary styles for dark mode. Then, you can toggle the presence of this class on your webpage by using an event listener.

document.querySelector('.toggle').addEventListener('click', function(e) {
  var body = document.getElementsByTagName('body')[0];
  body.className = body.className !== 'dark' ? 'dark' : '';
})

.dark {
  background: black;
  color: white;
}

<body>
  <p>Hello world</p>
  <button class='toggle'>Dark Mode</button>
</body>

Answer 2

An efficient approach to implementing a dark mode is to define a CSS class named dark, which contains all the necessary styles for dark mode. Then, you can toggle the presence of this class on your webpage by using an event listener.

document.querySelector('.toggle').addEventListener('click', function(e) {
  var body = document.getElementsByTagName('body')[0];
  body.className = body.className !== 'dark' ? 'dark' : '';
})

.dark {
  background: black;
  color: white;
}

<body>
  <p>Hello world</p>
  <button class='toggle'>Dark Mode</button>
</body>

Answer 3

Answer №2

To customize the styling of the body element based on a specific attribute, you can utilize a CSS attribute selector targeted at the data-theme attribute.

function switchTheme() {
  var theme = $('body').attr('data-theme');

  if (theme == 'dark') {
    $('body').attr('data-theme', 'light');
  } else {
    $('body').attr('data-theme', 'dark');
  }
};

body[data-theme="light"] {
  background-color: white;
  color: black;
}

body[data-theme="dark"] {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-theme="light">
  <p>Hello world</p>
  <button class="toggle" id="switch" onclick="switchTheme()">Switch Theme</button>
</body>

This approach enables you to apply various CSS styles as needed, including those referenced in your initial query.

Answer 4

To customize the styling of the body element based on a specific attribute, you can utilize a CSS attribute selector targeted at the data-theme attribute.

function switchTheme() {
  var theme = $('body').attr('data-theme');

  if (theme == 'dark') {
    $('body').attr('data-theme', 'light');
  } else {
    $('body').attr('data-theme', 'dark');
  }
};

body[data-theme="light"] {
  background-color: white;
  color: black;
}

body[data-theme="dark"] {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-theme="light">
  <p>Hello world</p>
  <button class="toggle" id="switch" onclick="switchTheme()">Switch Theme</button>
</body>

This approach enables you to apply various CSS styles as needed, including those referenced in your initial query.

Answer 5

Answer №3

Give this method a try

<script>
$(document).ready(function(){
  $("#toggle").click(function(){
       var theme = $('body').attr('data-theme');
       if(theme == 'dark') {   
           $('body').attr('data-theme', 'light');
       } else {
           $('body').attr('data-theme', 'dark');
       }
     };
});
</script>

Answer 6

Give this method a try

<script>
$(document).ready(function(){
  $("#toggle").click(function(){
       var theme = $('body').attr('data-theme');
       if(theme == 'dark') {   
           $('body').attr('data-theme', 'light');
       } else {
           $('body').attr('data-theme', 'dark');
       }
     };
});
</script>

"Glowing orbs in the night: a dark mode spectacle with

Answer №1

Answer №2

Answer №3

Similar questions

Please consider opening in a new tab rather than a new window

Adjust the size of every card in a row when one card is resized

Vue select is causing the selected choice of another selector to be influenced

What is the best way to access a video stored in a local file on the initial page and then watch it on the subsequent

Refreshing Vue by reloading new components and injecting them into the HTMLDOM

Hiding the SVG element with pattern definitions using the 'display: none' property makes the patterns completely disappear from view

Error: Trying to access properties of an undefined object (specifically 'promise.data.map')

How to include a file within another file in Node.js

Error: An issue occurred with the tasks in the Gruntfile.js file

"The boundary of suspense was updated before completing hydration." This error occurs when utilizing suspense and dynamic import within Next.js

Position the image slider uniformly at the bottom using CSS (utilizing the Slick Carousel library)

CSS layout: The full-width header should align its left margin with the centered content-div

The cart total variable in Vuejs is coming back as NaN

Gulp encountered an issue - TypeError: When attempting to call the 'match' method, it was found to be undefined

Upgrading the entire document's content using jQuery

Calculating the combined total and mean values within an object using JavaScript

"Step-by-Step Guide: Activating Tab Functionality in J

Positioning HTML elements using CSS and avoiding the use of tables

Ensure that the date range picker consistently shows dates in a sequential order

Get the value of a CSS property in Python by parsing the rendered HTML