`INSTALL.md`

73 lines
# DW Theme Toggle — Shopify Install

Self-contained sun/moon dark/light toggle, pinned to upper-right of every page on the Shopify theme. CSS-filter inversion (no theme-var knowledge needed), localStorage persistence, anti-flash inline script.

## What's in the box

- `snippets/theme-toggle.liquid` — the entire toggle (anti-flash + CSS + button + JS)
- `push.sh` — pushes the snippet to the Shopify theme via Admin API
- This file

## Install (60 seconds)

### Path A — push via API (preferred)

```bash
cd ~/Projects/dw-theme-toggle
./push.sh                  # auto-targets MAIN theme on designer-laboratory-sandbox
```

Then in Shopify Admin → **Online Store → Themes → ⋯ → Edit code** → open `layout/theme.liquid` → add this single line just inside `<head>`:

```liquid
{% render 'theme-toggle' %}
```

Save. Refresh storefront. Sun/moon button appears in upper-right.

### Path B — manual paste (no script)

In Shopify Admin → **Online Store → Themes → ⋯ → Edit code**:

1. Click **Add a new snippet** under `Snippets/` → name it `theme-toggle`.
2. Paste the contents of `snippets/theme-toggle.liquid`. Save.
3. Open `layout/theme.liquid`. Just inside `<head>`, add:
   ```liquid
   {% render 'theme-toggle' %}
   ```
4. Save.

## Target a different theme

```bash
./push.sh 123456789012   # explicit theme ID
```

List theme IDs:
```bash
set -a; source ~/Projects/secrets-manager/.env; set +a
curl -sf -H "X-Shopify-Access-Token: $SHOPIFY_ADMIN_TOKEN" \
  https://designer-laboratory-sandbox.myshopify.com/admin/api/2024-10/themes.json \
  | python3 -m json.tool
```

## Revert

In Shopify Admin → **Online Store → Themes → ⋯ → Edit code**:
- Delete `snippets/theme-toggle.liquid`
- Remove the `{% render 'theme-toggle' %}` line from `layout/theme.liquid`

That's it — zero side-effects, no JS bundle change, no asset bloat.

## Why CSS-filter inversion?

Most Shopify themes don't expose a complete `[data-theme]` CSS-var system. Instead of trying to map every theme-specific variable, we use:

```css
html[data-theme="light"] body { filter: invert(1) hue-rotate(180deg); }
```

…then double-invert images / video / SVG / iframe / backgrounds so they stay correct. Result: works on Dawn, Streamline, Impulse, Empire, Refresh, custom themes — anything.

Trade-off: photo accent colors shift slightly because `hue-rotate(180deg)` is a true hue flip. If you want pixel-accurate brand colors in light mode, ask and I'll write a Dawn-var override patch instead.