use maintained theme

themes/CodeIT/assets/lib/valine/valine.scss

@@ -0,0 +1,73 @@
+// ========== Global ========== //
+// Color of the border
+$border-color: #f0f0f0;
+$border-color-dark: #363636;
+
+// ========== Code ========== //
+// Color of the code
+$code-color: #e74c3c !default;
+$code-color-dark: #e5bf78 !default;
+
+// Color of the code background
+$code-background-color: #f5f5f5 !default;
+$code-background-color-dark: #272c34 !default;
+
+@mixin overflow-wrap($value) {
+  word-wrap: $value;
+  overflow-wrap: $value;
+}
+
+@mixin line-break($value) {
+  -webkit-line-break: $value;
+  -ms-line-break: $value;
+  line-break: $value;
+}
+
+@mixin tab-size($value) {
+  -moz-tab-size: $value;
+  -o-tab-size: $value;
+  tab-size: $value;
+}
+
+.v[data-class="v"] {
+  .vcards .vcard .vcontent.expand {
+    &::before,
+    &::after {
+      z-index: 50;
+    }
+  }
+
+  .vwrap,
+  .vwrap .vheader .vinput,
+  .vcards .vcard .vh,
+  .vcards .vcard .vquote,
+  blockquote {
+    border-color: $border-color;
+
+    [theme="dark"] & {
+      border-color: $border-color-dark;
+    }
+  }
+
+  code,
+  pre,
+  pre code {
+    font-size: 90%;
+    @include overflow-wrap(break-word);
+    @include line-break(anywhere);
+    @include tab-size(4);
+    color: $code-color;
+    background: $code-background-color;
+
+    [theme="dark"] & {
+      color: $code-color-dark;
+      background: $code-background-color-dark;
+    }
+  }
+
+  .emoji,
+  .vemoji {
+    max-width: 1.5em;
+    vertical-align: text-bottom;
+  }
+}