Theme Examples
Try these themes in your app to see how ComponentsKit adapts colors and layout.
Modern Theme
A sleek and professional theme inspired by fintech and modern SaaS design, featuring clean lines, minimal contrast, and a polished, high-end aesthetic.
extension Theme {
static let modern: Self = .init {
$0.colors.background = .themed(
light: .hex("F6F9FC"),
dark: .hex("0A0B0D")
)
$0.colors.secondaryBackground = .themed(
light: .hex("FFFFFF"),
dark: .hex("1A1B1F")
)
$0.colors.foreground = .themed(
light: .hex("0A2540"),
dark: .hex("FFFFFF")
)
$0.colors.secondaryForeground = .themed(
light: .hex("425466"),
dark: .hex("BCCCDC")
)
$0.colors.content1 = .themed(
light: .hex("E9F0FB"),
dark: .hex("1C2C40")
)
$0.colors.content2 = .themed(
light: .hex("D6E4F0"),
dark: .hex("253B59")
)
$0.colors.content3 = .themed(
light: .hex("B3C7E6"),
dark: .hex("32537C")
)
$0.colors.content4 = .themed(
light: .hex("8CA8D8"),
dark: .hex("4D6BA3")
)
$0.colors.divider = .themed(
light: .rgba(r: 10, g: 37, b: 64, a: 0.1),
dark: .rgba(r: 255, g: 255, b: 255, a: 0.1)
)
$0.colors.accent = .init(
main: .themed(
light: .hex("635BFF"),
dark: .hex("9E95FF")
),
contrast: .themed(
light: .hex("FFFFFF"),
dark: .hex("0A0B0D")
),
background: .themed(
light: .hex("E7E5FF"),
dark: .hex("3B388C")
)
)
$0.colors.primary = .init(
main: .themed(
light: .hex("#0B0C0E"),
dark: .hex("#FFFFFF")
),
contrast: .themed(
light: .hex("#FFFFFF"),
dark: .hex("#0B0C0E")
),
background: .themed(
light: .hex("#D9D9D9"),
dark: .hex("#515253")
)
)
$0.colors.success = .init(
main: .themed(
light: .hex("00B86B"),
dark: .hex("00D487")
),
contrast: .themed(
light: .hex("FFFFFF"),
dark: .hex("0A0B0D")
),
background: .themed(
light: .hex("D8F5EC"),
dark: .hex("1E3C34")
)
)
$0.colors.warning = .init(
main: .themed(
light: .hex("FFB020"),
dark: .hex("FFC94A")
),
contrast: .universal(.hex("0A2540")),
background: .themed(
light: .hex("FFF4D6"),
dark: .hex("4E3E1C")
)
)
$0.colors.danger = .init(
main: .themed(
light: .hex("FF5A5F"),
dark: .hex("FF7B84")
),
contrast: .universal(.hex("FFFFFF")),
background: .themed(
light: .hex("FFEAEA"),
dark: .hex("4A2C2C")
)
)
$0.layout.disabledOpacity = 0.5
$0.layout.componentRadius = .init(
small: 8.0,
medium: 12.0,
large: 16.0
)
$0.layout.containerRadius = .init(
small: 12.0,
medium: 16.0,
large: 20.0
)
$0.layout.shadow = .init(
small: .init(
radius: 6.0,
offset: .init(width: 0, height: 4),
color: .themed(
light: .rgba(r: 0, g: 0, b: 0, a: 0.08),
dark: .rgba(r: 255, g: 255, b: 255, a: 0.08)
)
),
medium: .init(
radius: 12.0,
offset: .init(width: 0, height: 6),
color: .themed(
light: .rgba(r: 0, g: 0, b: 0, a: 0.12),
dark: .rgba(r: 255, g: 255, b: 255, a: 0.12)
)
),
large: .init(
radius: 16.0,
offset: .init(width: 0, height: 8),
color: .themed(
light: .rgba(r: 0, g: 0, b: 0, a: 0.16),
dark: .rgba(r: 255, g: 255, b: 255, a: 0.16)
)
)
)
$0.layout.borderWidth = .init(
small: 0.5,
medium: 1.0,
large: 2.0
)
$0.layout.animationScale = .init(
small: 0.99,
medium: 0.97,
large: 0.95
)
$0.layout.typography.headline = .init(
small: .custom(name: "Urbanist-Medium", size: 16),
medium: .custom(name: "Urbanist-Semibold", size: 20),
large: .custom(name: "Urbanist-Bold", size: 24)
)
$0.layout.typography.body = .init(
small: .custom(name: "Urbanist-Regular", size: 14),
medium: .custom(name: "Urbanist-Regular", size: 16),
large: .custom(name: "Urbanist-Regular", size: 18)
)
$0.layout.typography.button = .init(
small: .custom(name: "Urbanist-Medium", size: 14),
medium: .custom(name: "Urbanist-Medium", size: 16),
large: .custom(name: "Urbanist-Medium", size: 20)
)
$0.layout.typography.caption = .init(
small: .custom(name: "Urbanist-Regular", size: 10),
medium: .custom(name: "Urbanist-Regular", size: 12),
large: .custom(name: "Urbanist-Regular", size: 14)
)
}
}
Resources:
Download the font files from Google Fonts.
Retro Theme
A nostalgic theme inspired by classic computer interfaces, arcade machines, and old-school terminal UIs.
extension Theme {
static let retro: Self = .init {
$0.colors.background = .themed(
light: .hex("F4F1EC"),
dark: .hex("0A0F0A")
)
$0.colors.secondaryBackground = .themed(
light: .hex("FFFDF7"),
dark: .hex("101A10")
)
$0.colors.foreground = .themed(
light: .hex("2C2C2C"),
dark: .hex("00FF88")
)
$0.colors.secondaryForeground = .themed(
light: .hex("595959"),
dark: .hex("66FFCC")
)
$0.colors.content1 = .themed(
light: .hex("FFEFD0"),
dark: .hex("142414")
)
$0.colors.content2 = .themed(
light: .hex("FFD1DC"),
dark: .hex("1C1A1D")
)
$0.colors.content3 = .themed(
light: .hex("B2E1FF"),
dark: .hex("122032")
)
$0.colors.content4 = .themed(
light: .hex("D3FAD6"),
dark: .hex("163A28")
)
$0.colors.divider = .themed(
light: .rgba(r: 0, g: 0, b: 0, a: 0.2),
dark: .rgba(r: 0, g: 255, b: 136, a: 0.2)
)
$0.colors.primary = .init(
main: .themed(
light: .hex("000000"),
dark: .hex("00FF88")
),
contrast: .themed(
light: .hex("FFFFFF"),
dark: .hex("0A0F0A")
),
background: .themed(
light: .hex("FCD34D"),
dark: .hex("00442A")
)
)
$0.colors.accent = .init(
main: .universal(.hex("FF5E00")),
contrast: .universal(.hex("FFFFFF")),
background: .themed(
light: .hex("FFF3E0"),
dark: .hex("4E2A1A")
)
)
$0.colors.success = .init(
main: .themed(
light: .hex("2C974B"),
dark: .hex("50FA7B")
),
contrast: .themed(
light: .hex("FFFFFF"),
dark: .hex("000000")
),
background: .themed(
light: .hex("E6FFE8"),
dark: .hex("1C3F26")
)
)
$0.colors.warning = .init(
main: .themed(
light: .hex("FFA800"),
dark: .hex("FAD000")
),
contrast: .universal(.hex("000000")),
background: .themed(
light: .hex("FFF4D6"),
dark: .hex("4B3A00")
)
)
$0.colors.danger = .init(
main: .themed(
light: .hex("FF0033"),
dark: .hex("FF3860")
),
contrast: .universal(.hex("FFFFFF")),
background: .themed(
light: .hex("FFE5E5"),
dark: .hex("4C1B1B")
)
)
$0.layout.disabledOpacity = 0.5
$0.layout.componentRadius = .init(
small: 0.0,
medium: 2.0,
large: 4.0
)
$0.layout.containerRadius = .init(
small: 2.0,
medium: 4.0,
large: 6.0
)
$0.layout.shadow = .init(
small: .init(
radius: 0,
offset: .init(width: 0, height: 0),
color: .themed(
light: .rgba(r: 0, g: 0, b: 0, a: 0.05),
dark: .rgba(r: 0, g: 255, b: 136, a: 0.05)
)
),
medium: .init(
radius: 0,
offset: .init(width: 0, height: 0),
color: .themed(
light: .rgba(r: 0, g: 0, b: 0, a: 0.08),
dark: .rgba(r: 0, g: 255, b: 136, a: 0.08)
)
),
large: .init(
radius: 0,
offset: .init(width: 0, height: 0),
color: .themed(
light: .rgba(r: 0, g: 0, b: 0, a: 0.1),
dark: .rgba(r: 0, g: 255, b: 136, a: 0.1)
)
)
)
$0.layout.borderWidth = .init(
small: 1.0,
medium: 1.5,
large: 2.0
)
$0.layout.animationScale = .init(
small: 1.0,
medium: 1.0,
large: 1.0
)
$0.layout.typography.headline = .init(
small: .custom(name: "SpaceGrotesk-Medium", size: 16),
medium: .custom(name: "SpaceGrotesk-Semibold", size: 20),
large: .custom(name: "SpaceGrotesk-Bold", size: 24)
)
$0.layout.typography.body = .init(
small: .custom(name: "SpaceGrotesk-Regular", size: 14),
medium: .custom(name: "SpaceGrotesk-Regular", size: 16),
large: .custom(name: "SpaceGrotesk-Regular", size: 18)
)
$0.layout.typography.button = .init(
small: .custom(name: "SpaceGrotesk-Medium", size: 14),
medium: .custom(name: "SpaceGrotesk-Semibold", size: 16),
large: .custom(name: "SpaceGrotesk-Semibold", size: 18)
)
$0.layout.typography.caption = .init(
small: .custom(name: "SpaceGrotesk-Regular", size: 10),
medium: .custom(name: "SpaceGrotesk-Regular", size: 12),
large: .custom(name: "SpaceGrotesk-Regular", size: 14)
)
}
}
Resources:
Download the font files from Google Fonts.