Add dark mode #164

mdubus · 2021-06-21T08:06:22Z

Closes #127

What's inside this PR ?

Dark mode support as requested in #127.

3 more changes were made :

Upgrade of docs-searchbar version inside thepackage.json (v1.3.0)
Removal of the surrounding .search-box div according to this PR
Exposure of the debug option which was available in docs-searchbar but not in this plugin

How to test ?

Run the playground

You can run the playground with yarn serve

Change the color palette

If you want to change the color palette, you can do so by changing the colors inside the playground/.vuepress/styles/palette.styl file

Enable / disable dark mode

You can also enable/disable the dark mode (disabled by default) by adding/removing the enableDarkMode option in the playground/.vuepress/config.js file (don't forget to restart the server !):

Screenshots

Column layout (default)

Simple layout

Change $accentDarkColor to #a29bfe (full change of the dark theme, cohabitation with the vuepress-theme-default-prefers-color-scheme plugin)

curquiza

Awesome!

How is it going to be for VuePress website that does not the dark mode allowed, for example our docs?
Does it work with https://github.com/tolking/vuepress-theme-default-prefers-color-scheme as the issue Ask for dark mode #127 mentions it?

bidoubiwa · 2021-06-22T15:35:13Z

# At the root of the plugin (vuepress-plugin-meilisearch for me):

`yarn link`

#Inside the playground folder:

rm -rf node_modules
# Remove the vuepress-plugin-meilisearch from the playground/package.json
yarn link "vuepress-plugin-meilisearch"
yarn

This shouln't be necessary as the playground is already connected to its root folder that contains the plugin.

Remove the vuepress-plugin-meilisearch from the playground/package.json

There is no vuepress-plugin-meilisearch in the package.json in the playground

curquiza · 2021-06-22T15:45:47Z

There is no vuepress-plugin-meilisearch in the package.json in the playground

vuepress-plugin-meilisearch/playground/package.json

Line 12 in 5536a36

"vuepress-plugin-meilisearch": "^0.0.6"

bidoubiwa · 2021-06-22T16:19:17Z

In the config.js from the playground: the plugin takes its root from the parent directory

module.exports = {
  title: 'Welcome to the Playground!',
  plugins: [
    [
      require('../../index.js'),
      {
        // Testing with MeiliSearch documentation content (https://docs.meilisearch.com/)
        hostUrl: 'https://docs-search-bar.meilisearch.com',
        apiKey:
          'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
        indexUid: 'docs'
        // "maxSuggestions": 10,
        // "placeholder": "Search as you type..."
      }
    ]
  ]
}

not the plugin that is in the package.json. The plugin in the package.json should not have any impact in the playground since it is not used in the config file

mdubus · 2021-06-23T06:44:57Z

Awesome!

How is it going to be for VuePress website that does not the dark mode allowed, for example our docs?

Does it work with https://github.com/tolking/vuepress-theme-default-prefers-color-scheme as the issue Ask for dark mode #127 mentions it?

It provides the same option as in docs-searchbar enableDarkMode, I'm going to add this to the body of the PR :)
Yes it does ! I provided examples in the screenshots section (the screenshots in purple are the one you are looking for)

mdubus · 2021-06-23T07:21:00Z

In the config.js from the playground: the plugin takes its root from the parent directory

module.exports = {
  title: 'Welcome to the Playground!',
  plugins: [
    [
      require('../../index.js'),
      {
        // Testing with MeiliSearch documentation content (https://docs.meilisearch.com/)
        hostUrl: 'https://docs-search-bar.meilisearch.com',
        apiKey:
          'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
        indexUid: 'docs'
        // "maxSuggestions": 10,
        // "placeholder": "Search as you type..."
      }
    ]
  ]
}

not the plugin that is in the package.json. The plugin in the package.json should not have any impact in the playground since it is not used in the config file

Ok I got it.
I didn't managed to make it work this way, so I thought they weren't linked together. The method described in the body of the PR was the only way to make it work.
I took a look at it, and the docs-searchbar used in the playground was the old one (without the enableDarkMode option), so it obviously couldn't work 😀
The problem was the vuepress-plugin-meilisearch in the playground/package.json. As it was in v0.0.6, it also used the wrong version of docs-searchbar. After removing this useless dependency, there is not problem anymore 🎉

I'm updating the body of the PR according to this.
Thanks for pointing out this problem ! ❤️

curquiza

Can you update the README according to your new feature? 🙂

playground/.vuepress/styles/palette.styl

mdubus · 2021-06-23T07:55:25Z

Can you update the README according to your new feature? 🙂

It's already done 🤩
I added a Dark mode section inside the Customization one

curquiza · 2021-06-23T08:07:07Z

My bad! I completely missed it in the middle of the files 😅

README.md

curquiza

I approve because I don't want to block the PR, but of course we need to wait for @bidoubiwa approval 🙂

@mdubus, you have write access to this repo, you don't need to work on your fork anymore 🙂

Thanks a lot!!!

bidoubiwa

Everything looks super fine except for one thing. When you remove the following line from playground/.vuepress/config.jsthe app throws an error.

  theme: 'default-prefers-color-scheme',

The following error is thrown:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function Layout() {
    return Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(1)]).then(__webpack_require__.bind(null, /*! ./node_modules/@vuepress/theme-default/layouts/Layout.vue */ "./node_modules/@vuepress/theme-default/layouts/Layout.vue"));
  }
Reason: Error: Module build failed (from ./node_modules/stylus-loader/index.js):
Error: vuepress-plugin-meilisearch/playground/node_modules/stylus/lib/functions/index.styl:133:3
   129| 
   130| // lighten by the given amount
   131| 
   132| lighten(color, amount)
   133|   adjust(color, 'lightness', amount)
----------^
   134| 
   135| // decrease opacity by amount
   136|

Thanks for pointing this error ! I added a new variable $msDropdownBgDarkColor to resolve this problem ❤️

Co-authored-by: Clémentine Urquizar <[email protected]>

bidoubiwa · 2021-06-25T13:47:04Z

I looked at the default palette of vuepress and it seems it is using the variable used by default-prefers-color-scheme.

See Styling in VuePress.

Furthermore there is a default palette provided by vuepress. I think it is possible to rely on these values to have default values.

As an example, if we look at the default search bar component that is provided by vuepress it lets us tweak with the following variable.

$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc

Because of that, I think we should be consistent with these variable naming and our variables by just adding dark and not use ms.
It seems that we can use vuepress default theme to avoid the previous error.

bidoubiwa · 2021-06-25T14:39:44Z

So I tried with and without the dark theme and it worked, I'm not sure what provoked the bug the first time around:

Update styles/palette.style to comply to naming convention (see previous comment)

$accentDarkColor ?= $accentColor

$inputDarkBgColor ?= #444d52

$textDarkColor ?= #eaeaea

$borderDarkColor ?= lighten($inputDarkBgColor, 10%)

$dropdownBgDarkColor ?= darken($inputDarkBgColor, 25%)

Play with ./vuepress/styles/palette.style

// No need to define accentColor, works in both cases
$accentDarkColor = $accentColor // $accentColor comes from default vuepress theme see link below

$inputDarkBgColor = #444d52
$textDarkColor = #eaeaea
// $borderDarkColor needs to have inputDarkBgColor defined as information goes down to the plugin palette, so it is not aware that this variable exists since it does not exists in both the default palette and the palette from the dark-theme
$borderDarkColor = lighten($inputDarkBgColor, 10%)

default vuepress palette

Other changes this emply:

changing the names in MeiliSearchVueBox
changing the names in README

Unless there is another reason not to go with these variable names?

mdubus · 2021-06-28T14:13:15Z

We agreed with @bidoubiwa to rename the style variables by removing the ms prefix.
It's now done 🚀

bidoubiwa

LGTM 🔥🔥🔥

mdubus · 2021-06-29T08:35:55Z

bors merge

bors · 2021-06-29T08:35:57Z

🔒 Permission denied

Existing reviewers: click here to make mdubus a reviewer

bidoubiwa · 2021-06-29T10:00:05Z

bors merge

bors · 2021-06-29T10:01:14Z

Build succeeded:

mdubus added 6 commits June 21, 2021 09:45

Add dark mode

82b06d3

Fix color & dependency inside playground package.json

f800ec3

Fix yarn.lock inside playground

1eb4a5c

Fix crash if palette.styl doesnt exist

133b89f

Add dark mode to playground & rename variables to prevent conflicts

c151579

Add dark mode section inside the readme

145df84

mdubus marked this pull request as ready for review June 22, 2021 13:03

mdubus added the enhancement New feature or request label Jun 22, 2021

mdubus requested review from curquiza and bidoubiwa June 22, 2021 13:03

curquiza reviewed Jun 22, 2021

View reviewed changes

Fix playground dependencies

deb1997

curquiza requested changes Jun 23, 2021

View reviewed changes

playground/.vuepress/styles/palette.styl Outdated Show resolved Hide resolved

Add new line thanks to editorconfig

2abddb1

curquiza reviewed Jun 23, 2021

View reviewed changes

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

curquiza previously approved these changes Jun 23, 2021

View reviewed changes

bidoubiwa suggested changes Jun 23, 2021

View reviewed changes

mdubus and others added 4 commits June 24, 2021 10:06

Add variable to customize the background color of the dropdown

cfedfd0

Expose debug option

1bfe07a

Update README.md

faa2dde

Co-authored-by: Clémentine Urquizar <[email protected]>

Update README.md

d0545b4

Co-authored-by: Clémentine Urquizar <[email protected]>

mdubus dismissed curquiza’s stale review via d0545b4 June 24, 2021 08:12

mdubus force-pushed the add_dark_mode branch from 2f9b299 to d0545b4 Compare June 24, 2021 08:12

mdubus requested a review from bidoubiwa June 24, 2021 12:04

Remove 'ms' prefixing of palette variables

6827758

bidoubiwa approved these changes Jun 28, 2021

View reviewed changes

bors bot merged commit 430a1b8 into meilisearch:main Jun 29, 2021

mdubus deleted the add_dark_mode branch June 29, 2021 11:21

Add dark mode #164

Add dark mode #164

Uh oh!

Conversation

mdubus commented Jun 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's inside this PR ?

How to test ?

Run the playground

Change the color palette

Enable / disable dark mode

Screenshots

Uh oh!

curquiza left a comment

Choose a reason for hiding this comment

Uh oh!

bidoubiwa commented Jun 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

curquiza commented Jun 22, 2021

Uh oh!

bidoubiwa commented Jun 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mdubus commented Jun 23, 2021

Uh oh!

mdubus commented Jun 23, 2021

Uh oh!

curquiza left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mdubus commented Jun 23, 2021

Uh oh!

curquiza commented Jun 23, 2021

Uh oh!

Uh oh!

Uh oh!

curquiza left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bidoubiwa left a comment • edited by mdubus Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bidoubiwa commented Jun 25, 2021

Uh oh!

bidoubiwa commented Jun 25, 2021 • edited by mdubus Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mdubus commented Jun 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bidoubiwa left a comment

Choose a reason for hiding this comment

Uh oh!

mdubus commented Jun 29, 2021

Uh oh!

bors bot commented Jun 29, 2021

Uh oh!

bidoubiwa commented Jun 29, 2021

Uh oh!

bors bot commented Jun 29, 2021

Uh oh!

Uh oh!

mdubus commented Jun 21, 2021 •

edited

Loading

bidoubiwa commented Jun 22, 2021 •

edited

Loading

bidoubiwa commented Jun 22, 2021 •

edited

Loading

curquiza left a comment •

edited

Loading

bidoubiwa left a comment •

edited by mdubus

Loading

bidoubiwa commented Jun 25, 2021 •

edited by mdubus

Loading

mdubus commented Jun 28, 2021 •

edited

Loading