a new start

_sass/pro/_dark-mode-dynamic-syntax.scss

@@ -0,0 +1,9 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+
+@import "pro/syntax-dark";
+
+@media screen and (prefers-color-scheme: dark) {
+  body {
+    @include darkmode-syntax();
+  }
+}

_sass/pro/_dark-mode-dynamic.scss

@@ -0,0 +1,20 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+
+@import "pro/dark-mode";
+
+@media screen and (prefers-color-scheme: light) {
+  body {
+    @include light-mode();
+  }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  body {
+    @include dark-mode();
+  }
+
+  .tippy-content {
+    -webkit-font-smoothing: initial;
+    -moz-osx-font-smoothing: initial;
+  }
+}

_sass/pro/_dark-mode.scss

@@ -0,0 +1,32 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+
+#_dark-mode {
+  font-size: 1.25rem;
+}
+
+@mixin dark-mode() {
+  --body-color: #ccc;
+  --body-bg: var(--dark-mode-body-bg);
+  --border-color: var(--dark-mode-border-color);
+  --gray: rgba(255,255,255,.5);
+  --gray-bg: rgba(255,255,255,.033);
+  --gray-text: rgba(255,255,255,.625);
+  --menu-text: rgba(255,255,255,.25);
+  --inv-body-color: #{$body-color};
+  --inv-body-bg: #{$body-bg};
+
+  .content {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@media screen {
+  body, body.light-mode {
+    @include light-mode();
+  }
+
+  body.dark-mode {
+    @include dark-mode();
+  }
+}

_sass/pro/_syntax-dark.scss

@@ -0,0 +1,139 @@
+@mixin darkmode-syntax {
+  .highlight,
+  pre.highlight {
+    // background: #282c34;
+    color: #abb2bf;
+  }
+  // .highlight pre {
+  //   background: #282c34;
+  // }
+  .highlight .ge {
+    font-style: italic;
+  }
+  .highlight .gs {
+    font-weight: 700;
+  }
+  .highlight .ow {
+    font-weight: 700;
+  }
+  .highlight .n,
+  .highlight .nf,
+  .highlight .nn,
+  .highlight .o,
+  .highlight .p {
+    color: #abb2bf;
+  }
+  .highlight .c,
+  .highlight .c1,
+  .highlight .cm,
+  .highlight .cp,
+  .highlight .cs {
+    color: #5c6370;
+    font-style: italic;
+  }
+  .highlight .sr,
+  .highlight .ss {
+    color: #56b6c2;
+  }
+  .highlight .k,
+  .highlight .kc,
+  .highlight .kd,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kt {
+    color: #c678dd;
+  }
+  .highlight .l,
+  .highlight .ld,
+  .highlight .s,
+  .highlight .s1,
+  .highlight .s2,
+  .highlight .sb,
+  .highlight .sc,
+  .highlight .sd,
+  .highlight .se,
+  .highlight .sh,
+  .highlight .si,
+  .highlight .sx {
+    color: #98c379;
+  }
+  .highlight .nt,
+  .highlight .nx,
+  .highlight .vi {
+    color: #e06c75;
+  }
+  .highlight .il,
+  .highlight .m,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .mo,
+  .highlight .na {
+    color: #d19a66;
+  }
+  .highlight .bp,
+  .highlight .nb,
+  .highlight .nc,
+  .highlight .nd,
+  .highlight .ne,
+  .highlight .ni,
+  .highlight .nl,
+  .highlight .no,
+  .highlight .nv,
+  .highlight .py,
+  .highlight .vc,
+  .highlight .vg {
+    color: #e5c07b;
+  }
+  // .highlight .err {
+  //   color: #fff;
+  //   background-color: #e05252;
+  // }
+  .highlight .gd {
+    color: #e05252;
+  }
+  .highlight .gi {
+    color: #43d08a;
+  }
+  .highlight .w {
+    color: #f8f8f2;
+  }
+  .highlight .cpf {
+    color: navy;
+  }
+  .highlight .gu {
+    color: #75715e;
+  }
+  .highlight .lineno {
+    color: #636d83;
+    user-select: none;
+  }
+  .highlight .ln {
+    color: #636d83;
+    user-select: none;
+  }
+  .highlight .ln:after {
+    content: " ";
+  }
+  .highlight .hll {
+    color: #abb2bf;
+    background-color: #3a3f4b;
+  }
+  .highlight .hl {
+    color: #abb2bf;
+    background-color: #3a3f4b;
+  }
+  .highlight .language-json .w + .s2 {
+    color: #e06c75;
+  }
+  .highlight .language-json .kc {
+    color: #56b6c2;
+  }
+}
+
+@media screen {
+  body.dark-mode {
+    @include darkmode-syntax();
+  }
+}