complete colors in dark mode

app/components/Btn/index.tsx

@@ -55,6 +55,7 @@ export default function Btn(props: BtnProps) {
         py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn transition-all duration-300 select-none
         ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
         ${btnClassName} 
+        follow-parent-svg
       `}
       onClick={onClick}
       title={title}

app/components/Card/index.tsx

@@ -14,7 +14,7 @@ export default function Card(props: CardProps) {
       {title && (
         <div
           className={`
-            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title
+            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title text-text-card-title
             mb-3
 
             ml-3

app/components/List/index.tsx

@@ -81,7 +81,7 @@ export function ListItem(props: ListItemProps) {
       onClick={onClick}
     >
       <div className={`flex-1 flex flex-col justify-start gap-1`}>
-        <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1">
+        <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1 text-text-list-title">
           {title}
         </div>
         {subTitle && (

app/components/Modal/index.tsx

@@ -147,7 +147,7 @@ const Modal = (props: ModalProps) => {
           </div>
           <div
             className={`flex flex-col flex-0      
-              bg-moda-panel text-modal-mask    
+              bg-moda-panel text-modal-panel    
               ${modelClassName}
               ${panelClassName}
             `}
@@ -156,7 +156,7 @@ const Modal = (props: ModalProps) => {
               <AlertDialog.Title
                 className={`
                       flex items-center justify-between gap-3 font-common
-                      md:text-chat-header-title md:font-bold md:leading-5
+                      md:text-chat-header-title md:font-bold md:leading-5 
                       ${
                         headerBordered
                           ? " border-b border-modal-header-bottom"
@@ -165,7 +165,7 @@ const Modal = (props: ModalProps) => {
                       ${titleClassName}
                   `}
               >
-                <div className="flex gap-3 justify-start flex-1 items-center">
+                <div className="flex gap-3 justify-start flex-1 items-center text-text-modal-title text-chat-header-title">
                   {title}
                 </div>
                 {closeble && (
@@ -180,7 +180,7 @@ const Modal = (props: ModalProps) => {
                 )}
               </AlertDialog.Title>
             )}
-            <div className="flex-1 overflow-hidden">
+            <div className="flex-1 overflow-hidden text-text-modal-content text-sm-title">
               {typeof content === "function"
                 ? content({
                     close: () => {

app/components/Select/index.tsx

@@ -58,14 +58,16 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
       {options?.map((o) => (
         <div
           key={o.value}
-          className={`flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer`}
+          className={`
+            flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer
+          `}
           onClick={() => {
             onSelect?.(o.value);
           }}
         >
-          <div className="flex gap-2 flex-1">
-            {!!o.icon && <div className="">{o.icon}</div>}
-            <div className={`flex-1`}>{o.label}</div>
+          <div className="flex gap-2 flex-1 follow-parent-svg text-text-select-option">
+            {!!o.icon && <div className="flex items-center">{o.icon}</div>}
+            <div className={`flex-1 text-text-select-option`}>{o.label}</div>
           </div>
           <div
             className={
@@ -97,7 +99,9 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
         className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
         ref={contentRef}
       >
-        <div className={`flex items-center gap-2 flex-1`}>
+        <div
+          className={`flex items-center gap-2 flex-1 follow-parent-svg text-text-select`}
+        >
           {!!selectedOption?.icon && (
             <div className={``}>{selectedOption?.icon}</div>
           )}

app/components/SlideRange/index.tsx

@@ -62,9 +62,7 @@ export default function SlideRange(props: SlideRangeProps) {
       className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
     >
       {!!description && (
-        <div className="text-text-slider-block text-common text-sm ">
-          {description}
-        </div>
+        <div className=" text-common text-sm ">{description}</div>
       )}
       <div
         className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
@@ -74,7 +72,7 @@ export default function SlideRange(props: SlideRangeProps) {
           &nbsp;
         </div>
         <div
-          className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%]  h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover"
+          className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%]  h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover text-text-slider-block"
           // onPointerDown={onPointerDown}
         >
           {value}

app/components/ui-lib.tsx

@@ -101,6 +101,7 @@ interface ModalProps {
   defaultMax?: boolean;
   footer?: React.ReactNode;
   onClose?: () => void;
+  className?: string;
 }
 export function Modal(props: ModalProps) {
   useEffect(() => {
@@ -122,14 +123,14 @@ export function Modal(props: ModalProps) {
 
   return (
     <div
-      className={
-        styles["modal-container"] + ` ${isMax && styles["modal-container-max"]}`
-      }
+      className={`${styles["modal-container"]} ${
+        isMax && styles["modal-container-max"]
+      } ${props.className ?? ""}`}
     >
-      <div className={styles["modal-header"]}>
-        <div className={styles["modal-title"]}>{props.title}</div>
+      <div className={`${styles["modal-header"]} new-header follow-parent-svg`}>
+        <div className={`${styles["modal-title"]}`}>{props.title}</div>
 
-        <div className={styles["modal-header-actions"]}>
+        <div className={`${styles["modal-header-actions"]}`}>
           <div
             className={styles["modal-header-action"]}
             onClick={() => setMax(!isMax)}
@@ -147,11 +148,11 @@ export function Modal(props: ModalProps) {
 
       <div className={styles["modal-content"]}>{props.children}</div>
 
-      <div className={styles["modal-footer"]}>
+      <div className={`${styles["modal-footer"]} new-footer`}>
         {props.footer}
         <div className={styles["modal-actions"]}>
           {props.actions?.map((action, i) => (
-            <div key={i} className={styles["modal-action"]}>
+            <div key={i} className={`${styles["modal-action"]} new-btn`}>
               {action}
             </div>
           ))}