Welcome to EasyCodingWithAI!

Before you dive into coding with AI, take a moment to consider some valuable insights.

Our articles cover the pros and cons of using AI in development, the importance of having a development environment, and how AI empowers hobbyists and small businesses to create and maintain their own websites, without the need of hiring professional developers.

Richard Robins

Tutorial : Personalizing Websites with AI: Adding Features Like Dark Mode and Language Preferences

Posted by Richard Robins on December 1, 2024 - Last modified on December 1, 2024.

As user experience (UX) becomes an increasingly important aspect of web design, websites that adapt to individual preferences are becoming essential. Personalization features such as dark mode and language preferences can significantly enhance user satisfaction. Implementing these features can be time-consuming, but AI tools like ChatGPT can assist in generating code that makes your website more accessible and customizable. In this guide, we’ll walk through how to use AI to implement features like dark mode and language preferences for a more user-centric experience.

Step 1: Implementing Dark Mode

Dark mode has become a popular choice for users who prefer a darker interface, especially in low-light environments. It not only improves readability for some users but also reduces eye strain. AI can help by generating the necessary code for toggling between dark and light modes, including the CSS and JavaScript required to handle theme switching.

Example Prompt:

“Generate code to implement dark mode on a website with a toggle button that switches between dark and light themes.”

Generated Code:

HTML (Dark Mode Toggle Button):
<button id="theme-toggle">Switch to Dark Mode</button>

CSS (Light and Dark Mode Styles):

/* Default light mode styles */
body {
    background-color: #fff;
    color: #333;
}

button {
    background-color: #4CAF50;
    color: white;
}

/* Dark mode styles */
body.dark-mode {
    background-color: #121212;
    color: #f4f4f4;
}

button.dark-mode {
    background-color: #333;
    color: white;
}

JavaScript (Theme Toggle Functionality):

// Get the button and the body element
const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved theme preference in localStorage
if (localStorage.getItem('theme') === 'dark') {
    body.classList.add('dark-mode');
    toggleButton.textContent = 'Switch to Light Mode';
} else {
    body.classList.remove('dark-mode');
    toggleButton.textContent = 'Switch to Dark Mode';
}

// Add event listener to toggle the theme
toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    
    // Save the theme preference in localStorage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
        toggleButton.textContent = 'Switch to Light Mode';
    } else {
        localStorage.setItem('theme', 'light');
        toggleButton.textContent = 'Switch to Dark Mode';
    }
});

Explanation:

  • HTML: We add a button that will allow users to toggle between dark and light modes.
  • CSS: Defines styles for both the light and dark modes. We use the dark-mode class to apply dark theme styles.
  • JavaScript: Handles the theme switch. It checks the user’s previous theme preference stored in localStorage (so the theme persists across page refreshes), toggles the class for dark mode, and updates the button text.

This AI-generated solution enables users to personalize their web experience by switching between dark and light modes, and it stores their preference for future visits.

Step 2: Adding Language Preferences

Another important feature to enhance user experience is language preferences. By offering the option to switch languages, you can make your site more inclusive and accessible. ChatGPT can help generate the necessary code for adding a language selector and translating content dynamically.

Example Prompt:

“Generate code to implement a language switcher on a website that changes the text content between English and Spanish.”

Generated Code:

HTML (Language Selector):
<select id="language-selector">
    <option value="en">English</option>
    <option value="es">Español</option>
</select>
JavaScript (Language Switching Functionality):
const languageSelector = document.getElementById('language-selector');

// Set default language to English
let currentLanguage = localStorage.getItem('language') || 'en';

// Function to change the text content based on the selected language
const updateLanguage = (language) => {
    localStorage.setItem('language', language);
    if (language === 'es') {
        document.getElementById('welcome').textContent = 'Bienvenido a mi portafolio';
        document.getElementById('about').textContent = 'Soy un desarrollador web apasionado.';
        document.getElementById('contact').textContent = 'Póngase en contacto conmigo';
    } else {
        document.getElementById('welcome').textContent = 'Welcome to my Portfolio';
        document.getElementById('about').textContent = 'I am a passionate web developer.';
        document.getElementById('contact').textContent = 'Contact me';
    }
};

// Initial language setup
updateLanguage(currentLanguage);

// Add event listener for language selection
languageSelector.addEventListener('change', (e) => {
    updateLanguage(e.target.value);
});

HTML Example for Content:

<section id="welcome"></section>
<section id="about"></section>
<section id="contact"></section>

Explanation:

  • HTML: A simple <select> dropdown is added for the user to choose their preferred language.
  • JavaScript: The script dynamically changes the content on the page based on the selected language. It stores the selected language in localStorage to remember the user’s choice on subsequent visits. The updateLanguage function updates the content accordingly by replacing text in specific HTML elements.

Step 3: Combining Dark Mode and Language Preferences

Both dark mode and language preferences can be combined to create a seamless and personalized experience. Users can toggle the theme and select their preferred language without affecting the other settings. Here’s how to combine both features in the same website:

Example Prompt:

“Modify the existing code to include both dark mode and language switching, making sure both settings persist across page reloads.”

Final Code Combination:

// Combine theme and language preferences
const languageSelector = document.getElementById('language-selector');
const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

let currentLanguage = localStorage.getItem('language') || 'en';
let currentTheme = localStorage.getItem('theme') || 'light';

// Initialize theme and language
if (currentTheme === 'dark') {
    body.classList.add('dark-mode');
    toggleButton.textContent = 'Switch to Light Mode';
}
updateLanguage(currentLanguage);

// Language change function
const updateLanguage = (language) => {
    localStorage.setItem('language', language);
    if (language === 'es') {
        document.getElementById('welcome').textContent = 'Bienvenido a mi portafolio';
        document.getElementById('about').textContent = 'Soy un desarrollador web apasionado.';
        document.getElementById('contact').textContent = 'Póngase en contacto conmigo';
    } else {
        document.getElementById('welcome').textContent = 'Welcome to my Portfolio';
        document.getElementById('about').textContent = 'I am a passionate web developer.';
        document.getElementById('contact').textContent = 'Contact me';
    }
};

// Theme toggle functionality
toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
        toggleButton.textContent = 'Switch to Light Mode';
    } else {
        localStorage.setItem('theme', 'light');
        toggleButton.textContent = 'Switch to Dark Mode';
    }
});

// Language selector functionality
languageSelector.addEventListener('change', (e) => {
    updateLanguage(e.target.value);
});

Explanation:

  • Combining the Features: This code ensures both dark mode and language preferences are saved in localStorage and persist across page reloads. The theme and language settings are initialized when the page loads, and users can toggle them independently.
  • User-Centric Customization: By adding these features, users are able to personalize their browsing experience, making the website more inclusive and user-friendly.

Conclusion

AI tools like ChatGPT can significantly enhance the customization of websites by providing quick, efficient solutions for common features like dark mode and language preferences. Implementing these features not only improves user experience but also makes your site more accessible and inclusive.

With the help of AI-generated code, you can easily integrate personalization features that adapt to users’ needs and preferences, creating a more engaging and responsive web experience.

Richard Robins

Richard Robins

Richard is passionate about sharing how AI resources such as ChatGPT and Microsoft Copilot can be used to create addons and write code, saving small website owners time and money, freeing them to focus on making their site a success.


Disclaimer

The coding tips and guides provided on this website are intended for informational and educational purposes only. While we strive to offer accurate and helpful content, these tips are meant as a starting point for your own coding projects and should not be considered professional advice.

We do not guarantee the effectiveness, security, or safety of any code or techniques discussed on this site. Implementing these tips is done at your own risk, and we encourage you to thoroughly test and evaluate any code before deploying it on your own website or application.

By using this site, you acknowledge that we are not responsible for any issues, damages, or losses that may arise from your use of the information provided herein.