Swap an Image based on Light or Dark state of the site. #571

IAmVigneswaran · 2023-06-18T01:08:06Z

I am trying to swap an image based on the state of the site (Light or Dark).

But image alignment and sizing is not right and it is not centered or responsive. How can I fix or tweak the syntax?

I haven using this syntax for trial and error. I am sure I am missing something and doing it wrong.

<div class="flex">
<a href="" class="flex">
<span class="grow-0 shrink-0 overflow-hidden">
<img class="max-h-10 dark:hidden md:inline-block" src="/static/sample-text-black.png">
<img class="max-h-10 hidden dark:inline-block" src="/static/sample-text-white.png">
</span>
</a>
</div>

When I change the value of max-h-10 to max-h-11 or max-h-12, the logo becomes way too big and goes beyond the middle section.

<div class="flex">
<a href="" class="flex">
<span class="grow-0 shrink-0 overflow-hidden">
<img class="max-h-11 dark:hidden md:inline-block" src="/static/sample-text-black.png">
<img class="max-h-11 hidden dark:inline-block" src="/static/sample-text-white.png">
</span>
</a>
</div>

I have provided the sample image for your test.

Hope you can offer a solution. Thank you.

latenitefilms · 2023-06-18T07:35:22Z

Maybe try something like this?

<!DOCTYPE html>
<html>
<head>
    <title>Toggle Dark and Light Mode</title>
    <style>
        html {
            transition: background-color 0.5s ease;
            color: black;
        }
        html.dark {
            background-color: #121212;
            color: white;
        }
        .modeImage {
            width: 300px;
            height: 300px;
            background-image: url('sample-text-black.png');
            background-size: cover;
            background-position: center;
        }
        html.dark .modeImage {
            background-image: url('sample-text-white.png');
        }
    </style>
    <script>
        function toggleDarkLightMode() {
            var html = document.documentElement;
            html.classList.toggle("dark");
        }
    </script>
</head>
<body>
    <h1>Welcome to my page!</h1>
    <button onclick="toggleDarkLightMode()">Toggle Dark/Light Mode</button>
    <div class="modeImage"></div>
</body>
</html>

geoffreymcgill · 2023-06-19T03:36:54Z

The following seems to work pretty well:

![](/static/sample-text-black.png){ class="dark:hidden md:inline-block" }

![](/static/sample-text-white.png){ class="hidden dark:inline-block" }

Hope this helps.

IAmVigneswaran · 2023-06-19T04:01:51Z

@geoffreymcgill

Thanks for the suggestion!

But when switching light mode, the white image still appears below the black image shifting the text block below.

geoffreymcgill · 2023-06-19T06:50:53Z

Here is a new sample, although it does require a small amount of custom CSS to be added into the _includes/head.html file.

_includes/head.html

<!-- Add content to _includes/head.html to include here -->
<style>
    .relight {
        display: inline !important;
    }

    .dark .relight {
        display: none !important;
    }

    .redark {
        display: none !important;
    }

    .dark .redark {
        display: inline !important;
    }
</style>

sample.md

 # Sample

This is some text before.

![](/static/sample-text-light.png){ class="relight" } 
![](/static/sample-text-dark.png){ class="redark" }

This is some text after.

Screen.Recording.2023-06-19.at.12.48.49.AM.mov

I named the two custom classes relight and redark, but you could rename to anything. There is probably better naming convention for those two classes, but I don't have any good ideas right at the moment. I'll put some thought into it.

Hope this helps.

IAmVigneswaran · 2023-06-19T07:11:11Z

@geoffreymcgill Thanks for the new suggestion!

Although, on your video, there is no shift, when I try it at my end, there is small amount of shift.

Edit:

I have figured out what was causing the shift. It turns out you have to place the image in same line instead of new line break.

 # Sample

This is some text before.

![](/static/sample-text-light.png){ class="relight" } ![](/static/sample-text-dark.png){ class="redark" }

This is some text after.

Thank you!

geoffreymcgill self-assigned this Jun 19, 2023

geoffreymcgill closed this as completed Jun 20, 2023

Canadastartes mentioned this issue Jan 6, 2024

Image component: Ability to provide a different image for the dark theme #671

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Swap an Image based on Light or Dark state of the site. #571

Swap an Image based on Light or Dark state of the site. #571

IAmVigneswaran commented Jun 18, 2023 •

edited by geoffreymcgill

latenitefilms commented Jun 18, 2023 •

edited

geoffreymcgill commented Jun 19, 2023

IAmVigneswaran commented Jun 19, 2023

geoffreymcgill commented Jun 19, 2023

IAmVigneswaran commented Jun 19, 2023 •

edited

Swap an Image based on Light or Dark state of the site. #571

Swap an Image based on Light or Dark state of the site. #571

Comments

IAmVigneswaran commented Jun 18, 2023 • edited by geoffreymcgill

latenitefilms commented Jun 18, 2023 • edited

geoffreymcgill commented Jun 19, 2023

IAmVigneswaran commented Jun 19, 2023

geoffreymcgill commented Jun 19, 2023

_includes/head.html

sample.md

IAmVigneswaran commented Jun 19, 2023 • edited

IAmVigneswaran commented Jun 18, 2023 •

edited by geoffreymcgill

latenitefilms commented Jun 18, 2023 •

edited

IAmVigneswaran commented Jun 19, 2023 •

edited