How to Add Dark Mode to Your Feedback Popup Using CSS

Adding dark mode to your feedback popup can enhance user experience, especially for those who prefer darker themes. Follow this guide to customize the appearance of your feedback popup using CSS.

Prerequisites

Before you start, ensure you have the following:

• A project with Popify.dev feedback popups integrated
• Basic knowledge of CSS

Step 1: Define Dark Mode Styles

First, define the CSS variables for dark mode in your global CSS file. These variables will override the default light mode styles when dark mode is activated.

:root {
  --popify-font: "Arial, sans-serif";
  --popify-cta-background: "#ffffff";
  --popify-cta-color: "#000000";
  --popify-text-color: "#000000";
  --popify-background: "#ffffff";
}
 
.dark-mode {
  --popify-cta-background: "#333333";
  --popify-cta-color: "#ffffff";
  --popify-text-color: "#ffffff";
  --popify-background: "#000000";
}

Step 2: Apply Dark Mode Based on User Preference

Next, use JavaScript to apply the dark mode class based on the user's preference. This script checks if the user prefers dark mode and applies the .dark-mode class to the body element.

document.addEventListener("DOMContentLoaded", function() {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.body.classList.add('dark-mode');
  }
});

Step 3: Toggle Dark Mode Manually

If you want to provide a toggle for users to switch between light and dark modes, you can add a button to your HTML and update the JavaScript to handle the toggle.

<button id="dark-mode-toggle">Toggle Dark Mode</button>
 
<script>
document.getElementById("dark-mode-toggle").addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
});
</script>

Conclusion

By following these steps, you've successfully added dark mode to your feedback popup using CSS. This not only improves the user experience but also ensures your feedback popups are accessible to a wider audience.

For further assistance, refer to the Popify.dev documentation or contact support at support@popify.dev.