Themes

Swft Cart ships with 12 preset themes and a custom theme system built on CSS custom properties. Select a theme in WooCommerce → Swft Cart → Appearance.

Preset themes

1. Dark (default)

The signature Swft dark theme. Matches the Swft Checkout aesthetic.

Variable	Value
--swftcart-bg	#060608
--swftcart-surface	#0e0e10
--swftcart-text-1	#e8e8e8
--swftcart-text-2	#b0b0b0
--swftcart-accent	#00ffd1
--swftcart-border	#1e1e1e
--swftcart-btn-text	#000000

2. Light

Clean white theme for light-mode stores.

Variable	Value
--swftcart-bg	#ffffff
--swftcart-surface	#f8f8fa
--swftcart-text-1	#0a0a0a
--swftcart-text-2	#404040
--swftcart-accent	#0a0a0a
--swftcart-border	#e0e0e0
--swftcart-btn-text	#ffffff

3. Slate

Dark slate with indigo accent. Good for fashion and lifestyle brands.

Variable	Value
--swftcart-bg	#0f172a
--swftcart-surface	#1e293b
--swftcart-text-1	#f1f5f9
--swftcart-text-2	#94a3b8
--swftcart-accent	#6366f1
--swftcart-border	#334155
--swftcart-btn-text	#ffffff

4. Forest

Dark green, earthy tones. Good for food, wellness, and outdoor brands.

Variable	Value
--swftcart-bg	#0a1a0f
--swftcart-surface	#122318
--swftcart-text-1	#e2f0e8
--swftcart-text-2	#8fad98
--swftcart-accent	#4ade80
--swftcart-border	#1e3828
--swftcart-btn-text	#0a1a0f

5. Rose

Light rose theme. Good for beauty, gifting, and lifestyle.

Variable	Value
--swftcart-bg	#fff1f2
--swftcart-surface	#ffffff
--swftcart-text-1	#1c0a0c
--swftcart-text-2	#6b2430
--swftcart-accent	#e11d48
--swftcart-border	#fecdd3
--swftcart-btn-text	#ffffff

6. Amber

Warm amber for food, coffee, and artisan brands.

Variable	Value
--swftcart-bg	#1c1408
--swftcart-surface	#2a1f0e
--swftcart-text-1	#fef3c7
--swftcart-text-2	#d97706
--swftcart-accent	#f59e0b
--swftcart-border	#3d2e10
--swftcart-btn-text	#1c1408

7. Ocean

Deep blue-teal for tech and SaaS-adjacent brands.

Variable	Value
--swftcart-bg	#071928
--swftcart-surface	#0d2a40
--swftcart-text-1	#e0f2fe
--swftcart-text-2	#7dd3fc
--swftcart-accent	#06b6d4
--swftcart-border	#164e63
--swftcart-btn-text	#071928

8. Mono

Pure monochrome. Works on any brand.

Variable	Value
--swftcart-bg	#111111
--swftcart-surface	#1a1a1a
--swftcart-text-1	#f5f5f5
--swftcart-text-2	#a3a3a3
--swftcart-accent	#f5f5f5
--swftcart-border	#262626
--swftcart-btn-text	#111111

Swft brand themes

Four themes that match the Swft design system. These are the defaults for new installations.

swft-paper (default for new installs)

Warm off-white with lime accent.

Variable	Value
--swftcart-bg	#F5F1EA
--swftcart-t1	#14110F
--swftcart-accent	#D4EF3B
--swftcart-btn-text	#0B0F03

swft-technical

Near-black with lime accent.

Variable	Value
--swftcart-bg	#0D0D0E
--swftcart-t1	#F3F1EC
--swftcart-accent	#D4EF3B
--swftcart-btn-text	#0B0F03

swft-warm

Linen and sand tones with terracotta accent.

Variable	Value
--swftcart-bg	#F0E5D2
--swftcart-t1	#2A1F15
--swftcart-accent	#C4763E
--swftcart-btn-text	#FDF5E6

swft-electric

Clean white with electric violet accent.

Variable	Value
--swftcart-bg	#F7F6F2
--swftcart-t1	#0A0A12
--swftcart-accent	#7A4FD6
--swftcart-btn-text	#F7F6F2

Custom theme

Select Custom in the theme picker to expose all CSS variable fields. You can also override variables programmatically via the swftcart_theme_vars filter:

add_filter( 'swftcart_theme_vars', function( array $vars ): array {
    $vars['--swftcart-accent']   = '#ff6b35';
    $vars['--swftcart-btn-text'] = '#ffffff';
    return $vars;
} );

The filter receives the full variable array for the selected base theme and must return the same structure. This runs after the theme picker selection, so you can use any preset as a base and override individual tokens.

Full variable list

Variable	Purpose
--swftcart-bg	Drawer background
--swftcart-surface	Card and section backgrounds
--swftcart-text-1	Primary text
--swftcart-text-2	Secondary and muted text
--swftcart-accent	Buttons, active states, links
--swftcart-btn-text	Text colour on accent buttons
--swftcart-border	Dividers and input borders
--swftcart-radius	Border radius (default: 10px)
--swftcart-font	Font stack (default: inherit from theme)
--swftcart-shadow	Drawer box shadow
--swftcart-width	Drawer width (default: 420px)
--swftcart-z-index	Drawer z-index (default: 9999)