HyperLEDA · Kraysent · May 24, 2026 · May 24, 2026 · May 24, 2026 · May 24, 2026
diff --git a/index.html b/index.html
@@ -7,6 +7,15 @@
     <script src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js"></script>
     <script src="/configs/config.js"></script>
     <title>HyperLEDA</title>
+    <script>
+      (function () {
+        var t = localStorage.getItem("theme");
+        var dark =
+          t === "dark" ||
+          (!t && matchMedia("(prefers-color-scheme: dark)").matches);
+        if (dark) document.documentElement.classList.add("dark");
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/core/Accordion.tsx b/src/components/core/Accordion.tsx
@@ -17,11 +17,11 @@ export function Accordion({
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   return (
-    <div className="border border-gray-600 rounded-lg bg-neutral-900/40">
+    <div className="border border-border rounded-lg bg-surface">
       <button
         type="button"
         onClick={() => setIsOpen((prev) => !prev)}
-        className="w-full flex items-center justify-between px-4 py-3 text-left cursor-pointer hover:bg-gray-800 rounded-lg transition-colors duration-200 gap-2"
+        className="w-full flex items-center justify-between px-4 py-3 text-left cursor-pointer hover:bg-surface-2 rounded-lg transition-colors duration-200 gap-2"
       >
         <span className="flex flex-col items-start gap-0.5 text-left w-full min-w-0">
           <Text style="header" size="small" as="span">

diff --git a/src/components/core/Button.tsx b/src/components/core/Button.tsx
@@ -16,9 +16,9 @@ export function Button(props: ButtonProps): ReactElement {
       onClick={(event) => props.onClick?.(event)}
       disabled={props.disabled}
       className={classNames(
-        "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white cursor-pointer",
+        "px-2 py-2 box-border flex items-center font-semibold border-1 border-surface-2 rounded-lg bg-surface-2 hover:border-accent transition-colors duration-300 active:border-primary cursor-pointer",
         {
-          "opacity-50 cursor-not-allowed hover:border-[#1a1a1a] active:border-[#1a1a1a]":
+          "opacity-50 cursor-not-allowed hover:border-surface-2 active:border-surface-2":
             props.disabled,
         },
         props.className,

diff --git a/src/components/core/DropdownFilter.tsx b/src/components/core/DropdownFilter.tsx
@@ -20,13 +20,13 @@ export function DropdownFilter({
 }: DropdownFilterProps): ReactElement {
   return (
     <div>
-      <label className="block text-sm font-medium text-gray-300 mb-1">
+      <label className="block text-sm font-medium text-subtle mb-1">
         {title}
       </label>
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white h-10 w-full"
+        className="bg-surface-2 border border-border rounded px-3 py-2 text-primary h-10 w-full"
       >
         {options.map((option) => (
           <option key={option.value} value={option.value}>

diff --git a/src/components/core/Link.tsx b/src/components/core/Link.tsx
@@ -11,7 +11,7 @@ interface LinkProps {
 
 export function Link(props: LinkProps): ReactElement {
   const content = props.children;
-  const baseClass = "text-green-500 hover:text-green-600 transition-colors";
+  const baseClass = "text-accent hover:opacity-80 transition-opacity";
   const className = props.className
     ? `${baseClass} ${props.className}`
     : baseClass;

diff --git a/src/components/core/Loading.tsx b/src/components/core/Loading.tsx
@@ -13,13 +13,13 @@ export function Loading({
     <div className={`p-8 ${className}`}>
       <div className="flex flex-col justify-center items-center h-64 space-y-4">
         <div className="relative">
-          <div className="w-8 h-8 border-4 border-gray-600 border-t-blue-500 rounded-full animate-spin"></div>
+          <div className="w-8 h-8 border-4 border-border border-t-accent rounded-full animate-spin"></div>
           <div
-            className="absolute top-0 left-0 w-8 h-8 border-4 border-transparent border-t-blue-300 rounded-full animate-spin"
+            className="absolute top-0 left-0 w-8 h-8 border-4 border-transparent border-t-accent/60 rounded-full animate-spin"
             style={{ animationDirection: "reverse", animationDuration: "1.5s" }}
           ></div>
         </div>
-        <p className="text-gray-300 text-lg font-medium animate-pulse">
+        <p className="text-subtle text-lg font-medium animate-pulse">
           {message}
         </p>
       </div>

diff --git a/src/components/core/Text.tsx b/src/components/core/Text.tsx
@@ -6,15 +6,15 @@ export type TextSize = "small" | "medium" | "large";
 export type TextType = "code" | "normal";
 
 const headerBySize: Record<TextSize, string> = {
-  small: "text-sm font-medium text-white leading-snug",
-  medium: "text-2xl font-semibold text-white leading-snug max-w-3xl",
-  large: "text-3xl font-semibold text-white leading-snug",
+  small: "text-sm font-medium text-primary leading-snug",
+  medium: "text-2xl font-semibold text-primary leading-snug max-w-3xl",
+  large: "text-3xl font-semibold text-primary leading-snug",
 };
 
 const infoBySize: Record<TextSize, string> = {
-  small: "text-xs text-gray-400 leading-snug",
-  medium: "text-sm text-gray-400 leading-relaxed",
-  large: "text-lg text-gray-300",
+  small: "text-xs text-muted leading-snug",
+  medium: "text-sm text-muted leading-relaxed",
+  large: "text-lg text-subtle",
 };
 
 interface TextProps {

diff --git a/src/components/core/TextFilter.tsx b/src/components/core/TextFilter.tsx
@@ -17,7 +17,7 @@ export function TextFilter({
 }: TextFieldProps): ReactElement {
   return (
     <div>
-      <label className="block text-sm font-medium text-gray-300 mb-1">
+      <label className="block text-sm font-medium text-subtle mb-1">
         {title}
       </label>
       <input
@@ -29,7 +29,7 @@ export function TextFilter({
           }
         }}
         placeholder={placeholder}
-        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-10 w-full"
+        className="bg-surface-2 border border-border rounded px-3 py-2 text-primary placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent h-10 w-full"
       />
     </div>
   );

diff --git a/src/components/ui/AppTooltip.tsx b/src/components/ui/AppTooltip.tsx
@@ -0,0 +1,34 @@
+import { Tooltip } from "flowbite-react";
+import classNames from "classnames";
+import { ReactElement, ReactNode } from "react";
+
+const tooltipClassName =
+  "bg-surface-2 z-10 w-max border border-border text-primary text-sm";
+
+const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" };
+
+interface AppTooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  placement?: "auto" | "top" | "right" | "bottom" | "left";
+  className?: string;
+}
+
+export function AppTooltip({
+  content,
+  children,
+  placement = "auto",
+  className,
+}: AppTooltipProps): ReactElement {
+  return (
+    <Tooltip
+      content={content}
+      placement={placement}
+      arrow={false}
+      className={classNames(tooltipClassName, className)}
+      theme={tooltipTheme}
+    >
+      {children}
+    </Tooltip>
+  );
+}
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
@@ -11,9 +11,9 @@ interface BadgeProps {
 }
 
 const typeClasses: Record<BadgeType, string> = {
-  info: "bg-gray-600 border-2 border-gray-700",
-  success: "bg-green-900 text-white border-2 border-green-800",
-  warning: "bg-yellow-500 text-black border-2 border-yellow-600",
+  info: "bg-surface-2 border-2 border-border text-primary",
+  success: "bg-success/20 border-2 border-success/60 text-primary",
+  warning: "bg-warning/20 border-2 border-warning/60 text-primary",
 };
 
 export function Badge({

diff --git a/src/components/ui/CommonTable.tsx b/src/components/ui/CommonTable.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react";
 import classNames from "classnames";
-import { Hint } from "../core/Hint";
+import { Hint } from "./Hint";
 import { Loading } from "../core/Loading";
 
 export type CellPrimitive = ReactElement | string | number;
@@ -30,9 +30,9 @@ export function CommonTable({
   loading = false,
   className = "",
   tableClassName = "",
-  headerClassName = "bg-gray-700 border-gray-600",
-  columnHeaderClassName = "bg-gray-600 text-white",
-  cellClassName = "text-gray-200",
+  headerClassName = "bg-surface-2 border-border",
+  columnHeaderClassName = "bg-surface-2 text-primary",
+  cellClassName = "text-primary",
   children,
   onRowClick,
 }: CommonTableProps): ReactElement {
@@ -57,7 +57,7 @@ export function CommonTable({
       {children && (
         <div
           className={classNames(
-            "mb-1 p-2 bg-gray-50 rounded-sm",
+            "mb-1 p-2 bg-surface-2 rounded-sm",
             headerClassName,
           )}
         >
@@ -73,14 +73,14 @@ export function CommonTable({
             loading && "opacity-50 pointer-events-none",
           )}
         >
-          <table className="w-full border-collapse border border-gray-300 rounded-sm">
+          <table className="w-full border-collapse border border-border rounded-sm">
             <thead>
-              <tr className="bg-gray-100">
+              <tr className="bg-surface-2">
                 {columns.map((column) => (
                   <th
                     key={column.name}
                     className={classNames(
-                      "border border-gray-300 px-2 py-1 text-center font-semibold text-gray-700",
+                      "border border-border px-2 py-1 text-center font-semibold text-primary",
                       columnHeaderClassName,
                     )}
                   >
@@ -101,7 +101,7 @@ export function CommonTable({
                 <tr
                   key={rowIndex}
                   className={classNames(
-                    "bg-gray-700 hover:bg-gray-800 transition-colors duration-150",
+                    "bg-surface hover:bg-surface-2 transition-colors duration-150",
                     onRowClick && "cursor-pointer",
                   )}
                   onClick={() => onRowClick?.(row, rowIndex)}
@@ -112,7 +112,7 @@ export function CommonTable({
                       <td
                         key={column.name}
                         className={classNames(
-                          "border border-gray-300 px-2 py-1",
+                          "border border-border px-2 py-1",
                           cellClassName,
                         )}
                       >
@@ -126,7 +126,7 @@ export function CommonTable({
           </table>
         </div>
         {loading && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900/60">
+          <div className="absolute inset-0 flex items-center justify-center bg-app/60">
             <Loading />
           </div>
         )}

diff --git a/src/components/ui/CopyButton.tsx b/src/components/ui/CopyButton.tsx
@@ -28,9 +28,9 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
         className="opacity-0 group-hover:opacity-100 transition-opacity"
       >
         {copied ? (
-          <MdCheck className="text-gray-400" />
+          <MdCheck className="text-muted" />
         ) : (
-          <MdContentCopy className="text-gray-400" />
+          <MdContentCopy className="text-muted" />
         )}
       </Button>
     </div>

diff --git a/src/components/ui/ErrorPage.tsx b/src/components/ui/ErrorPage.tsx
@@ -24,7 +24,7 @@ export function ErrorPage({
         <div className="mb-8">
           {showLargeText && <h1 className="text-9xl font-bold">404</h1>}
           <h2 className="text-2xl font-semibold mb-4">{title}</h2>
-          <p className="text-gray-400 mb-8">{message}</p>
+          <p className="text-muted mb-8">{message}</p>
         </div>
 
         {children && (

diff --git a/src/components/core/Hint.tsx → src/components/ui/Hint.tsx b/src/components/core/Hint.tsx → src/components/ui/Hint.tsx
@@ -1,6 +1,6 @@
-import { Tooltip } from "flowbite-react";
 import { ReactElement, ReactNode } from "react";
 import { MdHelpOutline } from "react-icons/md";
+import { AppTooltip } from "./AppTooltip";
 
 interface HintProps {
   children?: ReactElement;
@@ -9,23 +9,14 @@ interface HintProps {
   trigger?: "icon" | "child";
 }
 
-const tooltipClassName = "bg-gray-600 z-10 border-1 max-w-xl";
-const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" };
-
 export function Hint(props: HintProps): ReactElement {
   const trigger = props.trigger ?? "icon";
 
   if (trigger === "child") {
     return (
-      <Tooltip
-        content={props.hintContent}
-        arrow={false}
-        placement="auto"
-        className={tooltipClassName}
-        theme={tooltipTheme}
-      >
+      <AppTooltip content={props.hintContent} className="max-w-xl">
         {props.children}
-      </Tooltip>
+      </AppTooltip>
     );
   }
 
@@ -35,15 +26,9 @@ export function Hint(props: HintProps): ReactElement {
     >
       <div>{props.children}</div>
       <div>
-        <Tooltip
-          content={props.hintContent}
-          arrow={false}
-          placement="auto"
-          className={tooltipClassName}
-          theme={tooltipTheme}
-        >
+        <AppTooltip content={props.hintContent} className="max-w-xl">
           <MdHelpOutline />
-        </Tooltip>
+        </AppTooltip>
       </div>
     </div>
   );