mykiwi/mykiwi.blog · 8775b9e

⑂ 8775b9e

Hold the theme switch at half light until it is pointed atUnverified

At full strength the icon sat level with the site's name across the row
and pulled the eye first, which is the wrong order for a control nobody
came for. Half-lit at rest and full on hover, the same treatment the
heading anchors already get, with focus-visible counted as pointing at
it so the keyboard is not left reading a dimmed control.

Touch screens keep it at full. There "at rest" is the only state there
is - nothing can hover - so a dimmed switch would simply stay dimmed,
and this is the one way to change the theme.

Worth recording rather than discovering later: at 0.5 the icon is about
2:1 against the paper in both themes, where WCAG 1.4.11 asks 3:1 of a
control that is not text. It clears that from roughly 0.75 upwards, and
reaches 4.9:1 at full. Hovered it is the accent colour and well past it
either way.

Romain Gautier committed 2026-09-21T01:35:49+02:00 Browse files

8775b9e parent: fb319ad

modified blog/assets/css/style.scss +17 -1 Viewed

@@ -421,9 +421,25 @@ body {
421	421	color: var(--ink-faint);
422	422	cursor: pointer;
423	423	-webkit-tap-highlight-color: transparent;
	424	+ // Half-lit at rest, the way the heading anchors are: there to be found,
	425	+ // quiet enough not to argue with the site's name across the row.
	426	+ opacity: 0.5;
	427	+ transition:
	428	+ color 0.15s ease,
	429	+ opacity 0.15s ease;
424	430
425		- &:hover {
	431	+ &:hover,
	432	+ &:focus-visible {
426	433	color: var(--accent);
	434	+ opacity: 1;
	435	+ }
	436	+
	437	+ // Nothing hovers on a touch screen, so "at rest" is the only state there
	438	+ // is and half-lit would just be permanently dim. This is the one way to
	439	+ // change the theme, so it comes up to full instead of waiting for a
	440	+ // pointer that is never coming.
	441	+ @media (hover: none) {
	442	+ opacity: 1;
427	443	}
428	444
429	445	&__icon {

    color: var(--ink-faint);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
++  // Half-lit at rest, the way the heading anchors are: there to be found,
++  // quiet enough not to argue with the site's name across the row.
++  opacity: 0.5;
++  transition:
++    color 0.15s ease,
++    opacity 0.15s ease;
--  &:hover {
++  &:hover,
++  &:focus-visible {
      color: var(--accent);
++    opacity: 1;
++  }
++
++  // Nothing hovers on a touch screen, so "at rest" is the only state there
++  // is and half-lit would just be permanently dim. This is the one way to
++  // change the theme, so it comes up to full instead of waiting for a
++  // pointer that is never coming.
++  @media (hover: none) {
++    opacity: 1;
    }
    &__icon {