How to get dark mode in Amplify UI work?


I am following an example from the official document to setup dark mode. But it only apply dark mode to the ToggleButtonGroup, and does not apply to entire page. Does anyone has used dark mode in Amplify UI?

asked 2 years ago411 views
2 Answers

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

answered 2 years ago

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;
  1. 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>
  2. 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', () => {
answered a year ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions