feat: stealthis theming + copyDittoTheme#41
Merged
Conversation
- Replace all hardcoded hex colors with var(--steal-this-*) inline fallbacks - Add accent, bg, input-bg, border, text, muted, dim, radius tokens - Use color-mix() for hover states (accent-hover, trail-link hover) - Keep semantic error/success/white colors hardcoded (#e74c3c, #c0392b, #2ecc71, #fff) - Use calc() scale for border-radius variants (0.75x inputs, 0.5x inner elements)
- Add accent, background, text, radius to observedAttributes
- Add themeVars getter generating :host { --steal-this-* } CSS from attributes
- Derive input-bg and border from background via color-mix()
- Derive muted and dim from text via color-mix()
- Prepend themeVars block before STYLES in render() for shadow DOM inheritance
- Export DittoTheme interface: { accent?, background?, text?, radius? }
- Export fetchDittoTheme(naddr) that decodes naddr bech32, queries kind
from naddr using naddr relay hints + BOOTSTRAP_RELAYS fallback
- Picks highest created_at event, parses JSON content for color fields
- Returns null on any failure (invalid naddr, no event, parse error)
- Add "copy-ditto-theme" to observedAttributes - Add dittoThemePromise and _dittoTheme private fields - Add dittoTheme public getter for Phase 23 access - Start fetchDittoTheme() in constructor (parallel with manifestPromise) when copy-ditto-theme attribute is present - Widget visual appearance is unaffected (themeVars unchanged)
Ditto theme events (kind 36767/16767) store colors in c tags (["c", "#rrggbb", "primary"|"text"|"background"]), not in the JSON content field. Also made DittoTheme fields required (primary, background, text) and removed radius (not part of Ditto spec). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Parse all Ditto NIP theme tags: c (colors), f (fonts with body/title roles), bg (background with imeta-style variadic format), and title. Store the original event for tag passthrough. Add createActiveThemeEvent() to build kind 16767 from resolved theme, and checkExistingTheme() to detect if user already has an active profile theme. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add "ditto-theme" state to the widget state machine. After auth, if a Ditto theme was resolved via copy-ditto-theme attribute, show a preview step with color swatches, font info, and background info from the Ditto NIP spec. User can "Copy theme" (publishes kind 16767 to write relays) or "Skip" to proceed to deploy form. Checks for existing active theme and shows overwrite warning. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The :host { } block inside shadow.innerHTML was not reliably
inheriting CSS custom properties to modal children. Switch to
this.style.setProperty() on the host element directly — these
persist across shadow DOM innerHTML rewrites and inherit into
all shadow DOM children. Also call applyThemeVars() in constructor
and attributeChangedCallback for all theme attributes.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When only accent is set (no explicit background attribute), derive --steal-this-bg, --steal-this-input-bg, and --steal-this-border from the accent color using color-mix with high black percentages. This makes the entire modal feel cohesive with just a single accent color attribute instead of only coloring the extension button. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Bundle Size Report
|
Contributor
Author
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Return null early if the decoded naddr kind is not 36767 (theme definition) or 16767 (active profile theme). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
hzrd149
approved these changes
Apr 9, 2026
Collaborator
hzrd149
left a comment
hzrd149
left a comment
There was a problem hiding this comment.
Mostly style changes. looks good 👍
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
accent,background,text,radiusHTML attributes to<steal-this>for declarative theming via CSS custom propertiesvar(--steal-this-*)with inline fallback defaultscopy-ditto-themeattribute: resolves naddr to kind 36767/16767 Ditto theme event, extracts colors/fonts/background per Ditto NIP specaccentis set, modal surfaces (bg, inputs, borders) derive dark shades from accent viacolor-mixfor cohesive themingCloses #24
Test plan
accent="#e74c3c"— button AND modal should show red themebackground="#2d2d44" accent="#3498db"— modal surfaces reflect custom bgradius="0"— sharp corners everywhere;radius="16px"— roundedcopy-ditto-theme="naddr1..."with a valid Ditto theme naddr — verify theme preview step appears after auth