Theme

Css variables set the theme. The names follow daisyUI with the prefix --twk-. Set them on the panel (.tweak-ui) or on an ancestor. The classes twk-dark and twk-light select the built-in dark and light themes.

Variable	Default	Use
--twk-color-base-100	#2a303c	buttons, controls on hover
--twk-color-base-200	#242933	panel background
--twk-color-base-300	#20252e	dark surfaces, e.g. the tab strip
--twk-color-base-content	#b2ccd6	text
--twk-color-neutral	#1c212b	group title background
--twk-color-neutral-content	#b2ccd6	group title text
--twk-color-accent	#f9aa33	focus, active states, highlights, accent buttons
--twk-color-accent-content	#1c212b	text on the accent color
--twk-color-info, -success, -warning, -error	#61afef, #98c379, #e5c07b, #e06c75	status colors of badges and alerts
--twk-color-info-content, -success-content, ...	#1c212b	text on the status colors
--twk-spacing-gap	0.125rem	gap between elements, e.g. rows and the children of containers
--twk-spacing	0.25rem	unit of the paddings in controls
--twk-spacing-field	1.375rem	height of a row, an input and a button
--twk-spacing-inset	0.125rem	padding of the panel
--twk-radius-field	0.25rem	corner radius of buttons, inputs and tabs
--twk-radius-box	0.25rem	corner radius of boxes, e.g. dialogs, popovers and dropdowns
--twk-radius-selector	0.25rem	corner radius of small controls, e.g. checkboxes
--twk-text-ui	12px	font size
--twk-font-ui	monospace	font
--twk-width	20rem	width of the panel

.tweak-ui {
  --twk-color-accent: #2196f3;
  --twk-spacing-field: 1.5rem;
}

Colors

The base colors are elevations. Each one has a single role:

Color	Role	Use
base-300	sunken	input fields, strips (toolbar, tab list), tracks, checkboxes
base-200	surface	the panel, dialogs, popovers, dropdowns, the active tab
base-100	raised	buttons, knobs, the hover and active state of rows and fields
neutral	band	title bars, e.g. of a group. Only text, icons and ghost buttons on it
accent	signal	focus, selection, checked state, the primary action. Never a surface

Rules, for components and for content in a panel:

1. A control is one step away from the surface it is on. On base-200, a button is base-100 and an input field is base-300. On a base-300 strip, buttons are ghost buttons with a base-100 hover.
2. Never put a color on the same color, e.g. a base-100 button on a base-100 box.
3. Every surface is base-200. A floating surface (dialog, popover) is set apart by a shadow or a backdrop.
4. States add no shades: hover goes one step toward base-100. Active, selected and focus use accent. Disabled uses opacity.

In a theme, neighbouring base colors should differ by about 3% in lightness (OKLCH), otherwise buttons are hard to tell apart from the surface.

Theme editor

Change the variables of this panel. Copy the css from the bottom of the panel.