UI Customization

You can customize the UI and create your own theme by editing the css file web/theme.css

UI colors can be easily customized changing CSS variables:

:root {
	--background: #252a34;
	--foreground: #eaeaea;

	--title-drop-shadow: drop-shadow(0 0.15rem 0.2rem #08d9d617);

	--card: #2e333f;
	--card-foreground: #eaeaea;
	--card-border: 0.5px solid rgba(100, 116, 139, 0.35);

	--popover: #1e212956;
	--popover-foreground: #eaeaea;

	--primary: #08d9d6;
	--primary-foreground: #252a34;

	--secondary: #3a86ff;

	--secondary-muted: #3a85ffc2;

	--secondary-foreground: #eaeaea;

	--muted: #3a3f4a;
	--muted-foreground: #b8bdc7;

	--accent: #08d9d6;
	--accent-foreground: #252a34;

	--destructive: #ff2e63;
	--destructive-foreground: #eaeaea;

	--border: #323846;
	--input: #393d47;
	--input-border: #3a85ff33;
	--ring: #08d9d6;

	--radius: 0.75rem;

	--border-color-hover: #08d9d646;
	--success: #35ff68;
	--warning: #f4d45e;
	--gray: #e0d3de;
	/* --success: #08d9d6;
	--warning: #3a86ff; */
	--info: #3a86ff;

	--gradient-primary: linear-gradient(135deg, #08d9d6 0%, #3a86ff 100%);
	--gradient-card: linear-gradient(145deg, #2e333f 0%, #252a34 100%);
	--shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
	--shadow-hover: 0 5px 15px -4px #08d9d646;

	--tab-selected-gradient: linear-gradient(
		0deg,
		#08d9d6bb -120%,
		transparent 100%
	);

	--sb-track-color: #08d9d607;
	--sb-thumb-color: #08d9d646;
	--sb-thumb-hover: var(--accent);
	--sb-size: 10px;

	--modal-bg: #252a34de;

	--item-ready: linear-gradient(135deg, #2e333f 0%, #35ff685b 150%);
	--item-ready-shadow: inset 0 0 10px #35ff68;

	--item-processing: linear-gradient(135deg, #2e333f 0%, #f4d45e5b 150%);
	--item-processing-shadow: inset 0 0 10px #f4d45e;

	--item-waiting: linear-gradient(135deg, #2e333f 0%, #e0d3de5b 150%);
	--item-waiting-shadow: inset 0 0 10px #e0d3de;
}