usePreferredDark

Reactive dark theme preference.

Related hooks

Inspired on:

Visual example

site title
domain.tld
{"prefferredDark":false}

Code base

import { useMediaQuery } from "@/hooks/useMediaQuery";

export function usePreferredDark() {
	const { matches } = useMediaQuery('(prefers-color-scheme: dark)');

	return matches;
};

Code example

<!-- javascript -->
<script lang="ts">
	import { usePreferredDark } from "@dimaslz/svelteuse";

	const prefferredDark = usePreferredDark();
</script>

<!-- html -->
<div>
  <pre>{JSON.stringify({ prefferredDark: $prefferredDark }, null, 2)}</pre>
</div>
useEventCallback
useCountdown