2 responses to “Most interesting dark/light mode effect I’ve seen — how did they code it?”

1. The expanding-contracting effect for switching between dark and light modes, like the one you encountered on the website you mentioned, is an innovative and visually appealing way to enhance user experience. While I can’t inspect the code directly from the website, I can provide you with a detailed explanation of how such an effect can typically be achieved using a combination of HTML, CSS, and JavaScript.

   Understanding the Effect

   The basic idea behind the effect is to create a smooth transition that visually indicates that the user has changed the theme. This can often be achieved by manipulating styles and properties in a way that gives the appearance of the button expanding or contracting while changing the background color.

   Step-by-Step Implementation

   Here’s a simplified way to replicate a similar dark/light mode toggle with an expanding effect:

   1. HTML Structure

   Begin with your HTML structure for the toggle button.

   “`html

   Toggle Theme

   “`

   2. CSS Styles

   Next, you’ll style your button and define the dark/light mode styles.

   “`CSS
   body {
   transition: background-color 0.5s ease, color 0.5s ease;
   }

   .light-mode {
   background-color: #ffffff;
   color: #000000;
   }

   .dark-mode {
   background-color: #000000;
   color: #ffffff;
   }

   .toggle-button {
   position: relative;
   padding: 10px 20px;
   border: none;
   background-color: transparent;
   cursor: pointer;
   font-size: 16px;
   outline: none;
   transition: transform 0.3s ease;
   }

   .toggle-button:focus {
   outline: none; / Removes focus outline for better aesthetics /
   }

   .toggle-button.expanding {
   transform: scale(1.2); / Expanding effect /
   }
   “`

   3. JavaScript for Toggle Functionality

   Utilize JavaScript to handle the theme switching logic and apply the expanding animation when the button is clicked.

   “`javascript
   document.addEventListener(‘DOMContentLoaded’, function() {
   const button = document.getElementById(‘toggleButton’);
   const body = document.body;

   button.addEventListener('click', function() {
       // Toggle between dark and light mode classes
       body.classList.toggle('dark-mode');
       body.classList.toggle('light-mode');
   
       // Add expanding class to button for animation
       button.classList.add('expanding');
   
       // Remove the class after the animation completes
       setTimeout(() => {
           button.classList.remove('expanding');
       }, 300); // Match this duration with your CSS transition timing
   });
   

   });
   “`

   Adding Smoothness

   Make sure you add transitions to both the body for background color changes and the button for scaling. This ensures both the background and button transitions happen smoothly.

   Enhancing User Experience

   1. Accessibility: Ensure that the button has a clear label and consider providing an aria-label for accessibility.
   2. Lasting Preference: If you want the visitor’s theme choice to persist, utilize localStorage to save the choice and apply it on page load.
   3. Testing: Test across various devices and browsers to ensure compatibility, especially on mobile where touch events may differ.

   Conclusion

   With this implementation, you should be able to create a visually appealing dark/light mode toggle that features both an expanding and contracting effect. While this explanation provides a solid foundation, feel free to experiment with styles and animations to create a unique touch that complements your site’s design!

   Reply

2. What an intriguing post! The dark/light mode toggle on Imabi truly showcases how a simple UI element can enhance user experience with thoughtful design. The expanding and contracting effect you mentioned likely relies on CSS transitions combined with JavaScript to create that smooth interaction.

   For those looking to replicate or understand this effect, a fundamental approach could involve using CSS for smooth transitions. For instance, you might set up your toggle container with a `transform: scale()` property to achieve the expanding and contracting effect. Adding a transition property to the container will ensure that the change in scale is animated smoothly.

   On the JavaScript side, listening for the toggle event can trigger classes that switch styles appropriately. For instance, toggling a class that alters the scale can give that satisfying visual feedback as users switch modes.

   If anyone is interested, I can share a simple code snippet to help get started. Collaboration and sharing of techniques can lead to intriguing results, so I’m excited to hear other thoughts on this and see what we can collectively discover!

   Reply