Custom design

A paid option: align the widget's look with your brand — colors, any CSS tweaks, and your own logo instead of the "Protected by DSTUcrypt" badge. Full control over the appearance.

The widget's cryptography runs in an isolated iframe on our domain, so your page cannot style it directly. Instead, you pass the styling to embed(), and the widget applies it from the inside — in a controlled, safe way.

const signer = await embed('sign', {
  mount: 'modal',
  theme: {                        // tokens — theme colors
    accent:   '#6d28d9',
    accentFg: '#ffffff',
    tint:     '#f1e9ff',
    ring:     'rgba(109,40,217,.18)',
  },
  styles: {                       // structural tweaks on top of the tokens
    '.hero-icon':        { borderRadius: '50%' },
    'button.btn-primary':{ textTransform: 'uppercase', letterSpacing: '.04em' },
    '.file':             { borderStyle: 'solid' },
  },
  brand: {                        // your own brand instead of our badge
    logo: 'data:image/svg+xml;base64,…',
    name: 'Acme Sign',
    href: 'https://acme.example',
  },
});

How to enable it

The option costs UAH 1,200/month per domain (added on top of the base subscription; the annual plan gets the same discount) and is enabled in your account with a checkbox next to the relevant domain. Removing the "Protected by DSTUcrypt" badge is included in this same option.

• During the trial period the styling works — so you can evaluate everything before paying.
• After the trial it only takes effect for domains with a paid custom_design (the service exposes this state in /api/license). Without the entitlement, theme/styles/css/brand and badge removal are ignored — the default look and the badge come back.

Questions and activation — sale@dstucrypt.com.ua.

On localhost and on dstucrypt.com.ua itself the styling is always applied — so you can fine-tune everything before enabling the option.

theme — color tokens

Each token overrides a theme CSS variable. The value is any valid CSS color (up to 64 characters). Unknown keys are ignored.

For a dark look, simply set dark token values (bg, fg, line, field, card…) — the widget is driven entirely by the theme variables.

styles — structural tweaks

A "selector → properties" object for whatever the tokens do not cover: radii, font, text case, border thickness, and so on. This is not a CSS string but a structure — our code serializes it into CSS.

styles: {
  '.hero-icon':         { borderRadius: '50%' },
  'button.btn-primary': { textTransform: 'uppercase', letterSpacing: '.04em' },
  '.file:hover':        { borderColor: '#6d28d9' },
}

• Properties are camelCase (borderRadius, textTransform), as in the DOM .style (kebab-case works too: 'border-radius'). Numbers for lengths become px: borderRadius: 8 → 8px.
• Selectors — anything you like. This is a paid option with full control over the appearance: use any selectors, pseudo-classes (:hover, :focus…), and properties.

As a reference — the widget's main classes (you can build on them or write your own):

The styles are applied inside the isolated iframe — it is CSS only, so it is impossible to run a script from there. The widget's appearance is your responsibility.

Advanced variant. Instead of (or alongside) styles you can pass css — a raw CSS string injected into the same <style>. Both give full control; styles is simply more convenient and more structured.

brand — your own brand

Replaces the "Protected by DSTUcrypt" line with yours:

By removing our badge, you take the trust signal onto your own brand. This is a deliberate choice: at the moment of entering the password, the user will see you. If you do not need your own brand yet but still want the badge gone — there is a separate option, branding: false (see "Branding").

Example: matching your site's button

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--brand') || '#0057ff';

await embed('sign', {
  mount: 'modal',
  theme: { accent: brandColor.trim(), ring: 'rgba(0,87,255,.16)' },
  styles: {
    'button.btn-primary': { borderRadius: '8px' },
    '.file':              { borderRadius: '8px' },
  },
  brand: { name: 'My Service', href: 'https://myservice.ua' },
});

The styling is applied before the widget appears on screen, so the user never sees a switch from the default look to yours.