DeveloperBreeze

Detect Dark Mode Preference

javascript
Console.log Dark Mode Media Queries Window.matchMedia 
// Check if the user prefers dark mode using window.matchMedia
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Log whether dark mode is preferred by the user
console.log('Dark Mode:', isDarkMode);

Related Posts

More content you might like

Tutorial
javascript

Running JavaScript in the Browser Console 

     $0.style.color = "red";
  • Write multi-line code directly in the console:

Dec 10, 2024
Read More
Tutorial
css

CSS Variables and Custom Properties: Dynamic Theming and Beyond

This code dynamically changes the --primary-color to a new value.

You can create interactive UI elements, such as sliders, that update CSS variables in real-time.

Sep 05, 2024
Read More
Tutorial
javascript

Mastering console.log Advanced Usages and Techniques 

console.group('User Details');
console.log('Name: Alice');
console.log('Age: 30');
console.log('Active: true');
console.groupEnd();

Example with console.groupCollapsed:

Sep 02, 2024
Read More
Tutorial
css

Advanced CSS Grid and Flexbox Layout Techniques

CSS Grid and Flexbox are powerful layout models that enable developers to create complex and responsive web designs with ease. By mastering advanced techniques such as named grid areas, implicit and explicit grids, grid auto-placement, flex properties, and nested layouts, you can build sophisticated and adaptable layouts. Combining the strengths of both Grid and Flexbox allows you to tackle any design challenge with confidence.

  • Experiment with different grid and flexbox configurations to create unique layouts.
  • Explore CSS custom properties to make your layouts more dynamic and maintainable.
  • Integrate animations and transitions to enhance the user experience.

Aug 05, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!