fix

Author: crowlKats

src/html/templates/pages/search.js

@@ -117,7 +117,7 @@ function renderResults(results) {
 
   for (const result of results) {
     const kind = result.kind.map((kind) => {
-      return `<div class="text-${kind.kind} bg-${kind.kind}/15 text-${kind.kind}Dark bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
+      return `<div class="text-${kind.kind} bg-${kind.kind}/15 dark:text-${kind.kind}Dark dark:bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
     }).join("");
 
     html += `<li class="block">

src/html/templates/styles.gen.css

@@ -45,6 +45,7 @@ export default {
   safelist: [
     {
       pattern: new RegExp(`^text-(${Object.keys(extraColors).join("|")})$`),
+      variants: ["dark"],
     },
     {
       pattern: new RegExp(
@@ -55,7 +56,7 @@ export default {
       pattern: new RegExp(
         `^bg-(${Object.keys(extraColors).join("|")})\/(?:5|15)$`,
       ),
-      variants: ["hover"],
+      variants: ["hover", "dark"],
     },
   ],
   theme: {

tailwind.config.ts

@@ -121,7 +121,7 @@ function renderResults(results) {
 
   for (const result of results) {
     const kind = result.kind.map((kind) => {
-      return `<div class="text-${kind.kind} bg-${kind.kind}/15 text-${kind.kind}Dark bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
+      return `<div class="text-${kind.kind} bg-${kind.kind}/15 dark:text-${kind.kind}Dark dark:bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
     }).join("");
 
     html += `<li class="block">

tests/snapshots/html_test__html_doc_dts-13.snap

@@ -121,7 +121,7 @@ function renderResults(results) {
 
   for (const result of results) {
     const kind = result.kind.map((kind) => {
-      return `<div class="text-${kind.kind} bg-${kind.kind}/15 text-${kind.kind}Dark bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
+      return `<div class="text-${kind.kind} bg-${kind.kind}/15 dark:text-${kind.kind}Dark dark:bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
     }).join("");
 
     html += `<li class="block">

tests/snapshots/html_test__html_doc_files_multiple-72.snap

@@ -121,7 +121,7 @@ function renderResults(results) {
 
   for (const result of results) {
     const kind = result.kind.map((kind) => {
-      return `<div class="text-${kind.kind} bg-${kind.kind}/15 text-${kind.kind}Dark bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
+      return `<div class="text-${kind.kind} bg-${kind.kind}/15 dark:text-${kind.kind}Dark dark:bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
     }).join("");
 
     html += `<li class="block">