diff --git a/components/note/__tests__/__snapshots__/index.test.tsx.snap b/components/note/__tests__/__snapshots__/index.test.tsx.snap
index 012d1d1..2b01f3c 100644
--- a/components/note/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/note/__tests__/__snapshots__/index.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`Note should work with different styles 1`] = `
           font-size: 14px;
           line-height: 1.8;
           border: 1px solid #0070f3;
-          color: #fff;
+          color: white;
           background-color: #0070f3;
           border-radius: 5px;
         }
diff --git a/components/note/note.tsx b/components/note/note.tsx
index 7b97682..3b47429 100644
--- a/components/note/note.tsx
+++ b/components/note/note.tsx
@@ -37,9 +37,9 @@ const getStatusColor = (type: NormalTypes, filled: boolean, theme: ZeitUIThemes)
     borderColor: statusColor || theme.palette.border,
     bgColor: theme.palette.background,
   }
-  
+  const filledColor = statusColor ? 'white' : theme.palette.background
   return {
-    color: theme.palette.background,
+    color: filledColor,
     borderColor: statusColor || theme.palette.foreground,
     bgColor: statusColor || theme.palette.foreground,
   }
diff --git a/components/toast/__tests__/__snapshots__/index.test.tsx.snap b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
index 61773af..e1ccef5 100644
--- a/components/toast/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`UseToast should work with different types 1`] = `
           align-items: center;
           color: #000;
           background-color: #0070f3;
-          color: #fff;
+          color: white;
           border: 0;
           border-radius: 5px;
           padding: 16pt;
diff --git a/components/toast/toast-item.tsx b/components/toast/toast-item.tsx
index 21e7118..725026c 100644
--- a/components/toast/toast-item.tsx
+++ b/components/toast/toast-item.tsx
@@ -39,13 +39,18 @@ const getColors = (palette: ZeitUIThemesPalette, type?: NormalTypes) => {
     warning: palette.warning,
     error: palette.error,
   }
-  if (!type || type === 'default') return {
+  const isDefault = !type || type === 'default'
+  if (isDefault) return {
     bgColor: colors.default,
     color: palette.foreground,
   }
+  /**
+   * Prevent main color change in special types.
+   * The color will only follow the theme when it is in the default type.
+   */
   return {
-    bgColor: colors[type],
-    color: palette.background,
+    bgColor: colors[type as NormalTypes],
+    color: 'white',
   }
 }