Use CSS property accent-color to tint form controls

nuxt.config.js

@@ -146,6 +146,7 @@ export default {
     '~/assets/fonts.css',
     '~/styles/vocabulary.scss',
     '~/styles/global.scss',
+    '~/styles/accent.scss',
   ],
   head,
   env,

src/styles/accent.scss

@@ -0,0 +1,22 @@
+:root {
+  /* Accent color tints checkbox, radio, range and progress. */
+  accent-color: theme('colors.trans-blue');
+}
+
+:focus-visible {
+  outline-color: theme('colors.trans-blue');
+}
+
+::selection {
+  /* Using white text because selection background is dark. */
+  @apply bg-trans-blue text-white;
+}
+
+::-webkit-calendar-picker-indicator,
+::-webkit-clear-button,
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button,
+::marker {
+  /* List markers can be tinted as text. */
+  @apply text-trans-blue;
+}