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 

     function greet(name) {
       return `Hello, ${name}!`;
     }
     greet("Alice");
  • Use the clear() function or click the "Clear Console" button.

Dec 10, 2024
Read More
Tutorial
css

CSS Variables and Custom Properties: Dynamic Theming and Beyond

CSS variables can be manipulated in real-time using JavaScript, which opens up possibilities for dynamic UI elements.

You can update CSS variables using JavaScript to create interactive experiences, such as allowing users to customize colors or layouts.

Sep 05, 2024
Read More
Tutorial
javascript

Mastering console.log Advanced Usages and Techniques 

const user = { name: 'Bob', age: 25, active: true };
console.log(user); // Output: { name: 'Bob', age: 25, active: true }

console.table is an alternative to console.log that displays objects or arrays in a tabular format, making it easier to read structured data.

Sep 02, 2024
Read More
Tutorial
css

Advanced CSS Grid and Flexbox Layout Techniques

Flexbox makes it easy to create responsive layouts that adapt to different screen sizes. By combining media queries and flex properties, you can create flexible designs.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  background-color: lightcoral;
  padding: 20px;
  flex: 1 1 200px; /* Flex-grow, flex-shrink, and flex-basis */
}

@media (max-width: 600px) {
  .flex-item {
    flex: 1 1 100%;
  }
}

Aug 05, 2024
Read More

Discussion 0

Please sign in to join the discussion.

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