Theming

This is the API reference for the KritzelTheme. It lists the theme groups and their light and dark default values. Override selected values by spreading an existing preset and replacing only the properties you want to customize.

import { KritzelEditor, lightTheme, type KritzelTheme } from '@kritzel/react-editor';

const customTheme: KritzelTheme = {
	...lightTheme,
	name: 'branded-purple-flat',
	global: { ...lightTheme.global, primaryColor: '#7c3aed', textPrimary: '#3b2a66' },
	engine: { ...lightTheme.engine, backgroundColor: 'transparent' },
	toolbar: {
		...lightTheme.toolbar,
		backgroundColor: '#f8f2ff',
		borderRadius: '0px',
		controlSelectedBackgroundColor: '#7c3aed',
	},
};

export function BrandedEditor() {
	return <KritzelEditor themes={[customTheme]} theme={customTheme.name} />;
}

Global

Property	Light default	Dark default
borderColor	#ebebeb	#3a3a3a
dividerColor	#e0e0e0	#3a3a3a
focusColor	#333333	#ffffff
focusRingColor	#333333	#ffffff
iconColor	currentColor	currentColor
scrollbarThumbColor	#ebebeb	#555555
textPrimary	#000000	#ffffff
textSecondary	#333333	#e0e0e0

Back To Content

Property	Light default	Dark default
activeBackgroundColor	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
boxShadow	0 0 3px rgba(0, 0, 0, 0.08)	0 0 6px rgba(0, 0, 0, 0.3)
color	#000000	#ffffff
hoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)

Checkerboard

Property	Light default	Dark default
colorDark	#cccccc	#4a4a4a
colorLight	#ffffff	#3a3a3a

Color Palette

Property	Light default	Dark default
circleBorderColor	#dddcdc	#4a4a4a
hoverBackgroundColor	#ebebeb	#3a3a3a
selectedBackgroundColor	#ebebeb	#3a3a3a

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
boxShadow	0 1px 6px rgba(0, 0, 0, 0.12)	0 1px 8px rgba(0, 0, 0, 0.4)
dividerColor	rgba(0, 0, 0, 0.1)	rgba(255, 255, 255, 0.1)
itemActiveBackgroundColor	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
itemColor	#333333	#e0e0e0
itemDisabledColor	#aaaaaa	#666666
itemHoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)

Current User Dialog

Property	Light default	Dark default
emailColor	#666666	#999999
nameColor	#333333	#ffffff

Dialog

Property	Light default	Dark default
backdropColor	rgba(0, 0, 0, 0.4)	rgba(0, 0, 0, 0.6)
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
boxShadow	0 4px 24px rgba(0, 0, 0, 0.15)	0 4px 24px rgba(0, 0, 0, 0.5)
closeButtonActiveBackground	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
closeButtonBackground	transparent	transparent
closeButtonColor	#333333	#e0e0e0
closeButtonHoverBackground	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
closeButtonHoverColor	#000000	#ffffff
fontFamily	inherit	-
footerBorder	1px solid #ebebeb	1px solid #3a3a3a
headerBorder	1px solid #ebebeb	1px solid #3a3a3a
titleColor	#000000	#ffffff

Property	Light default	Dark default
accentColor	#007bff	#0A84FF
background	#ffffff	#1a1a1a
borderColor	#dbdbdb	#4a4a4a
borderRadius	6px	6px
hoverBackgroundColor	#f0f0f0	#3a3a3a
hoverBorderColor	#cccccc	#5a5a5a
menuBorderRadius	6px	6px
selectedBackgroundColor	#007bff1a	rgba(10, 132, 255, 0.2)
textColor	#333333	#e0e0e0

Editor

Property	Light default	Dark default
loadingOverlayBackground	rgba(255, 255, 255, 0.85)	rgba(26, 26, 26, 0.85)
loadingOverlayColor	#333333	#e0e0e0
loadingOverlaySpinnerActiveColor	#333333	#e0e0e0
loadingOverlaySpinnerColor	#cccccc	#555555
syncIndicatorBackground	rgba(255, 255, 255, 0.92)	rgba(30, 30, 30, 0.95)
syncIndicatorColor	#334155	#e0e0e0
syncIndicatorSpinnerColor	#007AFF	#0A84FF
syncIndicatorSpinnerTrack	rgba(148, 163, 184, 0.35)	rgba(160, 160, 160, 0.3)
syncIndicatorZIndex	10001	10001

Engine

Property	Light default	Dark default
backgroundColor	#ffffff	#1a1a1a

Line Endings

Property	Light default	Dark default
hoverBackgroundColor	#ebebeb	#3a3a3a
labelColor	#666666	#999999
optionBackground	#ffffff	#2a2a2a
selectedBackgroundColor	#ebebeb	#3a3a3a

Property	Light default	Dark default
buttonActiveBackground	#ebebeb	#444444
buttonBackground	#ffffff	#2a2a2a
buttonBorderColor	#e0e0e0	#4a4a4a
buttonHoverBackground	#f5f5f5	#3a3a3a
buttonHoverBorderColor	#cccccc	#5a5a5a
buttonTextColor	#333333	#e0e0e0
spinnerActiveColor	#333333	#ffffff
spinnerColor	#cccccc	#555555
subtitleColor	#666666	#999999

Master Detail

Property	Light default	Dark default
backButtonColor	#333333	#e0e0e0
backgroundColor	#ffffff	#2a2a2a
detailBackgroundColor	#ffffff	#2a2a2a
detailFocusOutline	2px solid #333333	2px solid #ffffff
menuBackgroundColor	#ffffff	#2a2a2a
menuBorderRight	1px solid #ebebeb	1px solid #3a3a3a
menuItemActiveBackgroundColor	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
menuItemBackgroundColor	transparent	transparent
menuItemChevronColor	#aaaaaa	#666666
menuItemColor	#333333	#e0e0e0
menuItemDisabledColor	#aaaaaa	#666666
menuItemFocusOutline	2px solid #333333	2px solid #ffffff
menuItemHoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
menuItemSelectedBackgroundColor	#007AFF	#0A84FF
menuItemSelectedColor	#ffffff	#ffffff
menuItemSelectedHoverBackgroundColor	#007AFF	#0A84FF

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
boxShadow	0 0 3px rgba(0, 0, 0, 0.08)	0 0 6px rgba(0, 0, 0, 0.3)
itemButtonHoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
itemChildOpenBackgroundColor	hsl(0, 0%, 0%, 3%)	hsl(0, 0%, 100%, 6%)
itemColor	#333333	#e0e0e0
itemEditingBackgroundColor	#f0f0f0	#3a3a3a
itemInputBorder	1px solid #333333	1px solid #ffffff
itemInputBorderColorOnSelected	#ffffff	#ffffff
itemInputCaretColor	#333333	#e0e0e0
itemInputCaretColorOnSelected	#ffffff	#ffffff
itemInputSelectionColor	#007aff	#b0b0b0
itemInputSelectionColorOnSelected	rgba(255, 255, 255, 0.55)	rgba(255, 255, 255, 0.35)
itemInputSelectionTextColor	#ffffff	#ffffff
itemInputSelectionTextColorOnSelected	#ffffff	#ffffff
itemOverlayBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
itemSelectedBackgroundColor	#007aff	#0A84FF
itemSelectedColor	#ffffff	#ffffff

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
borderRadius	12px	12px
boxShadow	0 0 3px rgba(0, 0, 0, 0.08)	0 0 6px rgba(0, 0, 0, 0.3)
buttonActiveBackgroundColor	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
buttonColor	#000000	#ffffff
buttonHoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
innerBorderRadius	12px	12px

Notification Card

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #e5e7eb	1px solid #3a3a3a
borderRadius	12px	12px
boxShadow	0 8px 20px rgba(15, 23, 42, 0.08)	0 8px 20px rgba(0, 0, 0, 0.35)
color	#111827	#e0e0e0
dismissButtonActiveBackgroundColor	#e5e7eb	hsl(0, 0%, 100%, 12%)
dismissButtonBackgroundColor	transparent	transparent
dismissButtonBorderRadius	6px	6px
dismissButtonColor	#4b5563	#c7c7c7
dismissButtonHoverBackgroundColor	#f3f4f6	hsl(0, 0%, 100%, 8%)
dismissButtonSize	24px	24px
errorPillBackgroundColor	#fef2f2	#4d1f24
errorPillColor	#b91c1c	#ff9aa2
headerGap	8px	8px
headerMarginBottom	8px	8px
headerRightGap	6px	6px
infoPillBackgroundColor	#eff6ff	#1f2f4a
infoPillColor	#1d4ed8	#8bb7ff
maxWidth	360px	360px
messageColor	inherit	inherit
messageFontSize	14px	14px
messageLineHeight	1.45	1.45
padding	12px 14px	12px 14px
pillBackgroundColor	#eff6ff	#1f2f4a
pillBorderRadius	999px	999px
pillColor	#1d4ed8	#8bb7ff
pillFontSize	12px	12px
pillFontWeight	600	600
pillHeight	22px	22px
pillPadding	0 8px	0 8px
timestampColor	#6b7280	#a0a0a0
timestampFontSize	12px	12px
warningPillBackgroundColor	#fff7ed	#4a341f
warningPillColor	#b45309	#ffd29a

Numeric Input

Property	Light default	Dark default
borderColor	#dbdbdb	#4a4a4a
borderRadius	6px	6px
focusBorderColor	#333333	#ffffff
hoverBorderColor	#cccccc	#5a5a5a
inputBackground	#ffffff	#1a1a1a
labelColor	#666666	#999999
selectionBackground	#007AFF	#0A84FF
selectionColor	#ffffff	#ffffff
spinnerActiveBackground	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
spinnerBackground	transparent	transparent
spinnerBorderRadius	5px	5px
spinnerColor	#333333	#e0e0e0
spinnerHoverBackground	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
textColor	#333333	#e0e0e0

Opacity Slider

Property	Light default	Dark default
activeColor	#007AFF	#0A84FF
thumbBorderColor	#007AFF	#0A84FF
thumbColor	#ffffff	#ffffff
trackColor	#e0e0e0	#4a4a4a

Pill Tabs

Property	Light default	Dark default
background	#f0f0f0	#3a3a3a
tabBackground	transparent	transparent
tabBackgroundHover	rgba(0, 0, 0, 0.05)	rgba(255, 255, 255, 0.08)
tabBackgroundSelected	#ffffff	#2a2a2a
tabLabelMaxWidth	10rem	10rem
tabShadowSelected	0 1px 3px rgba(0, 0, 0, 0.1)	0 1px 3px rgba(0, 0, 0, 0.3)
tabTextColor	#666666	#999999
tabTextColorSelected	#000000	#ffffff

Selection

Property	Light default	Dark default
borderColor	#007AFF	#0A84FF
boxBackgroundColor	rgba(0, 122, 255, 0.2)	rgba(10, 132, 255, 0.2)
boxBorderColor	rgba(0, 122, 255, 0.5)	rgba(10, 132, 255, 0.5)
handleColor	#ffffff	#1a1a1a
handleStrokeColor	#007AFF	#0A84FF

Settings

Property	Light default	Dark default
contentHeadingColor	#000000	#ffffff
contentTextColor	#333333	#e0e0e0
descriptionColor	#666666	#999999
labelColor	#333333	#e0e0e0
shortcutItemBg	#f8f8f8	#3a3a3a
shortcutKeyBg	#ffffff	#2a2a2a
shortcutKeyBorder	#e0e0e0	#4a4a4a
shortcutKeyColor	#555555	#e0e0e0

Shape Fill

Property	Light default	Dark default
hoverBackgroundColor	#ebebeb	#3a3a3a
optionBackground	#ffffff	#2a2a2a
selectedBackgroundColor	#ebebeb	#3a3a3a

Property	Light default	Dark default
borderColor	#e5e5e5	-
copyButtonBackground	#ffffff	#2a2a2a
copyButtonColor	#666666	#e0e0e0
copyButtonHoverBackground	#e8e8e8	#3a3a3a
copyButtonHoverColor	#333333	#ffffff
copySuccessBackground	#d4edda	#28a745
copySuccessColor	#28a745	#ffffff
descriptionColor	#666666	#e0e0e0
inputBackground	#f5f5f5	#1a1a1a
inputBorderColor	#e0e0e0	#4a4a4a
inputTextColor	#333333	#e0e0e0
labelColor	#333333	#e0e0e0
revokeButtonBorderColor	#dc3545	-
revokeButtonColor	#dc3545	-
revokeButtonHoverBackground	#dc3545	-
revokeButtonHoverColor	#ffffff	-
selectionColor	#cce5ff	#0A84FF

Slide Toggle

Property	Light default	Dark default
thumbColor	#fff	#ffffff
thumbSize	18px	-
trackCheckedColor	#007AFF	#0A84FF
trackColor	#ccc	#4a4a4a
transitionDuration	-	0.2s

Snap

Property	Light default	Dark default
indicatorFill	rgba(59, 130, 246, 0.3)	rgba(10, 132, 255, 0.35)
indicatorFillInactive	rgba(59, 130, 246, 0.18)	rgba(10, 132, 255, 0.2)
indicatorStroke	#007bff	#0A84FF
indicatorStrokeInactive	rgba(59, 130, 246, 0.5)	rgba(255, 255, 255, 0.45)
lineStroke	rgba(0, 0, 0, 0.2)	rgba(255, 255, 255, 0.35)

Split Button

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
boxShadow	0 0 3px rgba(0, 0, 0, 0.08)	0 0 6px rgba(0, 0, 0, 0.3)
color	#000000	#ffffff
dividerBackgroundColor	#ebebeb	#3a3a3a
hoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)

Stroke Size

Property	Light default	Dark default
hoverBackgroundColor	#ebebeb	#3a3a3a
selectedBackgroundColor	#ebebeb	#3a3a3a

Text Input

Property	Light default	Dark default
background	#ffffff	#1a1a1a
borderColor	#dbdbdb	#4a4a4a
borderRadius	6px	6px
focusBorderColor	#333333	#ffffff
hoverBorderColor	#cccccc	#5a5a5a
labelColor	#333333	#e0e0e0
placeholderColor	#999999	#777777
selectionBackground	#007AFF	#0A84FF
selectionColor	#ffffff	#ffffff
suffixBackground	#f5f5f5	#3a3a3a
suffixColor	#666666	#aaaaaa
textColor	#333333	#e0e0e0

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
boxShadow	0 0 3px rgba(0, 0, 0, 0.08)	0 0 6px rgba(0, 0, 0, 0.3)
controlActiveBackgroundColor	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
controlColor	#000000	#ffffff
controlHoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
controlSelectedBackgroundColor	#007AFF	#0A84FF
controlSelectedColor	#ffffff	#ffffff
separatorColor	#ebebeb	#3a3a3a

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
boxShadow	0 1px 6px rgba(0, 0, 0, 0.12)	0 1px 8px rgba(0, 0, 0, 0.4)
color	#000000	#ffffff

Utility Panel

Property	Light default	Dark default
backgroundColor	#e2e2e2	#3a3a3a
buttonColor	#333333	#e0e0e0
buttonHoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
separatorColor	hsl(0, 0%, 0%, 8%)	hsl(0, 0%, 100%, 12%)

Watermark

Property	Light default	Dark default
background	rgba(255, 255, 255, 0.6)	rgba(40, 40, 40, 0.6)
boxShadow	0 1px 2px rgba(0, 0, 0, 0.12)	0 1px 2px rgba(0, 0, 0, 0.35)
color	rgba(60, 60, 60, 0.75)	rgba(220, 220, 220, 0.8)

Zoom Panel

Property	Light default	Dark default
backgroundColor	#ffffff	#2a2a2a
border	1px solid #ebebeb	1px solid #3a3a3a
borderRadius	12px	12px
boxShadow	0 0 3px rgba(0, 0, 0, 0.08)	0 0 3px rgba(0, 0, 0, 0.4)
buttonActiveBackgroundColor	hsl(0, 0%, 0%, 8.6%)	hsl(0, 0%, 100%, 12%)
buttonBorderRadius	8px	8px
buttonHoverBackgroundColor	hsl(0, 0%, 0%, 4.3%)	hsl(0, 0%, 100%, 8%)
buttonSize	32px	32px
gap	4px	4px
iconColor	#000000	#e0e0e0
padding	4px	4px

Theming

Global

Back To Content

Checkerboard

Color Palette

Context Menu

Current User Dialog

Dialog

Editor

Engine

Font Size

Line Endings

Master Detail

Menu

More Menu

Notification Card

Numeric Input

Opacity Slider

Pill Tabs

Selection

Settings

Shape Fill

Slide Toggle

Snap

Split Button

Stroke Size

Text Input

Tooltip

Utility Panel

Watermark

Zoom Panel

Global​

Back To Content​

Checkerboard​

Color Palette​

Context Menu​

Current User Dialog​

Dialog​

Dropdown​

Editor​

Engine​

Font Size​

Line Endings​

Login Dialog​

Master Detail​

Menu​

More Menu​

Notification Card​

Numeric Input​

Opacity Slider​

Pill Tabs​

Selection​

Settings​

Shape Fill​

Share Dialog​

Slide Toggle​

Snap​

Split Button​

Stroke Size​

Text Input​

Toolbar​

Tooltip​

Utility Panel​

Watermark​

Zoom Panel​

Global

Back To Content

Checkerboard

Color Palette

Context Menu

Current User Dialog

Dialog

Dropdown

Editor

Engine

Font Size

Line Endings

Login Dialog

Master Detail

Menu

More Menu

Notification Card

Numeric Input

Opacity Slider

Pill Tabs

Selection

Settings

Shape Fill

Share Dialog

Slide Toggle

Snap

Split Button

Stroke Size

Text Input

Toolbar

Tooltip

Utility Panel

Watermark

Zoom Panel