Difficulty seeing text on the search bar in dark mode.

[harutiro]

problem

In my environment, when using dark mode, the text color becomes white and assimilates with the background color.
The demo site also confirmed that when searching in dark mode, the text turns white and is difficult to read.

countermeasure

As a countermeasure, it may be a good idea to add a class for dark mode to the input tag class in "layouts/partials/search.html".
In this case, I used 'dark:bg-slate-800' as it is used in the background color.

{{ if .Site.Params.enableSearch }}
<label class="mb-2 block px-2">
  <span></span>
  <input type="text" placeholder="Search articles" class="searchInput dark:bg-slate-800 bg-white rounded px-2 py-1 w-full border" />
</label>
<script>
  const searchElt = document.querySelector('.searchInput')
  if (searchElt) {
    searchElt.addEventListener('input', evt => {
      const value = evt.target.value || '';

      const articles = document.querySelectorAll('.article')
      if (!value) {
        articles.forEach(article => article.classList.remove('hidden'))
      } else {
        articles.forEach(article => article.classList.add('hidden'))
        Array.from(articles).filter(article => {
          const title = article.querySelector('h3')
          if (!title) return false;

          return title.textContent.toLowerCase().includes(value.toLowerCase())
        }).forEach(article => article.classList.remove('hidden'))
      }
    })
  }
</script>
{{ end }}