diff --git a/src/styles/editor/editor-content.scss b/src/styles/editor/editor-content.scss
index 9c1d4f32..26f40608 100644
--- a/src/styles/editor/editor-content.scss
+++ b/src/styles/editor/editor-content.scss
@@ -1,6 +1,171 @@
 @import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css");
 
-:root {
+
+.neeto-ui-theme--dark .hljs {
+  color: #c9d1d9;
+  background: #0d1117
+}
+
+.neeto-ui-theme--dark .hljs-doctag,
+.neeto-ui-theme--dark .hljs-keyword,
+.neeto-ui-theme--dark .hljs-meta .hljs-keyword,
+.neeto-ui-theme--dark .hljs-template-tag,
+.neeto-ui-theme--dark .hljs-template-variable,
+.neeto-ui-theme--dark .hljs-type,
+.neeto-ui-theme--dark .hljs-variable.language_ {
+  color: #ff7b72
+}
+
+.neeto-ui-theme--dark .hljs-title,
+.neeto-ui-theme--dark .hljs-title.class_,
+.neeto-ui-theme--dark .hljs-title.class_.inherited__,
+.neeto-ui-theme--dark .hljs-title.function_ {
+  color: #d2a8ff
+}
+
+.neeto-ui-theme--dark .hljs-attr,
+.neeto-ui-theme--dark .hljs-attribute,
+.neeto-ui-theme--dark .hljs-literal,
+.neeto-ui-theme--dark .hljs-meta,
+.neeto-ui-theme--dark .hljs-number,
+.neeto-ui-theme--dark .hljs-operator,
+.neeto-ui-theme--dark .hljs-selector-attr,
+.neeto-ui-theme--dark .hljs-selector-class,
+.neeto-ui-theme--dark .hljs-selector-id,
+.neeto-ui-theme--dark .hljs-variable {
+  color: #79c0ff
+}
+
+.neeto-ui-theme--dark .hljs-meta .hljs-string,
+.neeto-ui-theme--dark .hljs-regexp,
+.neeto-ui-theme--dark .hljs-string {
+  color: #a5d6ff
+}
+
+.neeto-ui-theme--dark .hljs-built_in,
+.neeto-ui-theme--dark .hljs-symbol {
+  color: #ffa657
+}
+
+.neeto-ui-theme--dark .hljs-code,
+.neeto-ui-theme--dark .hljs-comment,
+.neeto-ui-theme--dark .hljs-formula {
+  color: #8b949e
+}
+
+.neeto-ui-theme--dark .hljs-name,
+.neeto-ui-theme--dark .hljs-quote,
+.neeto-ui-theme--dark .hljs-selector-pseudo,
+.neeto-ui-theme--dark .hljs-selector-tag {
+  color: #7ee787
+}
+
+.neeto-ui-theme--dark .hljs-subst {
+  color: #c9d1d9
+}
+
+.neeto-ui-theme--dark .hljs-section {
+  color: #1f6feb;
+}
+
+.neeto-ui-theme--dark .hljs-bullet {
+  color: #f2cc60
+}
+
+.neeto-ui-theme--dark .hljs-emphasis {
+  color: #c9d1d9;
+}
+
+.neeto-ui-theme--dark .hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700
+}
+
+.neeto-ui-theme--dark .hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16
+}
+
+.neeto-ui-theme--dark .hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c
+}
+
+.neeto-ui-theme--light .hljs {
+  color: #333;
+  background: #f8f8f8
+}
+
+.neeto-ui-theme--light .hljs-comment,
+.neeto-ui-theme--light .hljs-quote {
+  color: #998;
+}
+
+.neeto-ui-theme--light .hljs-keyword,
+.neeto-ui-theme--light .hljs-selector-tag,
+.neeto-ui-theme--light .hljs-subst {
+  color: #333;
+}
+
+.neeto-ui-theme--light .hljs-literal,
+.neeto-ui-theme--light .hljs-number,
+.neeto-ui-theme--light .hljs-tag .hljs-attr,
+.neeto-ui-theme--light .hljs-template-variable,
+.neeto-ui-theme--light .hljs-variable {
+  color: teal
+}
+
+.neeto-ui-theme--light .hljs-doctag,
+.neeto-ui-theme--light .hljs-string {
+  color: #d14
+}
+
+.neeto-ui-theme--light .hljs-section,
+.neeto-ui-theme--light .hljs-selector-id,
+.neeto-ui-theme--light .hljs-title {
+  color: #900;
+}
+
+.neeto-ui-theme--light .hljs-class .hljs-title,
+.neeto-ui-theme--light .hljs-type {
+  color: #458;
+}
+
+.neeto-ui-theme--light .hljs-attribute,
+.neeto-ui-theme--light .hljs-name,
+.neeto-ui-theme--light .hljs-tag {
+  color: navy;
+}
+
+.neeto-ui-theme--light .hljs-link,
+.neeto-ui-theme--light .hljs-regexp {
+  color: #009926
+}
+
+.neeto-ui-theme--light .hljs-bullet,
+.neeto-ui-theme--light .hljs-symbol {
+  color: #990073
+}
+
+.neeto-ui-theme--light .hljs-built_in,
+.neeto-ui-theme--light .hljs-builtin-name {
+  color: #0086b3
+}
+
+.neeto-ui-theme--light .hljs-meta {
+  color: #999;
+}
+
+.neeto-ui-theme--light .hljs-deletion {
+  background: #fdd
+}
+
+.neeto-ui-theme--light .hljs-addition {
+  background: #dfd
+}
+
+:root,
+.neeto-ui-theme--light {
   --neeto-editor-white: 255, 255, 255;
   --neeto-editor-black: 12, 17, 29;
   --neeto-editor-gray-800: 16, 24, 40;
@@ -91,6 +256,75 @@
   --neeto-editor-content-image-border-radius: 8px;
 }
 
+.neeto-ui-theme--dark {
+  --neeto-editor-white: 18, 18, 18;
+  --neeto-editor-black: 224, 224, 224;
+  --neeto-editor-gray-50: 10, 10, 10;
+  --neeto-editor-gray-100: 30, 30, 30;
+  --neeto-editor-gray-200: 44, 44, 44;
+  --neeto-editor-gray-300: 57, 57, 57;
+  --neeto-editor-gray-400: 73, 73, 73;
+  --neeto-editor-gray-500: 92, 92, 92;
+  --neeto-editor-gray-600: 124, 124, 124;
+  --neeto-editor-gray-700: 162, 162, 162;
+  --neeto-editor-gray-800: 200, 200, 200;
+  --neeto-editor-primary-800: 0, 245, 200;
+  --neeto-editor-primary-600: 0, 224, 183;
+  --neeto-editor-primary-500: 0, 204, 167;
+  --neeto-editor-primary-100: 0, 61, 49;
+  --neeto-editor-primary-50: 0, 41, 33;
+  --neeto-editor-accent-800: 142, 189, 245;
+  --neeto-editor-accent-600: 105, 167, 242;
+  --neeto-editor-accent-500: 67, 144, 239;
+  --neeto-editor-accent-100: 10, 56, 113;
+  --neeto-editor-accent-50: 7, 37, 75;
+  --neeto-editor-error-800: 247, 109, 116;
+  --neeto-editor-error-600: 236, 91, 98;
+  --neeto-editor-error-500: 227, 72, 80;
+  --neeto-editor-error-100: 129, 33, 38;
+  --neeto-editor-success-800: 0, 245, 200;
+  --neeto-editor-success-600: 0, 224, 183;
+  --neeto-editor-success-500: 0, 204, 167;
+  --neeto-editor-success-100: 0, 61, 49;
+  --neeto-editor-warning-800: 249, 164, 63;
+  --neeto-editor-warning-600: 242, 148, 35;
+  --neeto-editor-warning-500: 230, 134, 25;
+  --neeto-editor-warning-100: 131, 74, 11;
+  --neeto-editor-info-800: 142, 189, 245;
+  --neeto-editor-info-600: 105, 167, 242;
+  --neeto-editor-info-500: 67, 144, 239;
+  --neeto-editor-info-100: 10, 56, 113;
+  --neeto-editor-pastel-silver: 167, 168, 170;
+  --neeto-editor-pastel-red: 183, 164, 165;
+  --neeto-editor-pastel-yellow: 182, 175, 143;
+  --neeto-editor-pastel-green: 152, 179, 167;
+  --neeto-editor-pastel-blue: 170, 175, 183;
+  --neeto-editor-pastel-purple: 171, 169, 183;
+  --neeto-editor-pastel-pink: 181, 162, 174;
+  --neeto-editor-content-heading-color: 224, 224, 224, 1;
+  --neeto-editor-content-paragraph-color: 224, 224, 224, 1;
+  --neeto-editor-content-code-background-color: 21, 27, 35, 1;
+  --neeto-editor-content-code-line-number-color: 89, 99, 110, 1;
+  --neeto-editor-content-code-color: 240, 246, 252, 1;
+  --neeto-editor-content-blockquote-color: 145, 152, 161, 1;
+  --neeto-editor-content-blockquote-border-color: 61, 68, 77, 1;
+}
+
+.neeto-ui-theme--dark .neeto-editor-content.neeto-editor-size--small {
+  --neeto-editor-content-heading-color: 224, 224, 224, 1;
+  --neeto-editor-content-paragraph-color: 224, 224, 224, 1;
+}
+
+.neeto-ui-theme--light .neeto-editor-content {
+  --neeto-editor-content-heading-color: 12, 17, 29, 1;
+  --neeto-editor-content-paragraph-color: 54, 55, 55, 1;
+}
+
+.neeto-ui-theme--light .neeto-editor-content.neeto-editor-size--small {
+  --neeto-editor-content-heading-color: 31, 35, 40, 1;
+  --neeto-editor-content-paragraph-color: 31, 35, 40, 1;
+}
+
 .neeto-editor-content {
   white-space: pre-wrap;
   word-break: break-word;
@@ -98,6 +332,8 @@
 
   hr {
     margin: 0.5rem 0;
+    border-color: rgba(var(--neeto-editor-content-paragraph-color));
+    opacity: 0.2;
   }
 
   .table-responsive {
@@ -739,4 +975,4 @@
       background-color: rgb(var(--neeto-editor-gray-300));
     }
   }
-}
\ No newline at end of file
+}