feat: enable dark mode on-demand instead of body only (#44)

placekit · Dec 9, 2023 · 5dd5ffc · 5dd5ffc
1 parent 171e817
commit 5dd5ffc
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ After importing the library, `placekitAutocomplete` becomes available as a globa
 ```html
 <input type="search" placeholder="Search place..." class="pka-input" id="placekit" />
 <script>
-  const pka = placekitAutocomplete('<your-api-key>', {
+  const pka = placekitAutocomplete('<your-public-api-key>', {
     target: '#placekit',
     // other options...
   });
@@ -91,7 +91,7 @@ const placekitAutocomplete = require('@placekit/autocomplete-js');
 // ES6 Modules syntax:
 import placekit from '@placekit/autocomplete-js';
 
-const pka = placekitAutocomplete('<your-api-key>', {
+const pka = placekitAutocomplete('<your-public-api-key>', {
   target: '#placekit',
   // other options...
 });
@@ -124,7 +124,7 @@ If you have trouble importing CSS from `node_modules`, copy/paste [its content](
 PlaceKit Autocomplete initialization function returns a PlaceKit Autocomplete client, named `pka` in all examples.
 
 ```js
-const pka = placekitAutocomplete('<your-api-key>', {
+const pka = placekitAutocomplete('<your-public-api-key>', {
   target: '#placekit',
   countries: ['fr'],
   maxResults: 10,
@@ -453,6 +453,23 @@ pka.destroy();
 You have full control over the input element as PlaceKit Autocomplete doesn't style nor alter it by default.
 We still provide a style that you can apply by adding the `.pka-input` class to your input element.
 
+### Dark mode
+
+THe whole autocomplete automatically switches to dark mode if `<body>` has a `.dark` class or a `data-theme="dark"` attribute. 
+
+You can also activate the dark mode on-demand by wrapping the input with a `.dark` class or a `data-theme="dark"` attribute, like `<div class="pka-input dark">...</div>`. The suggestions panel is appended to the body directly and doesn't share any ancestor with the input field other than `<body>`, so to activate the dark mode on-demand, pass the `.dark` class to the panel options: 
+
+```js
+const pka = placekitAutocomplete('<your-public-api-key>', {
+  target: '#placekit',
+  panel: {
+    className: 'dark',
+  },
+});
+```
+
+### CSS Variables
+
 Colors, border-radius, font and overall scale (in `rem`) and even icons are accessible over variables:
 
 ```css
@@ -489,8 +506,8 @@ Colors, border-radius, font and overall scale (in `rem`) and even icons are acce
 }
 
 /* dark mode overrides */
-body.dark,
-body[data-theme="dark"] {
+.dark,
+[data-theme="dark"] {
   --pka-color-accent: 55, 131, 249;
 }
 ```
@@ -499,13 +516,11 @@ You also have full control over flags and icons DOM with `format.flag` and `form
 
 For advanced customization, refer to our [stylesheet](./src/placekit.css) to learn about the available classes if you need to either override some or start a theme from scratch.
 
-A dark mode is available whenever you add `.dark` class or `data-theme="dark"` attribute to the `<body>` element.
-
-⚠️ **NOTE:** you are **not** allowed to hide the PlaceKit logo unless we've delivered a special authorization. To request one, please contact us using [our contact form](https://placekit.io/about#contact).
-
 ## ⚠️ Additional notes
 - Setting a non-empty `value` attribute on the `<input>` will automatically trigger a first search request when the user focuses the input.
 
 ## ⚖️ License
 
 PlaceKit Autocomplete JS Library is an open-sourced software licensed under the [MIT license](./LICENSE).
+
+⚠️ **NOTE:** you are **not** allowed to hide the PlaceKit logo unless we've delivered a special authorization. To request one, please contact us using [our contact form](https://placekit.io/about#contact).
diff --git a/src/placekit-autocomplete.css b/src/placekit-autocomplete.css
@@ -45,8 +45,8 @@
 }
 
 /* dark mode overrides */
-body.dark,
-body[data-theme="dark"] {
+.dark,
+[data-theme="dark"] {
   --pka-color-accent: 55, 131, 249;
 }
 
@@ -141,8 +141,9 @@ body[data-theme="dark"] {
   color: rgb(var(--pka-color-black));
 }
 
-body.dark .pka-input,
-body[data-theme="dark"] .pka-input {
+.dark .pka-input,
+[data-theme="dark"] .pka-input,
+.pka-input.dark {
   border-color: rgb(var(--pka-color-darker));
   background-color: rgb(var(--pka-color-black));
   color: rgb(var(--pka-color-lighter));
@@ -223,10 +224,10 @@ button.pka-input-clear {
     background-color: rgb(var(--pka-color-black));
   }
 
-  body.dark button.pka-input-geolocation:hover,
-  body.dark button.pka-input-clear:hover,
-  body[data-theme="dark"] button.pka-input-geolocation:hover,
-  body[data-theme="dark"] button.pka-input-clear:hover {
+  .dark button.pka-input-geolocation:hover,
+  .dark button.pka-input-clear:hover,
+  [data-theme="dark"] button.pka-input-geolocation:hover,
+  [data-theme="dark"] button.pka-input-clear:hover {
     background-color: rgb(var(--pka-color-white));
   }
 
@@ -291,8 +292,9 @@ button.pka-input-clear[aria-hidden="true"] {
   pointer-events: auto;
 }
 
-body.dark .pka-panel,
-body[data-theme="dark"] .pka-panel {
+.dark .pka-panel,
+[data-theme="dark"] .pka-panel,
+.pka-panel.dark {
   border-color: rgb(var(--pka-color-black));
   background-color: rgb(var(--pka-color-darker));
 }
@@ -375,12 +377,12 @@ body[data-theme="dark"] .pka-panel {
   color: rgb(var(--pka-color-darker));
 }
 
-body.dark .pka-panel-suggestion-label-name,
-body[data-theme="dark"] .pka-panel-suggestion-label-name {
+.dark .pka-panel-suggestion-label-name,
+[data-theme="dark"] .pka-panel-suggestion-label-name {
   color: rgb(var(--pka-color-white));
 }
-body.dark .pka-panel-suggestion[aria-disabled="true"] .pka-panel-suggestion-label-name,
-body[data-theme="dark"] .pka-panel-suggestion[aria-disabled="true"] .pka-panel-suggestion-label-name {
+.dark .pka-panel-suggestion[aria-disabled="true"] .pka-panel-suggestion-label-name,
+[data-theme="dark"] .pka-panel-suggestion[aria-disabled="true"] .pka-panel-suggestion-label-name {
   color: rgb(var(--pka-color-light));
 }
 
@@ -484,8 +486,8 @@ button.pka-panel-suggestion-action {
   line-height: 1em;
 }
 
-body.dark .pka-panel-footer,
-body[data-theme="dark"] .pka-panel-footer {
+.dark .pka-panel-footer,
+[data-theme="dark"] .pka-panel-footer {
   border-top-color: rgb(var(--pka-color-black));
 }
 
@@ -551,7 +553,7 @@ body[data-theme="dark"] .pka-panel-footer {
   color: rgb(var(--pka-color-accent));
 }
 
-body.dark .pka-panel-credits-link,
-body[data-theme="dark"] .pka-panel-credits-link {
+.dark .pka-panel-credits-link,
+[data-theme="dark"] .pka-panel-credits-link {
   color: rgb(var(--pka-color-white));
 }