---
title: Custom Styling
description: Brand your Churnkey Cancel Flow with your own CSS
---

## CSS Classes Available

```css
## General Components
.ck-style ## applies to everything
.ck-modal ## the embed pop-up
.ck-background-overlay ## the partially transparent overlay
.ck-step ## a wrapper around all content

## specific steps in flow
.ck-pause-step
.ck-discount-step
.ck-contact-step
.ck-redirect-step
.ck-survey-step
.ck-freeform-step
.ck-confirm-step

## while a customer subscription is being modified
.ck-progress-step

## once flow is complete - after discount, pause, cancel
.ck-complete-step

## if error is shown at any point (hopefully customers will never see this)
.ck-error-step

## Step components
.ck-step-header
.ck-step-header-text
.ck-brand-image
.ck-brand-image-header
.ck-step-description-text
.ck-step-body
.ck-step-footer

## Button variations
.ck-button
.ck-text-button ## custom color
.ck-black-text-button
.ck-primary-button ## custom color
.ck-black-primary-button
.ck-gray-primary-button
```

## **Example CSS Override**

For simplicity, assume you want to modify the header text's appearance. The following CSS rule uses the top-level embed id and targets the specific element that needs styling.

```css
#ck-app h1 {
  color: black;
  background: yellow;
  font-style: italic;
}
```

<!-- PEANUT -->

Here's how that looks in Chrome dev tools.
![Featured Image](/img/dev-tools-css-override.png)

## Ready-Made CSS Templates

Copy and paste these templates to quickly style your Cancel Flow. Each template covers the modal, form elements (dropdowns, inputs, textareas), buttons, text colors, and info boxes.

::alert{type="info"}
These templates override visual styling only. Your brand colors configured in the Churnkey dashboard (e.g., the CTA button color) will still apply on top of these styles.
::

### Dark Obsidian
*Inspired by leading developer deployment platforms — pure neutral dark.*

<div style="text-align: center">

![Dark Obsidian Theme](/img/cancel_flow/template-dark-obsidian.png)

</div>

::collapsible{name="Dark Obsidian — View full CSS template"}
```css
/* ===========================================
   Dark Obsidian — Pure Neutral Dark
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #141414 !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #141414 !important; border-bottom: 1px solid #1f1f1f !important; }
#ck-app .ck-step-header-text { color: #f5f5f5 !important; }
#ck-app .ck-step-description-text { color: #a3a3a3 !important; }
#ck-app .ck-step-body { background: #141414 !important; color: #a3a3a3 !important; }
#ck-app .ck-step-footer { background: #141414 !important; border-top: 1px solid #1f1f1f !important; }

/* Form elements (dropdowns, inputs, textareas) */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #1c1c1c !important;
  color: #e5e5e5 !important;
  border-color: #333333 !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #525252 !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #525252 !important; }
#ck-app option { background-color: #1c1c1c !important; color: #e5e5e5 !important; }

/* Text color overrides for dark background legibility */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #e5e5e5 !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #a3a3a3 !important; }
#ck-app .text-brand-black { color: #f5f5f5 !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #1c1c1c !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #333333 !important; color: #a3a3a3 !important; }
#ck-app .ck-pause-subscription-details b { color: #e5e5e5 !important; }
#ck-app .active-discount-disclaimer { color: #a3a3a3 !important; background-color: #1c1c1c !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #a3a3a3 !important; }

/* Brand color overrides (header bar, CTA, icons, borders) */
#ck-app .h-14.rounded-t-lg { background-color: #1c1c1c !important; }
html body #ck-app .bg-client-primary { background-color: #525252 !important; }
html body #ck-app .text-client-primary { color: #a3a3a3 !important; }
html body #ck-app .text-client-primary-middle { color: #a3a3a3 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #a3a3a3 !important; }
html body #ck-app .border-client-primary { border-color: #525252 !important; }
html body #ck-app .border-client-primary-light { border-color: #262626 !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #525252 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #262626 !important; color: #f5f5f5 !important; border: 1px solid #333333 !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #1c1c1c !important; color: #d4d4d4 !important; border: 1px solid #262626 !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #a3a3a3 !important; }
```
::

---

### Dark Midnight
*Inspired by a global payments infrastructure — cool blue-tinted dark.*

<div style="text-align: center">

![Dark Midnight Theme](/img/cancel_flow/template-dark-midnight.png)

</div>

::collapsible{name="Dark Midnight — View full CSS template"}
```css
/* ===========================================
   Dark Midnight — Blue-Tinted Dark
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(2, 6, 23, 0.75) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #0f172a !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #0f172a !important; border-bottom: 1px solid #1a2437 !important; }
#ck-app .ck-step-header-text { color: #f1f5f9 !important; }
#ck-app .ck-step-description-text { color: #94a3b8 !important; }
#ck-app .ck-step-body { background: #0f172a !important; color: #94a3b8 !important; }
#ck-app .ck-step-footer { background: #0f172a !important; border-top: 1px solid #1a2437 !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #475569 !important; }
#ck-app option { background-color: #1e293b !important; color: #f1f5f9 !important; }

/* Text color overrides */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #f1f5f9 !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #94a3b8 !important; }
#ck-app .text-brand-black { color: #f1f5f9 !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #1e293b !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #1e293b !important; color: #94a3b8 !important; }
#ck-app .ck-pause-subscription-details b { color: #f1f5f9 !important; }
#ck-app .active-discount-disclaimer { color: #94a3b8 !important; background-color: #1e293b !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #94a3b8 !important; }

/* Brand color overrides */
#ck-app .h-14.rounded-t-lg { background-color: #1e293b !important; }
html body #ck-app .bg-client-primary { background-color: #3b82f6 !important; }
html body #ck-app .text-client-primary { color: #3b82f6 !important; }
html body #ck-app .text-client-primary-middle { color: #3b82f6 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #94a3b8 !important; }
html body #ck-app .border-client-primary { border-color: #3b82f6 !important; }
html body #ck-app .border-client-primary-light { border-color: #1e293b !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #3b82f6 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #1e293b !important; color: #cbd5e1 !important; border: 1px solid #334155 !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #1e293b !important; color: #94a3b8 !important; border: 1px solid #1e293b !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #94a3b8 !important; }
```
::

---

### Dark Ember
*Inspired by popular team knowledge bases — warm dark with amber undertones.*

<div style="text-align: center">

![Dark Ember Theme](/img/cancel_flow/template-dark-ember.png)

</div>

::collapsible{name="Dark Ember — View full CSS template"}
```css
/* ===========================================
   Dark Ember — Warm Dark
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(12, 10, 9, 0.7) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #1c1917 !important;
  border: 1px solid #292524 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #1c1917 !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #1c1917 !important; border-bottom: 1px solid #231f1d !important; }
#ck-app .ck-step-header-text { color: #fafaf9 !important; }
#ck-app .ck-step-description-text { color: #a8a29e !important; }
#ck-app .ck-step-body { background: #1c1917 !important; color: #a8a29e !important; }
#ck-app .ck-step-footer { background: #1c1917 !important; border-top: 1px solid #231f1d !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #292524 !important;
  color: #fafaf9 !important;
  border-color: #44403c !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #57534e !important; }
#ck-app option { background-color: #292524 !important; color: #fafaf9 !important; }

/* Text color overrides */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #fafaf9 !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #a8a29e !important; }
#ck-app .text-brand-black { color: #fafaf9 !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #292524 !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #292524 !important; color: #a8a29e !important; }
#ck-app .ck-pause-subscription-details b { color: #fafaf9 !important; }
#ck-app .active-discount-disclaimer { color: #a8a29e !important; background-color: #292524 !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #a8a29e !important; }

/* Brand color overrides */
#ck-app .h-14.rounded-t-lg { background-color: #292524 !important; }
html body #ck-app .bg-client-primary { background-color: #f97316 !important; }
html body #ck-app .text-client-primary { color: #f97316 !important; }
html body #ck-app .text-client-primary-middle { color: #f97316 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #a8a29e !important; }
html body #ck-app .border-client-primary { border-color: #f97316 !important; }
html body #ck-app .border-client-primary-light { border-color: #292524 !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #f97316 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #292524 !important; color: #d6d3d1 !important; border: 1px solid #44403c !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #292524 !important; color: #a8a29e !important; border: 1px solid #292524 !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #a8a29e !important; }
```
::

---

### Dark Blurple
*Inspired by the world's largest real-time community platform — elevated dark.*

<div style="text-align: center">

![Dark Blurple Theme](/img/cancel_flow/template-dark-discord.png)

</div>

::collapsible{name="Dark Blurple — View full CSS template"}
```css
/* ===========================================
   Dark Blurple — Elevated Dark with Violet
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #2f3136 !important;
  border: 1px solid #40444b !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #2f3136 !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #2f3136 !important; border-bottom: 1px solid #36393f !important; }
#ck-app .ck-step-header-text { color: #ffffff !important; }
#ck-app .ck-step-description-text { color: #b9bbbe !important; }
#ck-app .ck-step-body { background: #2f3136 !important; color: #b9bbbe !important; }
#ck-app .ck-step-footer { background: #2f3136 !important; border-top: 1px solid #36393f !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #36393f !important;
  color: #ffffff !important;
  border-color: #4f545c !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #5865f2 !important;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #72767d !important; }
#ck-app option { background-color: #36393f !important; color: #ffffff !important; }

/* Text color overrides */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #ffffff !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #b9bbbe !important; }
#ck-app .text-brand-black { color: #ffffff !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #36393f !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #40444b !important; color: #b9bbbe !important; }
#ck-app .ck-pause-subscription-details b { color: #ffffff !important; }
#ck-app .active-discount-disclaimer { color: #b9bbbe !important; background-color: #36393f !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #b9bbbe !important; }

/* Brand color overrides */
#ck-app .h-14.rounded-t-lg { background-color: #36393f !important; }
html body #ck-app .bg-client-primary { background-color: #5865f2 !important; }
html body #ck-app .text-client-primary { color: #5865f2 !important; }
html body #ck-app .text-client-primary-middle { color: #5865f2 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #b9bbbe !important; }
html body #ck-app .border-client-primary { border-color: #5865f2 !important; }
html body #ck-app .border-client-primary-light { border-color: #40444b !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #5865f2 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #36393f !important; color: #ffffff !important; border: 1px solid #40444b !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #36393f !important; color: #b9bbbe !important; border: 1px solid #40444b !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #b9bbbe !important; }
```
::

---

### Light Clean
*A polished light theme with soft borders and subtle shadows.*

<div style="text-align: center">

![Light Clean Theme](/img/cancel_flow/template-light-accent.png)

</div>

::collapsible{name="Light Clean — View full CSS template"}
```css
/* ===========================================
   Light Clean — Polished Light
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(4px) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #ffffff !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #ffffff !important; border-bottom: 1px solid #f1f5f9 !important; }
#ck-app .ck-step-header-text { color: #0f172a !important; }
#ck-app .ck-step-description-text { color: #64748b !important; }
#ck-app .ck-step-body { background: #ffffff !important; color: #334155 !important; }
#ck-app .ck-step-footer { background: #ffffff !important; border-top: 1px solid #f1f5f9 !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #94a3b8 !important; }
#ck-app option { background-color: #ffffff !important; color: #0f172a !important; }

/* Brand color overrides */
html body #ck-app .bg-client-primary { background-color: #6366f1 !important; }
html body #ck-app .text-client-primary { color: #6366f1 !important; }
html body #ck-app .text-client-primary-middle { color: #6366f1 !important; opacity: 0.3 !important; }
html body #ck-app .text-client-primary-light { color: #64748b !important; }
html body #ck-app .border-client-primary { border-color: #6366f1 !important; }
html body #ck-app .border-client-primary-light { border-color: #e2e8f0 !important; }
#ck-app [class*="bg-client-primary-light"] { background-color: #eef2ff !important; }

/* Info boxes and offer containers */
#ck-app .ck-pause-subscription-details { border-color: #e2e8f0 !important; color: #64748b !important; }
#ck-app .ck-pause-subscription-details b { color: #0f172a !important; }
#ck-app .active-discount-disclaimer { color: #64748b !important; background-color: #f8fafc !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #334155 !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #6366f1 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-text-button { color: #6366f1 !important; }
#ck-app .ck-black-primary-button { background: #f8fafc !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; }
```
::

---

## Building Custom Dark Themes

::alert{type="warning"}
The templates above override all brand colors (CTA buttons, header bar icons, survey borders, offer containers) using `html body #ck-app` selectors for specificity. They also override `.text-brand-black`, `.text-opacity-*`, and `[class*="bg-client-primary-light"]` for dark background legibility. If you build a custom theme, include both the **brand color overrides** and the **text color overrides** sections or elements may remain in your dashboard's default brand color.
::

## Quick Implementation Guide

Add one of the templates above to your site by injecting a `<style>` tag anywhere on the page where the Churnkey embed loads. The CSS will automatically apply to the Cancel Flow modal.

```html
<style>
  /* Paste your chosen template CSS here */
</style>
```

### Using an AI coding assistant

If you use an AI coding assistant (Claude Code, Cursor, Copilot, etc.), paste the following prompt to have it wire up the CSS for you:

```text
I need to add custom CSS styling to my Churnkey Cancel Flow embed.

Here is the CSS template I want to apply:

<PASTE YOUR CHOSEN CSS TEMPLATE HERE>

Instructions:
1. Find where the Churnkey embed script loads in my codebase
   (look for `churnkey.init`, `assets.churnkey.co`, or `window.churnkey`).
2. Add a <style> tag on the same page, BEFORE the Churnkey script,
   containing the CSS above.
3. If my app uses a framework (React, Vue, Next.js, etc.), inject
   the styles using the idiomatic approach for that framework
   (e.g., a global stylesheet import or a <style> block in the layout).
4. Do not modify the Churnkey embed script itself.

Reference docs: https://docs.churnkey.co/cancel-flows/custom-styling
```