feat: support reset background color to default

src/view/form/ColorPicker.tsx

@@ -13,7 +13,9 @@ import { useState } from "react";
 
 export function ColorPicker(props: {
 	color?: string;
-	onChange: (color: string) => void;
+	defaultColor?: string;
+	onChange: (color?: string) => void;
+	onReset?: (color?: string) => void;
 }): JSX.Element {
 	const [showColorPicker, setShowColorPicker] = useState(false);
 	const { refs, floatingStyles, context } = useFloating({
@@ -35,6 +37,20 @@ export function ColorPicker(props: {
 				}}
 				onClick={() => setShowColorPicker(!showColorPicker)}
 			></span>
+			{props.color && (
+				<div className="color-label">
+					<span>{props.color ?? ""}</span>
+					<span className="color-reset-button" onClick={() => {
+						if (props.onReset) {
+							props.onReset(props.defaultColor);
+						} else {
+							props.onChange(props.defaultColor);
+						}
+					}}>
+						x
+					</span>
+				</div>
+			)}
 			{showColorPicker ? (
 				<div
 					ref={refs.setFloating}

src/view/form/GraphForm.tsx

@@ -440,6 +440,16 @@ export function GraphForm(props: {
 														}
 													);
 												}}
+												onReset={(color) => {
+													changeFormData(
+														"mainContainerStyle",
+														{
+															...formData.mainContainerStyle,
+															backgroundColor:
+																color,
+														}
+													);
+												}}
 											/>
 										</div>
 									</div>

styles.css

@@ -288,6 +288,25 @@
 	opacity: 0.6;
 }
 
+.color-label {
+	display: flex;
+	gap: 6px;
+	background-color: hsl(var(--interactive-accent-hsl), 0.2);
+	color: hsl(var(--interactive-accent-hsl), 0.8);
+	align-items: center;
+	border-radius: 6px;
+	padding: 4px 8px;
+}
+
+.color-label:hover {
+	background-color: hsl(var(--interactive-accent-hsl), 0.8);
+	color: var(--text-on-accent);
+}
+
+.color-reset-button:hover {
+	color: var(--text-normal);
+}
+
 /* default cell rule indicator */
 .contribution-graph .cell-rule-indicator-container {
 	position: relative;