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

  • Arrow keys: Navigate through previous commands.
  • Shift+Enter: Write multi-line code.
  • The console displays detailed error messages to help debug code.

Dec 10, 2024
Read More
Tutorial
css

CSS Variables and Custom Properties: Dynamic Theming and Beyond 

.card {
    --card-bg: #fff;
    background-color: var(--card-bg);
}

.dark-theme .card {
    --card-bg: #2c3e50;
}

This allows you to adjust individual components without duplicating styles.

Sep 05, 2024
Read More
Tutorial
javascript

Mastering console.log Advanced Usages and Techniques 

console.info('This is an info message');  // Output: Info: This is an info message
console.warn('This is a warning message');  // Output: Warning: This is a warning message
console.error('This is an error message');  // Output: Error: This is an error message

You can override console.log to add custom behavior, such as logging to a file, sending logs to a server, or adding timestamps.

Sep 02, 2024
Read More
Tutorial
css

Advanced CSS Grid and Flexbox Layout Techniques 

<div class="flex-container">
  <div class="flex-item">
    <div>Subitem 1</div>
    <div>Subitem 2</div>
  </div>
  <div class="flex-item">
    <div>Subitem 3</div>
    <div>Subitem 4</div>
  </div>
</div>

In this example, each flex item contains its own flex container, creating a nested layout.

Aug 05, 2024
Read More

Discussion 0

Please sign in to join the discussion.

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