Skip to content

Commit

Permalink
Add convenient print, screen, dark/light color scheme, and reduce mot…
Browse files Browse the repository at this point in the history
…ion media queries
  • Loading branch information
techniq committed Jun 29, 2023
1 parent 3781e25 commit b560fef
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 1 deletion.
9 changes: 9 additions & 0 deletions src/lib/stores/matchMedia.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,12 @@ export const mdScreen = matchMediaWidth(768);
export const lgScreen = matchMediaWidth(1024);
export const xlScreen = matchMediaWidth(1280);
export const xxlScreen = matchMediaWidth(1536);

// Media types
export const screen = matchMedia(`screen`);
export const print = matchMedia(`print`);

// Media features
export const darkColorScheme = matchMedia(`(prefers-color-scheme: dark)`);
export const lightColorScheme = matchMedia(`(prefers-color-scheme: light)`);
export const motionReduce = matchMedia(`(prefers-reduced-motion: reduce)`);
46 changes: 45 additions & 1 deletion src/routes/docs/stores/matchMedia/+page.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
import Preview from '$lib/components/Preview.svelte';
import Icon from '$lib/components/Icon.svelte';

import { matchMedia, matchMediaWidth, smScreen, mdScreen, lgScreen, xlScreen, xxlScreen } from '$lib/stores/matchMedia';
import { matchMedia, matchMediaWidth, smScreen, mdScreen, lgScreen, xlScreen, xxlScreen, screen, print, darkColorScheme, motionReduce } from '$lib/stores/matchMedia';

let innerWidth = 0;
</script>

<h1>Usage</h1>

<h2>Full media query</h2>

```svelte
<script>
import { matchMedia } from 'svelte-ux';
Expand All @@ -22,6 +24,8 @@
{/if}
```

<h2>Convenient width media query</h2>

```svelte
<script>
import { matchMediaWidth } from 'svelte-ux';
Expand All @@ -33,6 +37,8 @@
{/if}
```

<h2>Convenient presets</h2>

```svelte
<script>
import { mdScreen } from 'svelte-ux';
Expand All @@ -43,6 +49,16 @@
{/if}
```

```svelte
<script>
import { print } from 'svelte-ux';
</script>
{#if $print}
<div>Only visable when printing</div>
{/if}
```

<h1>Examples</h1>

<Preview>
Expand Down Expand Up @@ -82,6 +98,34 @@
{/if}
$xxlScreen (1536px)

{#if $screen}
<Icon path={mdiCheckCircle} size="1rem" class="text-emerald-500" />
{:else}
<Icon path={mdiCloseCircle} size="1rem" class="text-red-500" />
{/if}
$screen

{#if $print}
<Icon path={mdiCheckCircle} size="1rem" class="text-emerald-500" />
{:else}
<Icon path={mdiCloseCircle} size="1rem" class="text-red-500" />
{/if}
$print

{#if $darkColorScheme}
<Icon path={mdiCheckCircle} size="1rem" class="text-emerald-500" />
{:else}
<Icon path={mdiCloseCircle} size="1rem" class="text-red-500" />
{/if}
$darkColorScheme

{#if $motionReduce}
<Icon path={mdiCheckCircle} size="1rem" class="text-emerald-500" />
{:else}
<Icon path={mdiCloseCircle} size="1rem" class="text-red-500" />
{/if}
$motionReduce

</div>

<div class="ml-6 mt-3 text-black/50 text-xs">
Expand Down

1 comment on commit b560fef

@vercel
Copy link

@vercel vercel bot commented on b560fef Jun 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.