fix: move darkmode to css variables

README.md

@@ -55,7 +55,6 @@ document.body.appendChild(picker);
 | `locale` | String | `"en"` | Locale, should map to the locales supported by `emojibase-data` |
 | `i18n` | Object | See below | Strings to use for internationalization of the Picker itself, i.e. the text and `aria-label`s. Note that `lite-emoji-picker` only ships with English by default. |
 | `numColumns` | number | `8` | Number of emoji to show per row. |
-| `darkMode` | boolean/String | `"auto"` | Dark mode. Either `false`, `true`, or `"auto"`. The `"auto"` option chooses based on [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
 
 These values can also be set at runtime, e.g.:
 
@@ -88,6 +87,23 @@ Note that some of these values are only visible to users of screen readers (but
 }
 ```
 
+#### Styling
+
+##### Dark mode
+
+By default, `lite-emoji-picker` will automatically switch to dark mode based on [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). For more fine-grained, control, add the class `dark` or `light` to force dark/light mode:
+
+```html
+<lite-emoji-picker class="dark"></lite-emoji-picker>
+<lite-emoji-picker class="light"></lite-emoji-picker>
+```
+
+###### CSS variables
+
+Many attributes such as colors and sizes can be styled with CSS variables. Here is a list:
+
+<!-- TODO: list of CSS variables -->
+
 ### Database
 
 You can work with the database API separately:

src/svelte/components/Picker/Picker.html

@@ -1,9 +1,9 @@
 <svelte:options tag="lite-emoji-picker" />
 <section
-  class="lep-picker {resolvedDarkMode ? 'lep-dark' : 'lep-light'}"
+  class="lep-picker"
   aria-label={i18n.regionLabel}
   bind:this={rootElement}
-  style="--lep-num-columns: {numColumns};"
+  style="--lep-num-columns: {numColumns};"  
 >
   <div class="lep-search-row">
     <div class="lep-search-wrapper"

src/svelte/components/Picker/Picker.js

@@ -21,8 +21,6 @@ let rawSearchText = ''
 let searchText = ''
 let rootElement
 let baselineEmoji
-let darkMode = 'auto'
-let resolvedDarkMode // eslint-disable-line no-unused-vars
 let placeholders = [] // eslint-disable-line no-unused-vars
 let searchMode = false // eslint-disable-line no-unused-vars
 let activeSearchItem = -1
@@ -30,7 +28,6 @@ let activeSearchItem = -1
 const getBaselineEmojiWidth = thunk(() => calculateTextWidth(baselineEmoji))
 $: database = new Database({ dataSource, locale })
 $: placeholders = new Array(numColumns - (currentEmojis.length % numColumns)).fill()
-$: resolvedDarkMode = darkMode === 'auto' ? matchMedia('(prefers-color-scheme: dark)').matches : !!darkMode
 $: {
   // eslint-disable-next-line no-inner-declarations
   async function updateEmojis () {
@@ -139,6 +136,5 @@ export {
   locale,
   dataSource,
   i18n,
-  numColumns,
-  darkMode
+  numColumns
 }

src/svelte/styles/global.scss

@@ -1,16 +1,16 @@
 @import './variables.scss';
 @import './resets.scss';
 
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:focus {
+  outline: var(--lep-outline-color) solid var(--lep-outline-size);
+  outline-offset: calc(-1 * var(--lep-outline-size)); // fix focus ring getting cropped
+}
+
 .lep-picker {
-  &, &::before, &::after, & *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  &:focus, & *:focus {
-    outline: var(--lep-outline-color) solid var(--lep-outline-size);
-    outline-offset: calc(-1 * var(--lep-outline-size)); // fix focus ring getting cropped
-  }
-
   contain: content;
   display: flex;
   flex-direction: column;

src/svelte/styles/variables.scss

@@ -1,4 +1,9 @@
-@mixin vars($dark) {
+@mixin sizes() {
+  --lep-indicator-height: 3px;
+  --lep-outline-size: 2px;
+}
+
+@mixin colors($dark) {
   $border: #e0e0e0;
   $bg: #fff;
   $placeholder: #999;
@@ -23,8 +28,6 @@
   --lep-placeholder-color: #{$placeholder};
   --lep-outline-color: #{$outline};
   --lep-indicator-color: #{$indicator};
-  --lep-indicator-height: 3px;
-  --lep-outline-size: 2px;
   --lep-input-font-color: #{$input-color};
 
   @if $dark {
@@ -36,12 +39,21 @@
   }
 }
 
-.lep-picker {
-  &.lep-light {
-    @include vars(false);
+:host, :host-context(lite-emoji-picker.light) {
+  @include colors(false);
+}
+:host-context(lite-emoji-picker.dark) {
+  @include colors(true);
+}
+
+:host {
+  @include sizes();
+
+  @media (prefers-color-scheme: light) {
+    @include colors(false);
   }
 
-  &.lep-dark {
-    @include vars(true);
+  @media (prefers-color-scheme: dark) {
+    @include colors(true);
   }
 }