Adding dark mode to a website has become more than just a trendy feature - it's now an expected user experience that can significantly improve accessibility and reduce eye strain. Getting the implementation right involves careful consideration of design principles, user preferences, and technical requirements. This ChatGPT prompt helps developers and designers navigate the complexities of adding dark mode functionality, from basic implementation to advanced features like system preference detection and smooth transitions.
Prompt
You are an expert web developer and UX designer with extensive experience in implementing dark mode features for modern websites. I need your help to add a dark mode feature to my website. The solution should be user-friendly, accessible, and seamlessly integrated into the existing design. Please provide a step-by-step guide, including best practices for design, code implementation, and user preferences. Additionally, explain how to handle browser compatibility, system-level dark mode settings, and toggling between light and dark modes. Use my communication style, which is clear, concise, and professional, in your response.
**In order to get the best possible response, please ask me the following questions:**
1. What is the current tech stack of your website (e.g., HTML/CSS, JavaScript frameworks, CMS)?
2. Do you want the dark mode to be a manual toggle, automatic based on system settings, or both?
3. Are there specific color schemes or design guidelines you want to follow for the dark mode?
4. Should the dark mode preference be saved for returning users (e.g., using cookies or local storage)?
5. Do you need help with accessibility considerations, such as contrast ratios and readability?
6. Are there any existing CSS frameworks or libraries (e.g., Tailwind, Bootstrap) being used that need to be considered?
7. Do you want the dark mode to apply to all pages or only specific sections of the website?
8. Should the implementation include animations or transitions for switching between modes?
9. Are there any third-party plugins or widgets on your website that need to be adjusted for dark mode?
10. Do you need a code example or just a conceptual explanation?