Platform services

`$device`

$device is the viewer's device, worked out on the server before the page renders. Read it in a template or in $update: the right markup is in the HTML that arrives, and nothing changes when the page comes alive.

Colour mode

<div class="">
  <div class="flex gap-4">
    <span class="w-24 text-neutral-400">mode</span>
    <span x-text="$device.mode"></span>
  </div>
  <div class="flex gap-4">
    <span class="w-24 text-neutral-400">effective</span>
    <span x-text="$device.effective"></span>
  </div>
</div>

Result

mode light

effective light

mode is what the viewer chose (light, dark or system); effective is what actually paints.

Branching on a phone

<div class="space-y-2 text-sm">
  <div class="font-mono">$device.mobile: <span x-text="$device.mobile"></span></div>
  <p x-if="$device.mobile">You are on a phone: compact layout.</p>
  <p x-if="!$device.mobile">You are on a large screen: full layout.</p>
</div>

Result

$device.mobile: false

You are on a large screen: full layout.

When a phone needs more than a branch, name a second file m.<name>.html and the server serves it at the same URL to a viewer whose $device.mobile is true. See mobile variants.