< Back to home

Dark Mode

Contrast is a key element in web accessibility, as it directly affects the readability and usability of a website. A super lightweight dark mode not only adds a touch of fun to your website but can also contribute to improved accessibility, especially for users who may benefit from reduced eye strain or have sensitivity to bright lights.

While some websites may not inherently have contrast issues, others may face challenges due to specific design choices made for aesthetic reasons. Implementing dark mode without overwhelming your codebase with yet another wordpress plugin or excessive CSS can be achieved with easy custom coding.

By incorporating these considerations, you not only contribute to a more accessible website but also create a fun and customizable user experience.

Here is the code I used for this example:

				
					<script>

// dark-mode-toggle.js
jQuery(document).ready(function($) {
    // Check local storage for dark mode preference
    const isDarkModeNow = localStorage.getItem('dark-mode') === 'true';
    updateImages(isDarkModeNow);

    // Apply dark mode class if preference is true
    if (isDarkModeNow) {
        $('body').addClass('dark-mode');
			
    }

    // Toggle dark mode on button click
    $('.toggle-dark-mode').on('click', function() {
					
        const isDarkModeNow = !$('body').hasClass('dark-mode');
        $('body').toggleClass('dark-mode', isDarkModeNow);
        localStorage.setItem('dark-mode', isDarkModeNow);

        // Update images based on the current state
        updateImages(isDarkModeNow);
    });


  function updateImages(isDarkModeNow) {
    if (isDarkModeNow) {
        const oldSrcArray = ['light2mode.svg', 'digital-dafna-logo-new.svg'];
        const newSrcArray = ['darkmode.svg', 'dark-mode-logo.svg'];

        // Iterate through the arrays and update images
        oldSrcArray.forEach((oldSrc, index) => {
            $('img[src*="' + oldSrc + '"]').attr('src', function(i, oldSrc) {
                const indexOfOldSrc = oldSrc.indexOf(oldSrcArray[index]);
                if (indexOfOldSrc !== -1) {
                    return oldSrc.substring(0, indexOfOldSrc) + newSrcArray[index] + oldSrc.substring(indexOfOldSrc + oldSrcArray[index].length);
                }
                return oldSrc;
            });
        });
    } else {
        const newSrcArray = ['darkmode.svg', 'dark-mode-logo.svg'];
        const oldSrcArray = ['light2mode.svg', 'digital-dafna-logo-new.svg'];

        // Iterate through the arrays and update images
        oldSrcArray.forEach((oldSrc, index) => {
            $('img[src*="' + oldSrc + '"]').attr('src', function(i, oldSrc) {
                const indexOfOldSrc = oldSrc.indexOf(oldSrcArray[index]);
                if (indexOfOldSrc !== -1) {
                    return oldSrc.substring(0, indexOfOldSrc) + newSrcArray[index] + oldSrc.substring(indexOfOldSrc + oldSrcArray[index].length);
                }
                return oldSrc;
            });
        });
    }
}

});
</script>

<style>
    .dark-mode, .dark-mode .dark-mode-dark-blue{
	background-color: #00203D !important;
}


.dark-mode .dark-mode-light-pink{
	color: #FFE5EA;
}

.dark-mode .dark-mode-green{
	color: #00AD7C;
}

.dark-mode .dark-mode-hot-pink{
	color: #FF3D67;
}

.dark-mode .dark-mode-yellow{
	color: #FFCA42;
}
</style>

Some More Cool Projects