diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index d97d26c..cd99e99 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -56,7 +56,7 @@
         box-sizing: border-box
         height: 22px
         width: 100%
-        background-color: #48b57e
+        background: #48b57e
         color: #fff
         font-family: "Open Sans"
         font-size: 12px
@@ -65,6 +65,16 @@
         display: flex
         flex-direction: row
 
+        &.dark
+            background: #0e1713
+            color: rgba(255, 255, 255, 0.75)
+            .status-block.line-number 
+                color: rgba(255, 255, 255, 0.55)
+                .num
+                    color: rgba(255, 255, 255, 0.75)
+            .status-block.lang .auto
+                color: rgba(255, 255, 255, 0.55)
+
         .spacer
             flex-grow: 1
         
diff --git a/src/editor/theme/dark.js b/src/editor/theme/dark.js
index 78384cf..3d99884 100644
--- a/src/editor/theme/dark.js
+++ b/src/editor/theme/dark.js
@@ -62,7 +62,7 @@ const darkTheme = EditorView.theme({
     },
     '&.cm-focused .cm-matchingBracket': {
         backgroundColor: matchingBracket,
-        color: base02
+        color: "inherit",
     },
     '&.cm-focused .cm-nonmatchingBracket': {
         outline: `0.5px solid #bc8f8f`
@@ -106,7 +106,8 @@ const darkTheme = EditorView.theme({
         borderTop: "1px solid #1e222a",
     },
     ".heynote-blocks-layer .block-odd": {
-        background: "#222f38",
+        //background: "#222f38",
+        background: "#213644",
         borderTop: "1px solid #1e222a",
     },
 }, { dark: true });