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

IAmVigneswaran commented 1 year ago

Hello @geoffreymcgill,

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>

Test 1

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>

Test 2

I have provided the sample image for your test.

sample-text-white sample-text-black

Hope you can offer a solution. Thank you.

latenitefilms commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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.

https://github.com/retypeapp/retype/assets/62210/356b6968-c63a-4409-a536-5bd2c16e24b6

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 commented 1 year ago

@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!

retypeapp / retype

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

_includes/head.html

sample.md