# Image, light and dark pair

> One image with a light and a dark source: it follows the page theme, a forced dark or light scope wins over the OS preference, or a picture element follows…

Language: en
Canonical: https://texuli.com/examples/media-image-dark/
Markdown: https://texuli.com/examples/media-image-dark.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[All examples](https://texuli.com/examples/)

One image with a light and a dark source: it follows the page theme, a forced dark or light scope wins over the OS preference, or a picture element follows the OS alone.

[Image, light and dark pair](https://texuli.com/examples/media-image-dark/)

`media-image-dark` · `media/Image`

 media image

 Props
- `alt`
- `darkMode`
- `src`
- `srcDark`

Live example loads in an isolated same-origin preview frame.

Source (media-image-dark/MediaImageDarkDemo.svelte)

```
<script lang="ts">
import { Image } from '@texuli/media/image';
import { scopedTheme } from '../scoped-theme.ts';
import logoDark from './logo-dark.svg?url&no-inline';
import logoLight from './logo-light.svg?url&no-inline';

/**
 * Theme-aware image pair: `srcDark` with the default `darkMode="theme"`
 * follows the page mode, and a scope that forces `data-tx-mode` wins over
 * the OS preference. `darkMode="system"` is one `<picture>` that follows the
 * OS only. The wordmarks are local fictional files (relative URLs pass the
 * default untrusted image policy).
 */
const alt = 'Harbor Studio wordmark';
</script>

<article class="demo" data-example="media-image-dark" aria-labelledby="media-image-dark-title">
  <h2 id="media-image-dark-title">Image, light and dark pair</h2>

  <section aria-labelledby="pair-page-title">
    <h3 id="pair-page-title">Follows the page theme</h3>
    <Image src={logoLight} srcDark={logoDark} {alt} width={480} height={160} loading="eager" />
  </section>

  <div class="scopes">
    <section class="scope" use:scopedTheme={'dark'} aria-labelledby="pair-dark-title">
      <h3 id="pair-dark-title">Forced dark scope</h3>
      <Image src={logoLight} srcDark={logoDark} {alt} width={480} height={160} loading="eager" />
    </section>
    <section class="scope" use:scopedTheme={'light'} aria-labelledby="pair-light-title">
      <h3 id="pair-light-title">Forced light scope</h3>
      <Image src={logoLight} srcDark={logoDark} {alt} width={480} height={160} loading="eager" />
    </section>
  </div>

  <section aria-labelledby="pair-system-title">
    <h3 id="pair-system-title">Follows the OS only (one download)</h3>
    <Image
      src={logoLight}
      srcDark={logoDark}
      darkMode="system"
      {alt}
      width={480}
      height={160}
      loading="eager"
    />
  </section>
</article>

<style>
  .demo {
    display: grid;
    gap: var(--tx-space-6);
    max-inline-size: 64rem;
    color: var(--tx-foreground, CanvasText);
  }
  h2,
  h3 {
    margin: 0 0 var(--tx-space-2);
  }
  h3 {
    font-size: var(--tx-type-label-size);
  }
  .scopes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--tx-space-4);
  }
  .scope {
    background-color: var(--tx-background, Canvas);
    color: var(--tx-foreground, CanvasText);
    padding: var(--tx-space-3);
    border: var(--tx-border-width-thin) solid var(--tx-border, currentColor);
    border-radius: var(--tx-shape-radius-lg);
  }
</style>
```

## For agents

A worked example rendered live in the browser; the isolated preview frame (`/examples/preview/<id>/`) shows the same example without the site shell, and the example page next to it carries its code. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `example.search`: Find component examples.
- `component.get`: Read a component manifest.

Docs:

- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [@texuli/examples README](https://github.com/DailybotHQ/texuli/blob/main/packages/examples/README.md)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)