diff --git a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
index cb9dd6f1a3..f7c62c9161 100644
--- a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
@@ -25,7 +25,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     minHeight: '100%',
     width: '220px',
     position: 'relative',
-    backgroundImage: 'linear-gradient(290.29deg, #521576 18.61%, #E42656 96.07%)',
+    backgroundImage: theme.palette.colors.sidebarBackground,
     color: theme.palette.colors.white,
   },
 
diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
index 1a43ad6625..d6fbf4b0d6 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
@@ -54,7 +54,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
   [`&.${classes.wrapper}`]: {
     backgroundColor: theme.palette.background.default,
     '&:hover': {
-      backgroundColor: theme.palette.colors.gray03,
+      backgroundColor: theme.palette.background.paper,
     },
   },
 
diff --git a/packages/desktop/src/renderer/index.html b/packages/desktop/src/renderer/index.html
index 6836dc8e64..e5fce0c849 100644
--- a/packages/desktop/src/renderer/index.html
+++ b/packages/desktop/src/renderer/index.html
@@ -13,6 +13,11 @@
     <link rel="preload" href="iJWHBXyIfDnIV7EyjmmT8WDm7Q.woff2" as="font" type="font/woff2">
     <link rel="preload" href="iJWHBXyIfDnIV7Eyjmmd8WA.woff2" as="font" type="font/woff2">
     <style>
+      @media (prefers-color-scheme: dark) {
+        :root {
+          color-scheme: dark;
+        }
+      }
       @font-face {
         font-family: 'Menlo Regular';
         font-style: normal;