diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index aeadcf000..6dbbabda9 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -136,10 +136,11 @@ const WidgetOptionTypeSwitch: FC<{
   handleChange: (key: string, value: IntegrationOptionsValueType) => void;
 }> = ({ option, widgetId, propName: key, value, handleChange }) => {
   const { t } = useTranslation([`modules/${widgetId}`, 'common']);
-  const { fn } = useMantineTheme();
+  const { fn, colorScheme } = useMantineTheme();
 
   switch (option.type) {
     case 'switch':
+      var info = option.info !== undefined ? option.info : false;
       return (
         <Group align="center" spacing="sm">
           <Switch
@@ -148,20 +149,21 @@ const WidgetOptionTypeSwitch: FC<{
             onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
             {...option.inputProps}
           />
-          {option.info?
-            <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+          {info?
+            <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
               <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
             </Tooltip.Floating> : undefined
           }
         </Group>
       );
     case 'text':
+      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -174,12 +176,13 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'multi-select':
+      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -194,12 +197,13 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'select':
+      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -214,12 +218,13 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'number':
+      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -232,12 +237,13 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'slider':
+      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -264,6 +270,7 @@ const WidgetOptionTypeSwitch: FC<{
       );
 
     case 'draggable-list':
+      var info = option.info !== undefined ? option.info : false;
       /* eslint-disable no-case-declarations */
       const typedVal = value as IDraggableListInputValue['defaultValue'];
 
@@ -290,8 +297,8 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -319,12 +326,13 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'multiple-text':
+      var info = option.info !== undefined ? option.info : false;
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -347,13 +355,14 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'draggable-editable-list':
+      var info = option.info !== undefined ? option.info : false;
       const { t: translateDraggableList } = useTranslation('widgets/draggable-list');
       return (
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {option.info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
+            {info?
+              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }