Button for Dark Mode

I have created a button that is supposed to switch the background color from black to blue. However, I am having trouble finding an easy solution to do so. Here is my HTML file:

<div style="background-color: #161624; width: 100%; height: 20%; "></div>
<div style="background-color: #efece7; width: 100%; height: 60% "></div>
<div style="background-color: #161624; width: 100%; height: 20%; vertical-align: bottom; "></div>

<button id="changecolor">Change Color</button>

</div>

I want the changecolor button to change the background color where the height is set at 20% on both sides. View image description here

The transition should be from blue to black.

htmlcssbuttondarkmode

Answer №1

To enhance the user experience, I suggest utilizing a separate CSS file that includes classes for different colors and designs depending on whether it is dark or light mode.

You can simply apply a CSS class named "example" below and integrate some JavaScript to allow for easy switching of classes on the desired button or element.

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}
body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

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

While this code snippet currently targets the body, it can easily be adjusted to target any other element you wish.

Feel free to reach out if you have any questions!

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

What is the best way to include two rows in a single INSERT statement?

For each product that a customer selects to purchase, I have set up a shopping cart to display these items. The requirement is to add each selected product as a separate row in the 'order_details' table with the same customer_id. Screenshot: htt ...

phphtmlmysql

The mat-select choices are experiencing rendering issues

This is the HTML code I am using to display select locations and a map below it: Here is the HTML code for the above view, <mat-form-field class="locationSelector"> <mat-select placeholder="Choose location" (ngModel)="ServiceLocations"> ...

cssangularangular-materialangular-google-maps

Tips for adding classes to both parent and child elements in dynamically loaded data via an ajax request

I am facing a challenge with jQuery as a beginner. I have been struggling for the past week to load data from a JSON array using an ajax call. I'm also using a swipe plugin to swipe and display all images on the same div, but I'm unsure of how to ...

javascriptjquerycssajaxswiper.js

CSS Animation Effect on Transparent PNG Image

Today, while working on my website, an interesting CSS effect came to mind. I vividly remember seeing it a few months ago, but unfortunately, I couldn't find it among my bookmarks. The website featured a captivating design with a prominent logo that ...

cssanimationcolorsspinning

Navigating the dropdown sub menus in Bootstrap using keyboard shortcuts

Enabling WCAG compliance for a dropdown menu requires keyboard navigability, in addition to mouse functionality. It seems that the bootstrap developers removed sub-menu support some time ago due to mobile unfriendliness, but my specific needs are limited t ...

javascriptjquerycssbootstrap-4wcag2.0

Eliminate whitespace on the right side of a webpage using Bootstrap

I am currently working on a form that will appear in a modal, but I need it to be centrally aligned so that I can reduce the size of the modal. Here is what I have implemented so far: It seems like there is some space being "reserved" for columns that are ...

htmlcsstwitter-bootstrapbootstrap-modal

Issue with rowspan = 0 causing formatting errors in HTML tables

Hey there! I'm currently facing an issue with trying to make the last row of a tbody fill the height of the first cell. The rowspan=0 attribute is supposed to allow the TD element to span as many rows as are in the tbody group. The reason I am asking ...

html

Implementing a Custom <link> Tag in the Head of a Next.js 13 Website

I am striving to incorporate a Safari pinned tab style into my Nextjs13 app. To achieve this, the following tag should be visible in the <head> section: <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#325758&qu ...

javascripthtmlreactjsnext.jsnext.js13

Organizing my website directories using external tools

I am dealing with a website that follows this specific structure: \ |--css | \ | |--vendors | | \ | | |--normalize.css | | |--... | | | |--styles.css | |--media-queries.css | |--js | \ | |--vendors | | \ | | |- ...

javascriptcssweb

Eliminate billing information from the Woocommerce order management page on the backend

Is there a way to modify the text "Paid on" in the backend order details page of WooCommerce? I have already implemented this for BACS and local pickup payment methods. Replace a specific word for BACS payment method in Woocommerce order edit pages I am ...

csswordpresswoocommerceorderswoocommerce-theming

I am having trouble grasping the concept of how the find method operates in

I am new to using jquery. I have created a table in HTML below: https://i.sstatic.net/6Odg3.png My goal was to display three alert boxes consecutively for 3 checkboxes found in my table. Here is the code I used: $(document).ready(function(){ $("#but ...

jqueryhtml

What's the best way to use CSS for making a linear gradient that spans horizontally and includes several different color transitions

When I use the following code: <style> h1 { height: 200px; background: linear-gradient(red, green, blue); } </style> I get the standard color spectrum with horizontal lines. Now, I want to change it so that the lines are vertical. I& ...

htmlcss

Issues surrounding horizontal scrolling using CSS and HTML

Recently, I've been honing my coding skills by creating websites using HTML and CSS. I came up with an interesting concept for a horizontal scrolling menu. You know the type I'm talking about - where clicking on one item jumps to another in a cyc ...

htmlcss

Using npm webpack-mix to execute a JavaScript function stored in a separate file

Currently, I am facing a challenge with accessing a function that is defined in the table.js file from within my index.html. Here is a snippet of the code: table.js let table; function set_table(table) { this.table = table; consol ...

javascripthtmljquerynpmwebpack

Inline-block display causing divs to act unpredictably

I am working with a main div that contains three smaller divs inside. Each of these divs has been assigned a width of 30%, and they are all perfectly centered within the main div. To ensure that the three divs appear side by side, I used the display: inli ...

csshtml

`to shift the background image`

Seeking assistance with CSS as I am struggling to get it right. I have a div containing other elements: <div class="place_section" style="height:375px;" data-session="3" data-client="2"> <div class="row">1</div> <div id="3" cl ...

htmlcss

Prevent Code Execution on Mobile Devices' Browsers

Could someone provide me with the necessary code to prevent certain elements from displaying on a mobile browser? I am specifically looking to exclude particular images and flash files from appearing on a website when accessed via a mobile browser. Somet ...

javascriptjqueryandroidhtmlmobile

The number input is not compatible with JavaScript/jQuery validation

While working on input field validation using javascript/jQuery code, I encountered an issue where the code worked fine with input type text but did not support input type number. Specifically, the 'number' type input did not work at all in FireF ...

javascriptjsonhtml

Transforming Symbol Characters into HTML Using VB.NET

I want to make sure that any characters in my database entry that are not numeric or alphabetic get converted to HTML code. After doing some research, I came up with the following function: Public Shared Function HTMLEncodeSpecialChars(text As String) As ...

htmlvb.netcharacter-encoding

Tips for minimizing white space in list groups for Bootstrap 4

Is there a way to decrease the spacing between list items in a list group? I attempted to adjust the margin using CSS, but encountered an issue with the last list item not formatting correctly. CSS .list-group-item{ margin-bottom: -6px; ...

htmlcssbootstrap-4