dark mode & responsive

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Replace @mixin for dark/light modes in Create React App

Instead of using @mixin light and @mixin dark directives, use data-mantine-color-scheme attribute selectors. Use [data-mantine-color-scheme='light'] .demo for light mode and [data-mantine-color-scheme='dark'] .demo for dark mode.

Replace light-dark() function for Create React App

Instead of using the light-dark(red, blue) function from postcss-preset-mantine, use data-mantine-color-scheme attribute selectors: [data-mantine-color-scheme='light'] .demo { color: red; } and [data-mantine-color-scheme='dark'] .demo { color: blue; }.

MonthView responsive styles

MonthView uses @container queries for responsive styles. The component automatically adjusts its layout based on the container width, hiding labels and reducing padding on smaller screens. Container queries are supported in all modern browsers.

Mantine color scheme is set via data-mantine-color-scheme attribute

Mantine color scheme is defined by the `data-mantine-color-scheme="{value}"` attribute on the `:root` element (usually the `html` tag). This attribute is used by all components to assign color scheme-specific styles.

ColorSchemeScript sets color scheme before hydration

The `ColorSchemeScript` component sets the `data-mantine-color-scheme` attribute on the root element before hydration, before the app has been mounted.

MantineProvider sets color scheme after app mounts

The `MantineProvider` component sets the `data-mantine-color-scheme` attribute after the app has been mounted.

FART occurs with mismatched defaultColorScheme values

Flash of inaccurate color scheme (FART) happens when the color scheme selected by the user is different from the color scheme value with which the application has been initialized. FART can occur only in applications with server-side rendering (SSR) or static site generation (SSG), and is commonly caused by a mismatch of `defaultColorScheme` values defined on `ColorSchemeScript` and `MantineProvider`.

ColorSchemeScript and MantineProvider defaultColorScheme must match

To prevent color scheme flickering (FART), the `defaultColorScheme` prop must have the same value on both `ColorSchemeScript` and `MantineProvider`. For example, if `ColorSchemeScript` has `defaultColorScheme="light"`, then `MantineProvider` must also have `defaultColorScheme="light"` (not `defaultColorScheme="auto"`).

Incorrect ColorSchemeScript and MantineProvider defaultColorScheme example

```tsx import { ColorSchemeScript, MantineProvider } from '@mantine/core'; function IncorrectDemo() { return ( <> <ColorSchemeScript defaultColorScheme="light" /> <MantineProvider defaultColorScheme="auto"> {/* Your app here */} </MantineProvider> </> ); } ``` This example shows incorrect usage where the `defaultColorScheme` values do not match between `ColorSchemeScript` and `MantineProvider`, which causes color scheme flickering.

Correct ColorSchemeScript and MantineProvider defaultColorScheme example

```tsx import { ColorSchemeScript, MantineProvider } from '@mantine/core'; function CorrectDemo() { return ( <> <ColorSchemeScript defaultColorScheme="light" /> <MantineProvider defaultColorScheme="light"> {/* Your app here */} </MantineProvider> </> ); } ``` This example shows correct usage where the `defaultColorScheme` values match between `ColorSchemeScript` and `MantineProvider`, preventing FART.

ColorSchemeScript hydration warning with data-mantine-color-scheme

A hydration warning occurs when using ColorSchemeScript because it changes the data-mantine-color-scheme attribute on the html element before React hydration starts, causing the server-rendered HTML to not match the client-rendered HTML. The ColorSchemeScript executes JavaScript code that checks localStorage for 'mantine-color-scheme-value' and updates the html element's data-mantine-color-scheme attribute before hydration completes, creating a mismatch between server and client HTML.

Fix color scheme hydration warning with mantineHtmlProps

To fix the hydration warning, spread mantineHtmlProps on the html element. The mantineHtmlProps object contains two properties: suppressHydrationWarning set to true and data-mantine-color-scheme set to 'light'. This is used in the root layout as follows: <html lang="en" {...mantineHtmlProps}>. The suppressHydrationWarning attribute disables hydration warnings for just that element, and data-mantine-color-scheme provides the default color scheme when JavaScript is disabled.

mantineHtmlProps object properties

mantineHtmlProps is an object imported from @mantine/core with two properties: suppressHydrationWarning (boolean, true) and data-mantine-color-scheme (string, 'light'). The suppressHydrationWarning disables hydration warnings for the html element, and data-mantine-color-scheme sets the default color scheme for the app when JavaScript is disabled.

ColorSchemeScript component execution logic

The ColorSchemeScript component executes the following logic before hydration: it retrieves the 'mantine-color-scheme-value' from localStorage, validates it is 'light', 'dark', or 'auto' (defaulting to 'light' otherwise), computes the final color scheme (if 'auto', it checks window.matchMedia prefers-color-scheme), and sets the data-mantine-color-scheme attribute on document.documentElement with the computed value.

suppressHydrationWarning only affects specified element

The suppressHydrationWarning attribute is a special React attribute that suppresses hydration warnings only for the specific element it is applied to, typically the html element. It does not disable hydration warnings for the entire application, only for that individual element.

Hydration mismatch causes

Hydration mismatch errors occur in two cases: (1) Server-rendered HTML does not match client-rendered HTML, or (2) Code executes on the client before React hydration starts and changes the HTML generated by the server. The color scheme warning is an example of case 2.

Color scheme hydration warning is expected and safe

The data-mantine-color-scheme hydration warning is expected behavior and does not indicate a problem with the app. The attribute is intentionally changed before hydration to prevent a flash of inaccurate color scheme. The warning can be safely suppressed using suppressHydrationWarning and mantineHtmlProps.

Give your agent this brain