Dark Mode CSS Mixin: A CSS mixin for toggling between light and dark modes in web pages.

main.css

/**
 * Dark Mode Mixin
 * Brief Description: A CSS mixin for toggling between light and dark modes in web pages.
 *
 * Author: Pablo Aballe
 * Date: 2023-12-22
 */

:root {
  --color-text: #333; /* Default text color for light mode */
  --color-bg: #FFF; /* Default background color for light mode */
  --color-primary: #007bff; /* Primary color for light mode */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #FFF; /* Text color for dark mode */
    --color-bg: #333; /* Background color for dark mode */
    --color-primary: #0d6efd; /* Primary color for dark mode */
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

/* Usage:
The colors for light and dark modes are defined using CSS variables. 
The media query 'prefers-color-scheme' checks the user's system preference and applies the appropriate colors.
No additional classes are needed; the colors will automatically adjust based on user preference.
*/

/* Additional Notes:
This approach allows for a smooth transition between light and dark modes based on user preference and system settings.
It's highly customizable by adjusting the CSS variables.
*/