Online редактор кода

HTML

CSS

/* Main styles and CSS variables */
:root {
    --bg-color: #ffffff; /* Default background color */
    --text-color: #000000; /* Default text color */
}

/* Dark theme styles */
.dark-theme {
    --bg-color: #121212; /* Dark background color */
    --text-color: #ffffff; /* Light text color */
}

/* Body styles */
body {
    background-color: var(--bg-color); /* Apply background color */
    color: var(--text-color); /* Apply text color */
    font-family: Arial, sans-serif; /* Set font family */
    margin: 0; /* Remove default margin */
    padding: 20px; /* Add padding */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for theme change */
}

/* Button styles */
button {
    padding: 10px 20px; /* Add padding */
    font-size: 16px; /* Set font size */
    cursor: pointer; /* Change cursor to pointer on hover */
    background-color: var(--text-color); /* Button background color */
    color: var(--bg-color); /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Add rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for theme change */
}

/* Smooth transition for all elements */
* {
    transition: background-color 0.3s, color 0.3s; /* Apply transition to all elements */
}

/* Automatic system theme detection */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212; /* Dark background color for system dark theme */
        --text-color: #ffffff; /* Light text color for system dark theme */
    }
}

JavaScript

// Theme toggle logic
const toggleThemeBtn = document.getElementById('theme-toggle'); // Get the theme toggle button

// Check saved settings when the page loads
const userTheme = localStorage.getItem('theme'); // Get the user's saved theme preference
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; // Detect system theme

// Apply the saved user theme or fallback to system theme
if (userTheme) {
    document.documentElement.classList.toggle('dark-theme', userTheme === 'dark'); // Apply user's saved theme
} else {
    document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark'); // Apply system theme if no user preference
}

// Toggle theme on button click
toggleThemeBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme'); // Toggle dark theme class

// Save the user's choice in localStorage
    if (document.documentElement.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark'); // Save dark theme preference
    } else {
        localStorage.setItem('theme', 'light'); // Save light theme preference
    }
});