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

  • Open the browser.
  • Right-click on the webpage and select Inspect or press Ctrl+Shift+I (Cmd+Option+I on macOS).
  • Go to the Console tab.
  • Open the browser.
  • Right-click on the webpage and select Inspect or press Ctrl+Shift+K (Cmd+Option+K on macOS).
  • Navigate to the Console tab.

Dec 10, 2024
Read More
Tutorial
css

CSS Variables and Custom Properties: Dynamic Theming and Beyond

Modern browser DevTools allow you to inspect and manipulate CSS variables directly, making debugging easier.

  • Chrome DevTools: Inspect elements and look for the variables applied in the Styles panel. You can modify them in real-time to test different values.

Sep 05, 2024
Read More
Tutorial
javascript

Mastering console.log Advanced Usages and Techniques

You can log multiple values in a single console.log call by separating them with commas. This can be useful when you want to log related values together.

const name = 'John';
const age = 30;
console.log('Name:', name, 'Age:', age); // Output: Name: John Age: 30

Sep 02, 2024
Read More
Tutorial
css

Advanced CSS Grid and Flexbox Layout Techniques

  • justify-content: Aligns items along the main axis.
  • align-items: Aligns items along the cross axis.
  • align-self: Overrides align-items for individual flex items.
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
}

Aug 05, 2024
Read More

Discussion 0

Please sign in to join the discussion.

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