Refresh Theme Studio branding and streamline import workflow

README.md

@@ -1,27 +1,33 @@
-# OpenCode Theme Editor
+# OpenCode Theme Studio
 
 <p align="center"><strong>Design a theme that actually feels like OpenCode before you export it.</strong></p>
 
 <p align="center">
-  OpenCode Theme Editor is a local-first theme studio for crafting dark and light OpenCode themes with live preview, curated presets, raw JSON control, shareable links, and one-command install.
+  OpenCode Theme Studio is a local-first theme studio for crafting dark and light OpenCode themes with live preview, curated presets, raw JSON control, shareable links, and one-command install.
 </p>
 
 <p align="center">
-  <a href="https://kkugot.github.io/opencode-theme-editor/"><strong>Launch the app</strong></a>
+  <a href="https://kkugot.github.io/opencode-theme-studio/"><strong>Launch the app</strong></a>
   ·
-  <a href="https://github.com/kkugot/opencode-theme-editor">GitHub</a>
+  <a href="https://github.com/kkugot/opencode-theme-studio">GitHub</a>
   ·
   <a href="https://opencode.ai/docs/themes/#custom-themes">OpenCode theme docs</a>
 </p>
 
+<p align="center">
+  <video src="./public/opencode-theme-studio-480.mov" controls muted playsinline loop width="960">
+    <a href="./public/opencode-theme-studio-480.mov">Watch the OpenCode Theme Studio demo video</a>
+  </video>
+</p>
+
 ## Why people use it
 
 - See changes in an OpenCode-like preview while you edit, instead of guessing from JSON alone.
 - Tune dark and light modes as a matched pair, then export a single bundle or separate mode files.
 - Start fast with built-in OpenCode themes, curated palette presets, and remix controls.
 - Move from semantic editing to token-level control to raw JSON without leaving the same workflow.
 - Keep drafts in your browser with IndexedDB autosave; no account or backend required.
-- Share an editable link or copy a ready-to-run install command for OpenCode.
+- Share an editable link, import a local OpenCode theme, or copy a ready-to-run install command.
 
 ## What you can do
 
@@ -40,13 +46,14 @@
 3. Refine colors in `Basic`, `Full`, or `JSON`.
 4. Flip between dark and light to tune both modes.
 5. Open `Save` to download files, copy a share link, or generate the OpenCode install command.
+6. Open `{...}` to import an existing local OpenCode theme or edit the full bundle JSON directly.
 
 ## Install in OpenCode
 
 From the `Save` tab, copy the generated command and run it from your project root.
 
 ```bash
-curl -fsSL https://kkugot.github.io/opencode-theme-editor/install.sh | bash -s -- <theme-name> <encoded-theme>
+curl -fsSL https://kkugot.github.io/opencode-theme-studio/import-export.sh | bash -s -- install <theme-name> <encoded-theme>
 ```
 
 The installer:
@@ -56,6 +63,28 @@ The installer:
 
 You can also type `!` inside OpenCode, paste the generated command, and restart OpenCode once.
 
+## Import from OpenCode
+
+From the `{...}` tab, copy the import command and run it inside OpenCode.
+
+```bash
+curl -fsSL https://kkugot.github.io/opencode-theme-studio/import-export.sh | bash -s -- import <theme-studio-url>
+```
+
+The import flow:
+
+- reads your current local OpenCode theme from `.opencode/themes/` or `~/.config/opencode/themes/`
+- converts it into a Theme Studio share URL
+- opens the browser with that theme already loaded in the editor
+
+This is useful when you want to:
+
+- build a matching light or dark companion for an existing theme
+- refine a local custom theme without manually copying JSON
+- share your local theme setup with someone else through a browser link
+
+If you do not want to run the import-export script, you can also paste your current theme JSON directly into the `{...}` tab. Theme Studio accepts the full dark/light bundle there and keeps the JSON updated as you edit.
+
 ## Manual export
 
 If you prefer file-based setup:
@@ -79,6 +108,7 @@ Optional project default in `.opencode/tui.json`:
 
 - The share link reopens the exact theme in the editor, including both dark and light modes.
 - Shared URLs hydrate the editor before local draft restore, so collaborators land on the intended version immediately.
+- Install and share commands use a compressed payload that contains the full dark + light theme bundle, not just the current mode.
 
 ## Local development
 
@@ -97,4 +127,4 @@ Useful commands:
 ## Notes
 
 - Drafts are stored locally in your browser via IndexedDB.
-- Share-link and install-command generation require a browser with `CompressionStream` support.
+- Share-link, install-command, and import/export payload generation use compressed theme data and require a browser with `CompressionStream` support.

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OpenCode Theme Editor</title>
+    <title>OpenCode Theme Studio</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "opencode-theme-editor",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",