fix: Implement custom transparent checkbox for dark mode visibility

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Feed.js

@@ -123,7 +123,7 @@ function Feed({ updateCache }) {
 
 			<div style={{marginBottom: '1rem'}}>
 				<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} />
-				<label htmlFor="filter-smallweb" style={{paddingLeft: '0.5rem'}}>Filter Smallweb</label>
+				<label htmlFor="filter-smallweb">Filter Smallweb</label>
 			</div>
 
 			{error &&

webclient/src/Style-dark.css

@@ -62,3 +62,7 @@
 .dark .comment.lined {
 	border-left: 1px solid #444444;
 }
+
+.dark .checkbox:checked + label::after {
+	border-color: #ddd;
+}

webclient/src/Style-light.css

@@ -312,5 +312,42 @@ button.comment {
 }
 
 .checkbox {
-	background: transparent;
+	-webkit-appearance: none;
+	appearance: none;
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+.checkbox + label {
+	position: relative;
+	cursor: pointer;
+	padding-left: 1.75rem;
+	user-select: none;
+}
+
+.checkbox + label::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0.1em;
+	width: 1rem;
+	height: 1rem;
+	border: 1px solid #828282;
+	background-color: transparent;
+	border-radius: 3px;
+}
+
+.checkbox:checked + label::after {
+	content: "";
+	position: absolute;
+	left: 0.35rem;
+	top: 0.2em;
+	width: 0.3rem;
+	height: 0.6rem;
+	border: solid #000;
+	border-width: 0 2px 2px 0;
+	transform: rotate(45deg);
 }