How to get dark mode in Amplify UI work?

Select dark mode from the Account drop down on top right> Settings > Visual mode> select dark mode.

Here is the process you can go through.

1.Set Up AWS Amplify Project

2.Design Dark Mode CSS: Create a new CSS file or modify your existing CSS to define the styles for the dark mode theme. You'll need to identify the relevant CSS classes or selectors used in your application and provide alternative styles for dark mode. For example, you might adjust background colors, text colors, and other visual elements.

/* Sample dark mode CSS */
body.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}

3. Enable Dark Mode Toggle: Add a UI element, such as a button or a toggle switch, to allow users to switch between light mode and dark mode. This UI element will trigger the theme change when clicked.

   <!-- Sample dark mode toggle button -->
   <button id="darkModeToggle">Toggle Dark Mode</button>

4. JavaScript to Switch Themes: Write JavaScript code to handle the theme toggle. This code will detect the user's preference and apply the dark mode CSS when the user chooses the dark mode option.

   // Sample JavaScript to toggle dark mode
   const darkModeToggle = document.getElementById('darkModeToggle');
   const body = document.body;

   darkModeToggle.addEventListener('click', () => {
     body.classList.toggle('dark-mode');
   });