Tint elements using accent-color and other CSS rules

WordPress · Oct 18, 2021 · 7caf36c · 7caf36c
1 parent 1e0a948
commit 7caf36c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -146,6 +146,7 @@ export default {
     '~/assets/fonts.css',
     '~/styles/vocabulary.scss',
     '~/styles/global.scss',
+    '~/styles/accent.scss',
   ],
   head,
   env,

diff --git a/src/styles/accent.scss b/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;
+}