Change the classes of the body prior to the initial rendering

Question

Change the classes of the body prior to the initial rendering

I know this may seem like a difficult task, and I understand that what I want to achieve might be nearly impossible.

My goal is to incorporate a dark/light mode switch on my website. The challenge lies in the fact that the site consists of static files on S3 and there's no server-side control at my disposal.

The issue I'm facing is how to load the correct theme when a new page is loaded. Since the value is stored in local storage, I need to retrieve it and adjust the value upon page load.

Currently, I've implemented an initial class of hidden on the body element, which changes to either light or dark when DOMContentLoaded event occurs. Unfortunately, this still results in one paint before the class is updated. Placing the JavaScript in the <head> tag solved the problem in Safari and Chrome, but not in Firefox.

The issue with the initial paint occurring is that it creates a very abrupt flashing effect, especially when switching to dark mode as the screen swiftly transitions from white to black.

So, my query is whether there's a way to modify the classes of the body element before the DOMContentLoaded event triggers?

Thank you

javascript html css repaint

Answer 1

Answer №1

One way to apply a class before the body loads is by adding it directly to the <html> element in the <head> section.

Here's an example demonstrating this approach:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
    <style>
        html.dark body { background: black; }
    </style>
    <script>
        document.getElementsByTagName('html')[0].setAttribute('class', 'dark');
    </script>
</head>
<body>

</body>
</html>

Answer 2

One way to apply a class before the body loads is by adding it directly to the <html> element in the <head> section.

Here's an example demonstrating this approach:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
    <style>
        html.dark body { background: black; }
    </style>
    <script>
        document.getElementsByTagName('html')[0].setAttribute('class', 'dark');
    </script>
</head>
<body>

</body>
</html>

Change the classes of the body prior to the initial rendering

Answer №1

Similar questions

Ways to retrieve the neighboring element's value and modify it with the help of JavaScript or jQuery

Simple: What is causing the error message "TypeError: 'int' object is not callable" to appear? (refer to line 24 in the code)

Exploring the benefits of WordPress integration with form caching and dynamic show/hide div

What is the process for refreshing the component content in Angular 2?

Warning displayed on form input still allows submission

Position the SVG next to the link text in a Bootstrap navbar brand

Unable to insert a JSON object into an Array

What is the reason behind the requirement in Javascript (ES.next) that a function must be declared as async in order to utilize await functionality?

Error: The property 'match' is undefined and cannot be read by Object.j during rendering in angular-datatables.min.js at line 6

Display data-content vertically using CSS

Guide to Embedding Dynamic Images in HTML Using VUE

What are the steps to incorporate @svgr/webpack into turbopack within a next.js project?

Issue with dynamic creation of menu in React Material UI where onClose function is unable to reference a variable inside the function

Could someone explain to me why searchQuery.value is coming up as undefined?

The tooltip in Amcharts malfunctions when incorporating the DurationAxis

What is the reason behind the failure of next/script with Google reCAPTCHA?

The Express/Mongoose route consistently modifies the identical item

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

An in-depth guide to effectively unit testing a Node.js Express application

Include a class for CSS styling in EJS using Node.js