@brendonovich/kobalte__solidbase/src/default-theme/components/ThemeSelector.module.css

Fully featured, fully customisable static site generation for SolidStart

.item {
	padding: .3rem .5rem;
	list-style-type: none;
	border-radius: var(--sb-border-radius);
	cursor: var(--sb-button-cursor);

	&:hover,
	&:focus {
		outline: none;
		background: color-mix(in hsl, var(--sb-text-color) 7.5%, transparent);
	}

	&[data-selected] {
		color: var(--sb-active-link-color);
	}

	& svg {
		margin-right: .15rem;
	}

	& div {
		display: inline-block;
		vertical-align: text-top;
	}
}

.trigger {
	appearance: none;
	padding: .5rem;
	background: transparent;
	border: none;
	outline: none;
	color: var(--sb-text-color);
	border-radius: var(--sb-border-radius);
	cursor: var(--sb-button-cursor);
	transition-property: background-color, opacity, color;
	transition-timing-function: var(--sb-transition-timing);
	transition-duration: .15s;

	&:hover,
	&:focus,
	&[data-expanded] {
		background: color-mix(in hsl, var(--sb-text-color) 7.5%, transparent);
	}

	& svg {
		aspect-ratio: 1;
		font-size: 1.1rem;
	}
}

.content {
	z-index: 51;
	color: var(--sb-text-color);
	background: color-mix(
		in hsl,
		var(--sb-background-color) 95%,
		var(--sb-tint-color-opposite)
	);
	border-radius: var(--sb-border-radius);
}

.list {
	padding: 0.25rem;
	display: flex;
	flex-direction: column;
}

.icon {
	display: inline-block;
	vertical-align: text-bottom;
}

.system-light,
.system-dark,
.force-light,
.force-dark {
	display: none;
	vertical-align: text-bottom;
}

html[data-theme="slight"] .system-light {
	display: block;
}

html[data-theme="sdark"] .system-dark {
	display: block;
}

html[data-theme="light"] .force-light {
	display: block;
}

html[data-theme="dark"] .force-dark {
	display: block;
}

/*@media (prefers-color-scheme: dark) {*/
/*	.system-light {*/
/*		display: none !important;*/
/*	}*/

/*	.system-dark {*/
/*		display: inline-block !important;*/

/*		.trigger & {*/
/*			display: block !important;*/
/*		}*/
/*	}*/
/*}*/