use dynamic colours

Author: Light2Dark

demo/index.ts

@@ -6,6 +6,7 @@ import { basicSetup, EditorView } from "codemirror";
 import {
   cteCompletionSource,
   DefaultSqlTooltipRenders,
+  defaultSqlHoverTheme,
   NodeSqlParser,
   sqlExtension,
 } from "../src/index.js";
@@ -231,6 +232,7 @@ function initializeEditor() {
           // Custom renderer for tables
           table: tableTooltipRenderer,
         },
+        theme: defaultSqlHoverTheme("light"),
       },
     }),
     dialect.language.data.of({

src/sql/hover.ts

@@ -553,8 +553,8 @@ export const defaultSqlHoverTheme = (theme: "light" | "dark" = "light"): Extensi
   return EditorView.theme({
     ".cm-sql-hover-tooltip": {
       padding: "8px 12px",
-      backgroundColor: "#ffffff",
-      border: "1px solid #e5e7eb",
+      backgroundColor: colors.tooltipBg,
+      border: `1px solid ${colors.tooltipBorder}`,
       borderRadius: "6px",
       boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
       fontSize: "13px",