implement a night mode with a single click

I attempted to implement a dark mode using jQuery, but it is not working as expected. I am seeking assistance. I would like to enable the dark mode when clicking on the #btntheme ID, but for some reason, it is not functioning correctly. My goal is to be able to switch back to a colorful theme upon clicking. Does anyone have any insights on how to achieve this?

<div class="container">
  <div class="row" style="background:">
    <div class="two columns absolute" style="background: ">
      <a href="home.php"> <img src="../content/logo_tw.png" width="50" height="50" alt="logo"></a><br>
      <a href="home.php"> <img src="../content/home.png" width="20" height="20" alt="home"><strong>Home</strong></a><br>
      <a href="recherche.php"> <img src="../content/loupe.jpg" width="20" height="20"
          alt="recherche"><strong>Search</strong></a><br>
      <a href="messages.php"> <img src="../content/message.png" width="20" height="20"
          alt="messages"><strong>Messages</strong></a><br>
      <a href="profile.php"> <img src="../content/profile.png" width="20" height="20"
          alt="profile"><strong>Profile</strong></a><br>
    </div>
    <div class="ten columns separator border" style="background: ">
      <div class="pseudo">
        <a href="profile.php">
          <h3>Risitas</h3>
      </div>
      </a>
      <hr>
      <div id="fond"></div>
      <div id="avatar">
        <img src="../content/risitasb.jpg">
        <a href="modif_profil.php">  <button id="btnfollow" class="button-primary">Edit profile</button></a>
      </div>
      <form action="profile.php" method="post">
        <button id="btntheme" type="submit" class="button-primary">Theme</button>
        <button id="btncommentaire" class="button-primary">Comments</button>
        <button id="btnretweet" class="button-primary">Retweet</button>
      </form>

  </div>
</div>


</div>
</body>
jqueryhtmlcss

Answer №1

Check out this codepen I created for you: https://codepen.io/billgil/pen/WNvoGjB

To make things easier, I have included the necessary JavaScript within the HTML. Simply click the 'dark-mode' button to add a class to the body tag. You can then use the provided CSS example to style elements within that class accordingly.

Hope you find it useful!

<!-- BUTTON TO TOGGLE DARK MODE -->
<button id='jsDarkToggle' onclick={document.body.classList.toggle('dark-mode')}>Dark Mode</button>

<!-- EXAMPLE OF YOUR HTML STRUCTURE -->
<div class="container">
  <div class="row" style="background:">
    <div class="two columns absolute" style="background: ">
      <a href="home.php"> <img src="../content/logo_tw.png" width="50" height="50" alt="logo"></a><br>
      <a href="home.php"> <img src="../content/home.png" width="20" height="20" alt="home"><strong>Home</strong></a><br>
      <a href="recherche.php"> <img src="../content/loupe.jpg" width="20" height="20"
          alt="recherche"><strong>Search</strong></a><br>
      <a href="messages.php"> <img src="../content/message.png" width="20" height="20"
          alt="messages"><strong>Messages</strong></a><br>
      <a href="profile.php"> <img src="../content/profile.png" width="20" height="20"
          alt="profile"><strong>Profile</strong></a><br>
    </div>
    <div class="ten columns separator border" style="background: ">
      <div class="pseudo">
        <a href="profile.php">
          <h3>Risitas</h3>
      </div>
      </a>
      <hr>
      <div id="fond"></div>
      <div id="avatar">
        <img src="../content/risitasb.jpg">
        <a href="modif_profil.php">  <button id="btnfollow" class="button-primary">Edit profile</button></a>
      </div>
      <form action="profile.php" method="post">
        <button id="btntheme" type="submit" class="button-primary">Theme</button>
        <button id="btncommentaire" class="button-primary">Comments</button>
        <button id="btnretweet" class="button-primary">Retweet</button>
      </form>

  </div>
</div>

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

.dark-mode a {
  color: white;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Dropzone not functioning correctly within Vue transition modal

I've implemented a dropzone function in the mounted function, which works perfectly when the dropzone is outside of a modal in the view. However, when I try to use it within a modal with a transition effect, it doesn't work. Any suggestions on ho ...

javascripthtmlvue.js

unable to format radio button list

Having trouble aligning the radiobutton list to the left of the label above. Here is the code snippet: <div style="border-radius: 10px;"> <div style="margin-bottom: 10px"></div> <asp:Panel ID="panel" runat="server"&g ...

htmlcssasp.netradiobuttonlist

The CSS code does not seem to be rendering properly within the plugin when attempting to generate a PDF file

I attempted to use a rendering plugin in order to create a PDF file. However, when I tried to add a CSS file for my template, it did not work as expected. I am a bit confused about how to properly import a CSS file into my GSP page. Here is the template c ...

htmlmavengrailsrenderinggsp

Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...

htmlcssformsmaterialize

pressing the button again will yield a new outcome

I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow. <Button onClick={this.s ...

javascripthtmlcssreactjstypescript

Experience the smooth CSS3 transition effects on iOS devices such as iPhones and iPads. Elevate the appearance of DOM objects with

I have a basic image contained within a div tag. I use JavaScript to add a transition effect to the div element: <div style="transition: opacity 0.8s linear; opacity: 0.5;"><img src="..." /></div> At the end of the transition duration ...

iosipadcsscss-transitionsmobile-webkit

jQuery-powered automatic horizontal scrolling

Does anyone know of a jQuery plugin that allows for scrolling of a div element when hovering over an arrow? The desired functionality is similar to the following image: , where the content inside automatically scrolls left or right when the user hovers ove ...

jqueryscroll

Is it possible to create a CSS design where alternating table rows have two different heights?

Looking to design a table where the height of every other row is approximately one-third of the preceding row. I've managed to style this with an inline method, but I'm curious if it's possible to create separate tags for different tr styles ...

htmlcsshtml-table

The fixed-top navbar in Bootstrap 5 is not displaying the toggle button

I have encountered an issue with the Bootstrap 5 navbar. When I set it to be fixed at the top, the toggle button does not show up when resizing the browser window. However, if I remove the 'fixed-top' class, the toggle appears as expected. What c ...

htmltwitter-bootstraptogglenavbarbootstrap-5

What is causing the navbar to malfunction on mobile devices?

I am facing an issue with my bootstrap navbar. It seems to be getting stuck when the screen resizes or when viewed on a mobile device. I have tried several solutions from various sources, but none seem to work. Here are some of the answers that I have look ...

javascripthtmlcssbootstrap-4

Tips for updating the content of a div with the click of another div

Is there a way to dynamically change the content of a div upon clicking on a menu item? Here is the current layout for reference: https://i.stack.imgur.com/nOnlQ.png Below is the CSS and HTML code snippet: body { background-color: #555657; ...

javascripthtmlcss

Make a big picture fit into a tiny container

I have a question about image rendering. What occurs when we try to fit a large image into a small container? Consider, for example, creating an HTML page with a 100x100 px image on a device with a pixel ratio of 2. Situation 1: Placing the image inside a ...

htmlcsspixeldevicepixelratio

What is the secret to keeping a hover effect active?

As I hover over the buttons in my stack, a text box appears on the right side. The intention is for this text box to act as a scroll box, but it disappears when I move my mouse to scroll because it needs to be continuously hovered upon to stay active. To ...

htmlcsshover

Discovering the current page using ons-navigator in Onsen UI

I am currently attempting to determine the page I am on while using the popPage() function with Onsen UI's ons-navigator. I have tried the following methods, but they always return false regardless: this.navigator.nativeElement.popPage().then((page: a ...

htmlangulartypescriptnavigationonsen-ui

Unable to send multiple data parameters from jQuery AJAX to Razor OnPost

I have been attempting to pass multiple parameters using AJAX in various ways with the "data:" attribute, but not all parameters are being successfully passed. Here is the OnPost PageModel method: public JsonResult OnPostCreate(Product product, int id, st ...

jqueryajax

When an image is clicked, I would like it to redirect to a different page

In my slider image list, each image has an ID. If the ID becomes equal to a specific number, such as 24, I want that particular image to move to another page when clicked. Here is the code snippet: <?php $sql = "select * from ".$tblImages." Where cid= ...

phphtml

AngularJS radio buttons are unable to be selected in a simplistic manner

I have implemented a dynamic list display using HTML radio buttons. Here is the code snippet: <html> <head> <script src="angular-v1.5.5.js"></script> </head> <body> <div ng-app="myApp" ng-controller=" ...

javascripthtmlangularjs

Unable to specify the content-type as 'application/json' using jQuery.ajax

When I use the following code $.ajax({ type: 'POST', //contentType: "application/json", url: 'http://localhost:16329/Hello', data: { name: 'norm' }, dataType: 'json' }); In Fiddler, I can see th ...

jsonjquerycontent-typewcf-rest

The rotation of an image in Microsoft Edge results in an HTML file display

One of the images on my website is sourced like this: <p> <img src="images/image.jpg" style="width: 50%;" /> </p> Surprisingly, in Chrome and Firefox, the image looks fine (just how I uploaded it to the server). H ...

htmlcssimageorientation

Flexbox not rendering correctly on IE and Chrome browsers

Initially, I avoided using flexboxes because of concerns about older browser support. However, the alternative involved floats, margins, z-indexes, and resulted in a layout that was visually unattractive. Despite setting specific dimensions for the left-h ...

htmlcssflexbox