DeveloperBreeze

Detect Dark Mode Preference

January 26, 2024

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);

Continue Reading

Handpicked posts just for you — based on your current read.

Running JavaScript in the Browser Console

Right-click on the webpage and select Inspect or press Ctrl+Shift+I.
Open the Console tab.

Go to Safari > Preferences > Advanced and enable the Show Develop menu in menu bar option.
Right-click on the webpage and select Inspect Element or press Cmd+Option+C.
Click on the Console tab.

Dec 10, 2024 Tutorial

CSS Variables and Custom Properties: Dynamic Theming and Beyond

CSS Variables are extremely useful in responsive design because they can adapt based on media queries.

You can adjust CSS variables within media queries to create adaptive layouts.

Sep 05, 2024 Tutorial

Mastering console.log Advanced Usages and Techniques

In addition to console.log, JavaScript provides other logging methods like console.info, console.warn, and console.error. These methods log messages with different levels of severity, which can be visually distinguished in the console.

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

Sep 02, 2024 Tutorial

Advanced CSS Grid and Flexbox Layout Techniques

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

Combining Flexbox and Grid allows you to leverage the strengths of both models to create complex and responsive designs.

Aug 05, 2024 Tutorial