diff --git a/src/components/left/main/Badge.scss b/src/components/left/main/Badge.scss
index 94df86c87..018739ce8 100644
--- a/src/components/left/main/Badge.scss
+++ b/src/components/left/main/Badge.scss
@@ -43,7 +43,9 @@
     background: var(--color-green);
   }
 
-  &.pinned {
+  &.pinned:not(.unread) {
+    color: var(--color-pinned);
+    background: transparent;
     width: 1.5rem;
     padding: 0;
 
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 1ec066c92..5a385ae34 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -100,6 +100,8 @@ $color-user-8: #faa774;
 
   --color-placeholders: #{$color-placeholders};
 
+  --color-pinned: #{$color-white};
+
   --color-code: #4a729a;
   --color-code-bg: #{rgba($color-text-secondary, .08)};
   --color-code-own: #3c7940;
diff --git a/src/styles/themes.json b/src/styles/themes.json
index 92c8eea6f..b6e882f4c 100644
--- a/src/styles/themes.json
+++ b/src/styles/themes.json
@@ -10,6 +10,7 @@
   "--color-borders-input": ["#DADCE0", "#5B5B5A"],
   "--color-links": ["#52A1EF", "#868DF6"],
   "--color-gray": ["#C4C9CC", "#808080"],
+  "--color-pinned": ["#C4C9CC", "#707579"],
   "--color-default-shadow": ["#72727240", "#21212140"],
   "--color-light-shadow": ["#7272722B", "#00000040"],
   "--color-green": ["#4DCD5E", "#868DF5"],
diff --git a/src/util/switchTheme.ts b/src/util/switchTheme.ts
index 937064e9f..f5cd8f757 100644
--- a/src/util/switchTheme.ts
+++ b/src/util/switchTheme.ts
@@ -73,7 +73,7 @@ function hexToRgb(hex: string): RGBAColor {
     r: parseInt(result[1], 16),
     g: parseInt(result[2], 16),
     b: parseInt(result[3], 16),
-    a: result[4] ? parseInt(result[4], 16) : undefined,
+    a: result[4] !== undefined ? parseInt(result[4], 16) : undefined,
   };
 }
 
@@ -82,9 +82,12 @@ function applyColorAnimationStep(startIndex: number, endIndex: number, interpola
     const r = Math.round(lerp(propertyColors[startIndex].r, propertyColors[endIndex].r, interpolationRatio));
     const g = Math.round(lerp(propertyColors[startIndex].g, propertyColors[endIndex].g, interpolationRatio));
     const b = Math.round(lerp(propertyColors[startIndex].b, propertyColors[endIndex].b, interpolationRatio));
-    const a = propertyColors[startIndex].a
-      && Math.round(lerp(propertyColors[startIndex].a!, propertyColors[endIndex].a!, interpolationRatio));
+    const a = propertyColors[startIndex].a !== undefined
+      ? Math.round(lerp(propertyColors[startIndex].a!, propertyColors[endIndex].a!, interpolationRatio))
+      : undefined;
 
-    document.documentElement.style.setProperty(property, a ? `rgba(${r},${g},${b},${a / 255})` : `rgb(${r},${g},${b})`);
+    document.documentElement.style.setProperty(property, a !== undefined
+      ? `rgba(${r},${g},${b},${a / 255})`
+      : `rgb(${r},${g},${b})`);
   });
 }