diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 65c601ed8..c5b329eaf 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -145,3 +145,4 @@ From oldest to newest contributor, we would like to thank:
 - [Julian van Doorn](https://github.com/JulianvDoorn)
 - [Andrea Tomasi](https://github.com/treere)
 - [Khyber Sen](https://github.com/kkysen)
+- [Matthew Guidry](https://github.com/mguid65)
diff --git a/static/colour.ts b/static/colour.ts
index 9b62717a4..67fd59a9c 100644
--- a/static/colour.ts
+++ b/static/colour.ts
@@ -25,7 +25,15 @@
 import * as monaco from 'monaco-editor';
 import {Themes} from './themes.js';
 
-export type ColourScheme = 'rainbow' | 'rainbow2' | 'earth' | 'green-blue' | 'gray-shade' | 'rainbow-dark' | 'pink';
+export type ColourScheme =
+    | 'rainbow'
+    | 'rainbow2'
+    | 'earth'
+    | 'green-blue'
+    | 'gray-shade'
+    | 'rainbow-dark'
+    | 'soft-rainbow-dark'
+    | 'pink';
 
 export type AppTheme = Themes | 'all';
 
@@ -56,13 +64,19 @@ export const schemes: ColourSchemeInfo[] = [
         name: 'gray-shade',
         desc: 'Gray shades',
         count: 4,
-        themes: ['dark', 'darkplus', 'real-dark'],
+        themes: ['dark', 'darkplus', 'real-dark', 'onedark'],
     },
     {
         name: 'rainbow-dark',
         desc: 'Dark Rainbow',
         count: 12,
-        themes: ['dark', 'darkplus', 'real-dark'],
+        themes: ['dark', 'darkplus', 'real-dark', 'onedark'],
+    },
+    {
+        name: 'soft-rainbow-dark',
+        desc: 'Soft Dark Rainbow',
+        count: 11,
+        themes: ['dark', 'darkplus', 'real-dark', 'onedark'],
     },
     {
         name: 'pink',
diff --git a/static/styles/colours.scss b/static/styles/colours.scss
index 34c952668..3101f8952 100644
--- a/static/styles/colours.scss
+++ b/static/styles/colours.scss
@@ -219,6 +219,51 @@
     background: rgba(105, 94, 7, 0.35);
 }
 
+/*soft rainbow dark*/
+.soft-rainbow-dark-0 {
+    background: rgba(79, 140, 135, 0.15);
+}
+
+.soft-rainbow-dark-1 {
+    background: rgba(160, 160, 49, 0.15);
+}
+
+.soft-rainbow-dark-2 {
+    background: rgba(80, 80, 183, 0.15);
+}
+
+.soft-rainbow-dark-3 {
+    background: rgba(162, 50, 24, 0.15);
+}
+
+.soft-rainbow-dark-4 {
+    background: rgba(51, 122, 173, 0.15);
+}
+
+.soft-rainbow-dark-5 {
+    background: rgba(186, 136, 23, 0.15);
+}
+
+.soft-rainbow-dark-6 {
+    background: rgba(125, 178, 70, 0.15);
+}
+
+.soft-rainbow-dark-7 {
+    background: rgba(165, 60, 109, 0.15);
+}
+
+.soft-rainbow-dark-8 {
+    background: rgba(125, 88, 88, 0.15);
+}
+
+.soft-rainbow-dark-9 {
+    background: rgba(120, 42, 151, 0.15);
+}
+
+.soft-rainbow-dark-10 {
+    background: rgba(47, 120, 35, 0.15);
+}
+
 /* Gray shades */
 /*@for $i from 0 through 4 {
     .pink- hashtag {$i} {
diff --git a/static/styles/explorer.scss b/static/styles/explorer.scss
index 9d68f1217..7991717bf 100644
--- a/static/styles/explorer.scss
+++ b/static/styles/explorer.scss
@@ -1145,6 +1145,14 @@ html[data-theme='pink'] {
     }
 }
 
+html[data-theme='one-dark'] {
+    @import 'themes/one-dark-theme';
+    background-color: $light !important;
+    .theme-dark-only {
+        display: inline;
+    }
+}
+
 .socialsharing {
     max-width: 250px;
 }
diff --git a/static/styles/themes/custom-golden-layout-themes/one-dark.scss b/static/styles/themes/custom-golden-layout-themes/one-dark.scss
new file mode 100644
index 000000000..78426a978
--- /dev/null
+++ b/static/styles/themes/custom-golden-layout-themes/one-dark.scss
@@ -0,0 +1,247 @@
+// based on pink.scss
+
+$lightest: #444b53;
+$lighter: #3d424d;
+$light: #2c313c;
+$base: #282c34;
+$dark: #21252b;
+$darker: #1e1f22;
+
+// Color variables (appears count calculates by raw css)
+$color0: $dark; // Appears 7 times
+$color1: $base; // Appears 3 times
+$color2: #e06c75; // Appears 2 times
+$color3: #98c379; // Appears 2 times
+
+$color4: #d19a66; // Appears 1 time
+$color5: #61afef; // Appears 1 time
+$color6: #c678dd; // Appears 1 time
+$color7: #56b6c2; // Appears 1 time
+$color8: #abb2bf; // Appears 1 time
+$color9: #5c6370; // Appears 1 time
+$color10: #e06c75; // Appears 2 time
+
+// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
+
+// Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
+.lm_goldenlayout {
+    background: $color0;
+}
+
+// Single Pane content (area in which final dragged content is contained)
+.lm_content {
+    background: $light;
+}
+
+// Single Pane content during Drag (style of moving window following mouse)
+.lm_dragProxy {
+    .lm_content {
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
+    }
+}
+
+// Placeholder Container of target position
+.lm_dropTargetIndicator {
+    box-shadow: inset 0 0 30px $color0;
+    outline: 1px dashed $color4;
+    transition: all 200ms ease;
+
+    // Inner Placeholder
+    .lm_inner {
+        background: $color0;
+        opacity: 0.2;
+    }
+}
+
+// Separator line (handle to change pane size)
+.lm_splitter {
+    background: $color9;
+    opacity: 0.001;
+    transition: opacity 200ms ease;
+
+    &:hover, // When hovered by mouse...
+  &.lm_dragging {
+        background: $color8;
+        opacity: 1;
+    }
+}
+
+// Pane Header (container of Tabs for each pane)
+.lm_header {
+    border-top: 2px solid $dark !important;
+    height: 30px !important;
+    user-select: none;
+
+    &.lm_selectable {
+        cursor: pointer;
+    }
+
+    // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
+    .lm_tab {
+        height: 26px !important;
+        font-family: Arial, sans-serif;
+        font-size: 12px;
+        color: $color8;
+        background: $base;
+        margin-top: 0;
+        margin-right: 0;
+        padding-top: 0px;
+        padding-bottom: 0px;
+
+        .lm_title {
+            padding-top: 5px;
+        }
+
+        // Close Tab Icon
+        .lm_close_tab {
+            width: 11px;
+            height: 11px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            top: 8px;
+            right: 6px;
+            opacity: 0.4;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        // Modify Tab Icon
+        .lm_modify_tab_title {
+            width: 11px;
+            height: 11px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            top: 8px;
+            opacity: 0.4;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        &:hover {
+            opacity: 1;
+            border-bottom: 3px solid $lighter;
+        }
+
+        border-bottom: 3px solid $base;
+        // If Tab is active, so if it's in foreground
+        &.lm_active {
+            border-bottom: 3px solid $color5;
+        }
+    }
+}
+
+.lm_dragProxy.lm_bottom,
+.lm_stack.lm_bottom {
+    .lm_header .lm_tab {
+        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
+        &.lm_active {
+            box-shadow: 0 2px 2px $color0;
+        }
+    }
+}
+
+// If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
+.lm_selected {
+    .lm_header {
+        background-color: $dark;
+    }
+}
+
+.lm_tab {
+    &:hover, // If Tab is hovered
+  &.lm_active // If Tab is active, so if it's in foreground
+    {
+        background: $lighter;
+    }
+}
+
+// Dropdown arrow for additional tabs when too many to be displayed
+.lm_header .lm_controls .lm_tabdropdown:before {
+    color: #f2f2f2;
+    margin-top: 3px;
+}
+
+// Pane controls (popout, maximize, minimize, close)
+.lm_controls {
+    // All Pane controls shares these
+    > li {
+        position: relative;
+        background-position: center center;
+        background-repeat: no-repeat;
+        opacity: 0.4;
+        transition: opacity 300ms ease;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    // Icon to PopOut Pane, so move it to a different Browser Window
+    .lm_popout {
+        top: 6px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVR4nI2QMQoAMAwCz5L/f9mOzZIaN0E9UDyZhaaQz6atgBHgambEJ5wBKoS0WaIvfT+6K2MIECN19MAAAAAASUVORK5CYII=);
+    }
+
+    // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
+    .lm_maximise {
+        top: 6px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==);
+    }
+
+    // Icon to Close Pane and so remove it from GoldenLayout Container
+    .lm_close {
+        top: 6px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVR4nGNgYGD4z4Af/Mdg4FKASwCnDf8JKSBoAtEmEXQTQd8RDCcA6+4Q8OvIgasAAAAASUVORK5CYII=);
+    }
+}
+
+// If a specific Pane is maximized
+.lm_maximised {
+    // Pane Header (container of Tabs for each pane) can have different style when is Maximized
+    .lm_header {
+        background-color: $color0;
+    }
+
+    // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
+    .lm_controls {
+        .lm_maximise {
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
+        }
+    }
+}
+
+.lm_transition_indicator {
+    background-color: $color0;
+    border: 1px dashed $color9;
+}
+
+// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
+.lm_popin {
+    cursor: pointer;
+
+    // Background of Icon
+    .lm_bg {
+        background: $color10;
+        opacity: 0.3;
+    }
+
+    // Icon to Restore original position in Golden Layout Container
+    .lm_icon {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
+        background-position: center center;
+        background-repeat: no-repeat;
+        border-left: 1px solid $color2;
+        border-top: 1px solid $color2;
+        opacity: 0.7;
+    }
+
+    &:hover {
+        .lm_icon {
+            opacity: 1;
+        }
+    }
+}
diff --git a/static/styles/themes/one-dark-theme.scss b/static/styles/themes/one-dark-theme.scss
new file mode 100644
index 000000000..5a270dd16
--- /dev/null
+++ b/static/styles/themes/one-dark-theme.scss
@@ -0,0 +1,714 @@
+// based on pink-theme.scss
+@import 'custom-golden-layout-themes/one-dark';
+
+$logo-primary: #67c52a;
+$logo-secondary: #999999;
+
+$lightest: #444b53;
+$lighter: #3d424d;
+$light: #2c313c;
+$base: #282c34;
+$dark: #21252b;
+$darker: #1e1f22;
+
+::-webkit-scrollbar {
+    background: lighten(#333a42, 10%);
+}
+
+::-webkit-scrollbar-thumb {
+    background: lighten(#333a42, 20%);
+}
+
+a {
+    color: #45bbe0 !important;
+
+    &.navbar-brand {
+        img.logo {
+            &.inverse {
+                display: block !important;
+            }
+
+            &.normal {
+                display: none !important;
+            }
+        }
+    }
+}
+
+body {
+    background-color: $base !important;
+}
+
+input {
+    color: #eee !important;
+    background-color: $lightest;
+    border: 0 !important;
+
+    &:focus {
+        color: #eee !important;
+        background-color: $lightest;
+        border: 0 !important;
+    }
+
+    &.permalink {
+        color: #eee !important;
+        background-color: $lightest;
+        opacity: 1;
+    }
+}
+
+kbd {
+    border-color: #818181 !important;
+}
+
+pre {
+    color: #f2f2f2 !important;
+
+    .content {
+        background-color: #1e1e1e !important;
+
+        .compiling {
+            background-color: #101010 !important;
+        }
+    }
+}
+
+select {
+    color: #000 !important;
+}
+
+textarea.form-control {
+    color: #eee !important;
+    background-color: $lighter;
+    border: 0 !important;
+}
+
+.argmenuitem {
+    max-width: 250px;
+
+    span {
+        &.argtitle {
+            font-weight: bold;
+            display: block;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &.argdescription {
+            max-height: 150px;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            font-style: italic;
+            font-size: smaller;
+            display: block;
+            white-space: normal;
+            text-overflow: ellipsis;
+            overflow-y: hidden;
+        }
+    }
+}
+
+.bg-light {
+    background-color: $base !important;
+}
+
+.bottom-bar {
+    color: #aaa !important;
+    background-color: $base !important;
+    padding-bottom: 7px;
+    &.bg-light {
+        border-top: 1px solid $dark;
+    }
+}
+
+.btn-light {
+    color: #e2e2e2 !important;
+    background-color: $base !important;
+    border-color: $base !important;
+
+    &.active {
+        background-color: $darker !important;
+        color: #fff !important;
+
+        &:hover {
+            background-color: lighten($darker, 5%) !important;
+        }
+    }
+
+    &:hover {
+        background-color: $lighter !important;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+        background-color: lighten($light, 5%) !important;
+        color: #eee !important;
+    }
+}
+
+.card {
+    background-color: $light !important;
+    color: #f2f2f2 !important;
+    border-color: $dark;
+}
+
+.commit-entry {
+    &:nth-child(odd) {
+        background-color: $dark !important;
+    }
+
+    &:nth-child(even) {
+        background-color: $light !important;
+    }
+}
+
+.community-advert {
+    color: white;
+    background: $light !important;
+    border-color: #006400;
+
+    button {
+        opacity: 1;
+        color: #006400;
+        text-shadow: none;
+    }
+}
+
+.conformance-wrapper {
+    background-color: #1e1e1e !important;
+
+    .compiler-list .form-row {
+        border-bottom: 1px solid #3e3e3e;
+    }
+}
+
+.copy-link-btn:hover {
+    background-color: $dark !important;
+}
+
+.cppi-logo-sec {
+    fill: #e2e2e2 !important;
+}
+
+.currentCursorPosition {
+    color: white;
+    background-color: opacify($dark, 0.8);
+}
+
+.custom-select {
+    background-color: #76a1c8 !important;
+}
+
+.dropdown-item {
+    color: #eee !important;
+    background-color: $base;
+
+    &:hover {
+        color: #fff !important;
+        background-color: $dark !important;
+    }
+}
+
+.dropdown-menu {
+    color: #f2f2f2 !important;
+    background-color: $base !important;
+}
+
+.err-count {
+    color: #e5c07b !important;
+}
+
+.execution-stdout {
+    color: white !important;
+}
+
+.fa,
+.fas {
+    color: white;
+}
+
+.qb-logo-pri {
+    fill: #3b3c3e !important;
+}
+
+.qb-logo-sec {
+    fill: #e2e2e2 !important;
+}
+
+.float-link {
+    color: #eee !important;
+    background-color: rgba(128, 128, 128, 0.5) !important;
+
+    &:hover {
+        background-color: rgba(128, 128, 160, 0.5) !important;
+    }
+}
+
+.flow-decoration {
+    background-color: #b4131f !important;
+    color: white !important;
+    font-weight: bold;
+}
+
+.flow-highlight {
+    background-color: rgba(180, 19, 31, 0.4) !important;
+}
+
+.form-control:disabled {
+    background-color: darken(#474747, 10%);
+}
+
+.graph-container {
+    background: $dark;
+    .cfg-info {
+        color: #aaa;
+    }
+    .graph .block-container .block {
+        background: $light;
+        border: 1px solid white;
+        color: white;
+    }
+}
+
+.input-group-text {
+    background-color: #a1a1a1 !important;
+    border-color: $dark !important;
+}
+
+.logo-pri {
+    fill: $logo-primary !important;
+}
+
+.logo-sec {
+    fill: $logo-secondary !important;
+}
+
+#library-selection {
+    .libs-selected-col button {
+        color: white;
+    }
+
+    .libs-favorites-col button {
+        color: white;
+    }
+
+    .libs-results-col .lib-fav-button {
+        color: white;
+    }
+}
+
+#v-status {
+    color: #eee !important;
+}
+
+.lib-item {
+    background-color: #333 !important;
+}
+
+.linked-code-decoration {
+    background: #555657 !important;
+}
+
+.linked-code-decoration-inline {
+    background: #444444;
+}
+
+.linked-code-decoration-line {
+    background: lighten($lighter, 5%) !important;
+}
+
+.linked-code-decoration-margin {
+    background: $light !important;
+}
+
+.linked-compiler-output-line {
+    color: #007bfd !important;
+}
+
+.linked-code-decoration-column {
+    font-weight: 600;
+    color: #44ab40 !important;
+}
+
+.lm_controls {
+    .lm_maximise {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M0 4.5V0h9v9H0zM8 5V2H1v6h7z'/%3E%3C/svg%3E") !important;
+        background-size: 9px !important;
+    }
+
+    .lm_close {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M.45713 8.5429l-.44426-.44438 3.5955-3.5956L.00697.90152l.8944-.89463 3.6016 3.6015 3.6014-3.6015.88867.88867-3.6014 3.6015 3.6014 3.6015-.89449.89449-3.6015-3.6014-3.5957 3.5956z'/%3E%3C/svg%3E") !important;
+        background-size: 9px !important;
+    }
+}
+
+.lm_header {
+    background-color: $dark !important;
+
+    .lm_tab {
+        /*
+         * replace low res golden-layout icons with svg recreations to improve high DPI displays
+         * not all icons in golden-layout are used, so we don't replace all of them
+         */
+        .lm_close_tab {
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M.45713 8.5429l-.44426-.44438 3.5955-3.5956L.00697.90152l.8944-.89463 3.6016 3.6015 3.6014-3.6015.88867.88867-3.6014 3.6015 3.6014 3.6015-.89449.89449-3.6015-3.6014-3.5957 3.5956z'/%3E%3C/svg%3E") !important;
+            background-size: 9px !important;
+        }
+
+        .lm_modify_tab_title {
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E") !important;
+            background-size: 9px !important;
+            background-repeat: no-repeat;
+            background-position: center center;
+            width: 11px;
+            height: 11px;
+            position: absolute;
+            top: 8px;
+            right: 23px;
+        }
+    }
+}
+
+.lm_maximised .lm_controls .lm_maximise {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M1.0096 8.0019v-.99809h6.9807v1.9962H1.0096z'/%3E%3C/svg%3E") !important;
+    background-size: 9px !important;
+}
+
+.modal-body {
+    background-color: $base !important;
+    color: #eee !important;
+}
+
+.modal-content {
+    .well {
+        background-color: $base !important;
+        color: #eee !important;
+    }
+
+    .card-body {
+        background-color: $base !important;
+    }
+}
+
+.modal-footer {
+    background-color: $base !important;
+}
+
+.modal-header {
+    color: #eee !important;
+    background-color: $base !important;
+
+    .close {
+        color: #eee;
+    }
+}
+
+.nav.nav-tabs {
+    li {
+        a {
+            color: #eee !important;
+            background-color: $base !important;
+        }
+    }
+
+    li:not(.active) {
+        a {
+            border-bottom: 1px solid #fff !important;
+        }
+    }
+
+    li.active {
+        a {
+            background-color: #666 !important;
+        }
+    }
+}
+
+.navbar-light {
+    background-color: $base !important;
+
+    .navbar-nav li {
+        &:hover {
+            color: #fff !important;
+            background-color: $dark !important;
+        }
+
+        a {
+            color: #fff !important;
+
+            &:hover {
+                color: #fff !important;
+                background-color: $dark !important;
+            }
+        }
+    }
+
+    a.nav-link {
+        border: rgb(140, 140, 140) 1px solid;
+    }
+
+    .navbar-toggler-icon {
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    }
+
+    .navbar-toggler {
+        color: rgba(255, 255, 255, 0.5);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.new-cookie-msg {
+    color: white;
+}
+
+.notification {
+    background-color: gray !important;
+}
+
+.notification-error {
+    background-color: #aa3333 !important;
+    color: #fff;
+
+    .close {
+        color: #fff;
+    }
+}
+
+.notification-info {
+    background-color: #676767 !important;
+    color: #f2f2f2;
+}
+
+.notification-off {
+    background-color: #222 !important;
+    color: #fff;
+
+    .close {
+        color: #fff;
+    }
+}
+
+.notification-on {
+    background-color: #33aa33 !important;
+    color: black;
+}
+
+.opt-decoration {
+    &.analysis,
+    &.mixed {
+        background: #fdfd96 !important;
+    }
+
+    &.passed {
+        background: #77dd77 !important;
+    }
+
+    &.missed {
+        background: #ff6961 !important;
+    }
+}
+
+.popover,
+.popover-content,
+.libs-container,
+.lib-list,
+.popover-body,
+.popover-header {
+    background-color: $base !important;
+    color: #f2f2f2 !important;
+}
+
+.popular-arguments-btn {
+    border-color: #474747 !important;
+}
+
+.popover .arrow::after,
+.popover .arrow::before {
+    border-left-color: #151515 !important;
+    border-right-color: #151515 !important;
+}
+
+.popover {
+    border-color: $light !important;
+}
+
+.prepend-options {
+    border-color: $light !important;
+    background-color: $base !important;
+}
+
+.picker-popout-button {
+    border: none !important;
+    background: $light !important;
+    &:hover {
+        background: darken($light, 5%) !important;
+    }
+}
+
+.qb-logo-pri {
+    fill: #e2e2e2 !important;
+}
+
+.qb-logo-sec {
+    fill: #333 !important;
+}
+
+.rainbow-decoration {
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(
+        60deg,
+        #ed4242 0,
+        #ffaa44 20%,
+        #fff344 40%,
+        #43a35b 60%,
+        #447cff 80%,
+        #9c44a9 100%
+    );
+}
+
+#renamepanemodal .modal-body {
+    min-height: 100px;
+}
+
+.share-disabled {
+    color: #333 !important;
+}
+
+.share-reddit {
+    background-color: #ff4500 !important;
+    color: white !important;
+}
+
+.share-twitter {
+    background-color: #1da1f2 !important;
+    color: white !important;
+}
+
+#simplecook {
+    background-color: #474747 !important;
+}
+
+.text-count {
+    color: green !important;
+}
+
+.top-bar.btn-toolbar.bg-light {
+    border-top: 2px solid $dark !important;
+    border-bottom: 2px solid $dark !important;
+}
+
+.tree {
+    ul,
+    li {
+        background-color: $dark !important;
+        color: white;
+    }
+
+    li.tree-editor-file {
+        background-color: $dark !important;
+        color: white;
+
+        &:hover {
+            background-color: lighten($base, 5%) !important;
+        }
+    }
+}
+
+.ts-dropdown {
+    color: #f2f2f2 !important;
+    background-color: $base !important;
+    margin: 0 !important;
+
+    .option:hover {
+        background-color: $lighter;
+        color: #eee !important;
+    }
+
+    .active {
+        background-color: $lightest !important;
+        color: #dddddd !important;
+    }
+
+    .selected {
+        background-color: #405f9d !important;
+        color: #dddddd !important;
+    }
+
+    .optgroup-header {
+        background: $base;
+        color: #eee !important;
+        text-shadow: none !important;
+    }
+}
+
+.ts-wrapper.single {
+    .ts-control {
+        border: none;
+        color: #f2f2f2 !important;
+        background: $light !important;
+        text-shadow: none !important;
+
+        &:after {
+            border-color: #525252 transparent transparent transparent;
+        }
+
+        &.disabled {
+            color: #f2f2f2 !important;
+            background-color: $light !important;
+        }
+    }
+}
+
+#compiler-picker-modal {
+    .architecture,
+    .compiler-type {
+        background: $base;
+        &.active {
+            background: #007bff;
+        }
+    }
+
+    .compilers-col .group-wrapper .group {
+        .label {
+            background: $base;
+        }
+        .compiler {
+            &:hover {
+                background: $light;
+            }
+            &.selected {
+                background-color: #405f9d !important;
+            }
+        }
+    }
+}
+
+#alert {
+    &.error-alert {
+        .modal-content {
+            border: 4px solid #f43636;
+        }
+    }
+}
+
+.compiler-arg-warning-icon {
+    color: #ffbf3f !important;
+}
+
+.compiler-arg-warning {
+    border-color: #ffbf3f;
+    &:before {
+        border-color: #ffbf3f;
+        background: #ffbf3f;
+    }
+    &.info {
+        border-color: #3f92ff;
+        &:before {
+            border-color: #3f92ff;
+            background: #3f92ff;
+            content: '\f05a';
+            color: rgb(20, 21, 22);
+        }
+    }
+}
diff --git a/static/themes.ts b/static/themes.ts
index 1fcf37904..6089e51b9 100644
--- a/static/themes.ts
+++ b/static/themes.ts
@@ -29,7 +29,7 @@ import GoldenLayout from 'golden-layout';
 import {isString} from '../shared/common-utils.js';
 import {options} from './options.js';
 
-export type Themes = 'default' | 'dark' | 'darkplus' | 'pink' | 'real-dark' | 'system';
+export type Themes = 'default' | 'dark' | 'darkplus' | 'pink' | 'onedark' | 'real-dark' | 'system';
 
 export type Theme = {
     path: string;
@@ -75,6 +75,13 @@ export const themes: Record<Themes, Theme> = {
         mainColor: '#333333',
         monaco: 'ce-dark',
     },
+    onedark: {
+        path: 'one-dark',
+        id: 'onedark',
+        name: 'One Dark',
+        mainColor: '#282c34',
+        monaco: 'ce-one-dark',
+    },
     system: {
         id: 'system',
         name: 'Same as system',
@@ -409,6 +416,131 @@ editor.defineTheme('ce-pink', {
     },
 });
 
+editor.defineTheme('ce-one-dark', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+        {
+            token: 'identifier.definition.herb',
+            foreground: '61afef',
+            fontStyle: 'bold',
+        },
+        // General Identifiers
+        {token: 'identifier.cpp', foreground: 'abb2bf'},
+        // Annotations (includes items in attribute list)
+        {token: 'annotation.cpp', foreground: 'abb2bf'},
+        // Keywords
+        {token: 'keyword.auto.cpp', foreground: 'c678dd'},
+        {token: 'keyword.break.cpp', foreground: 'c678dd'},
+        {token: 'keyword.case.cpp', foreground: 'c678dd'},
+        {token: 'keyword.catch.cpp', foreground: 'c678dd'},
+        {token: 'keyword.class.cpp', foreground: 'c678dd'},
+        {token: 'keyword.constexpr.cpp', foreground: 'c678dd'},
+        {token: 'keyword.continue.cpp', foreground: 'c678dd'},
+        {token: 'keyword.default.cpp', foreground: 'c678dd'},
+        {token: 'keyword.delete.cpp', foreground: 'c678dd'},
+        {token: 'keyword.do.cpp', foreground: 'c678dd'},
+        {token: 'keyword.else.cpp', foreground: 'c678dd'},
+        {token: 'keyword.enum.cpp', foreground: 'c678dd'},
+        {token: 'keyword.explicit.cpp', foreground: 'c678dd'},
+        {token: 'keyword.export.cpp', foreground: 'c678dd'},
+        {token: 'keyword.extern.cpp', foreground: 'c678dd'},
+        {token: 'keyword.final.cpp', foreground: 'c678dd'},
+        {token: 'keyword.for.cpp', foreground: 'c678dd'},
+        {token: 'keyword.friend.cpp', foreground: 'c678dd'},
+        {token: 'keyword.goto.cpp', foreground: 'c678dd'},
+        {token: 'keyword.if.cpp', foreground: 'c678dd'},
+        {token: 'keyword.inline.cpp', foreground: 'c678dd'},
+        {token: 'keyword.mutable.cpp', foreground: 'c678dd'},
+        {token: 'keyword.namespace.cpp', foreground: 'c678dd'},
+        {token: 'keyword.new.cpp', foreground: 'c678dd'},
+        {token: 'keyword.noexcept.cpp', foreground: 'c678dd'},
+        {token: 'keyword.operator.cpp', foreground: 'c678dd'},
+        {token: 'keyword.override.cpp', foreground: 'c678dd'},
+        {token: 'keyword.private.cpp', foreground: 'c678dd'},
+        {token: 'keyword.protected.cpp', foreground: 'c678dd'},
+        {token: 'keyword.public.cpp', foreground: 'c678dd'},
+        {token: 'keyword.return.cpp', foreground: 'c678dd'},
+        {token: 'keyword.static.cpp', foreground: 'c678dd'},
+        {token: 'keyword.struct.cpp', foreground: 'c678dd'},
+        {token: 'keyword.switch.cpp', foreground: 'c678dd'},
+        {token: 'keyword.template.cpp', foreground: 'c678dd'},
+        {token: 'keyword.thread_local.cpp', foreground: 'c678dd'},
+        {token: 'keyword.throw.cpp', foreground: 'c678dd'},
+        {token: 'keyword.try.cpp', foreground: 'c678dd'},
+        {token: 'keyword.typedef.cpp', foreground: 'c678dd'},
+        {token: 'keyword.typename.cpp', foreground: 'c678dd'},
+        {token: 'keyword.union.cpp', foreground: 'c678dd'},
+        {token: 'keyword.unsigned.cpp', foreground: 'c678dd'},
+        {token: 'keyword.using.cpp', foreground: 'c678dd'},
+        {token: 'keyword.virtual.cpp', foreground: 'c678dd'},
+        {token: 'keyword.while.cpp', foreground: 'c678dd'},
+        {token: 'keyword._asm.cpp', foreground: 'c678dd'},
+        {token: 'keyword.and.cpp', foreground: 'c678dd'},
+        {token: 'keyword.and_eq.cpp', foreground: 'c678dd'},
+        {token: 'keyword.bitand.cpp', foreground: 'c678dd'},
+        {token: 'keyword.bitor.cpp', foreground: 'c678dd'},
+        {token: 'keyword.compl.cpp', foreground: 'c678dd'},
+        {token: 'keyword.concept.cpp', foreground: 'c678dd'},
+        {token: 'keyword.co_await.cpp', foreground: 'c678dd'},
+        {token: 'keyword.co_return.cpp', foreground: 'c678dd'},
+        {token: 'keyword.co_yield.cpp', foreground: 'c678dd'},
+        {token: 'keyword.export.cpp', foreground: 'c678dd'},
+        {token: 'keyword.import.cpp', foreground: 'c678dd'},
+        {token: 'keyword.module.cpp', foreground: 'c678dd'},
+        {token: 'keyword.not.cpp', foreground: 'c678dd'},
+        {token: 'keyword.not_eq.cpp', foreground: 'c678dd'},
+        {token: 'keyword.or.cpp', foreground: 'c678dd'},
+        {token: 'keyword.or_eq.cpp', foreground: 'c678dd'},
+        {token: 'keyword.requires.cpp', foreground: 'c678dd'},
+        {token: 'keyword.xor.cpp', foreground: 'c678dd'},
+        {token: 'keyword.xor_eq.cpp', foreground: 'c678dd'},
+        // Function-like keywords
+        {token: 'keyword.static-assert.cpp', foreground: '282c34'},
+        {token: 'keyword.alignof.cpp', foreground: '282c34'},
+        {token: 'keyword.typeid.cpp', foreground: '282c34'},
+        {token: 'keyword.static_cast.cpp', foreground: '282c34'},
+        {token: 'keyword.sizeof.cpp', foreground: '282c34'},
+        {token: 'keyword.reinterpret_cast.cpp', foreground: '282c34'},
+        {token: 'keyword.dynamic_cast.cpp', foreground: '282c34'},
+        {token: 'keyword.decltype.cpp', foreground: '282c34'},
+        {token: 'keyword.asm.cpp', foreground: '282c34'},
+        // Constants and Literals
+        {token: 'keyword.true.cpp', foreground: 'e5c07b'},
+        {token: 'keyword.false.cpp', foreground: 'e5c07b'},
+        {token: 'keyword.nullptr.cpp', foreground: 'e5c07b'},
+        {token: 'number.cpp', foreground: 'e5c07b'},
+        {token: 'number.hex.cpp', foreground: 'e5c07b'},
+        {token: 'number.float.cpp', foreground: 'e5c07b'},
+        {token: 'number.octal.cpp', foreground: 'e5c07b'},
+        {token: 'number.binary.cpp', foreground: 'e5c07b'},
+        {token: 'string.cpp', foreground: '98c379'},
+        // Other
+        {token: 'keyword.this.cpp', foreground: 'e06c75'},
+        {token: 'keyword.directive.include.cpp', foreground: 'c678dd'},
+        {token: 'keyword.directive.include.begin.cpp', foreground: '98c379'},
+        {token: 'keyword.directive.include.end.cpp', foreground: '98c379'},
+        {token: 'entity.name.type.cpp', foreground: 'e5c07b'},
+        {token: 'string.escape.cpp', foreground: '56b6c2'},
+        {token: 'string.include.identifier.cpp', foreground: '98c379'},
+    ],
+    colors: {
+        'editor.background': '#282c34',
+        'editor.foreground': '#abb2bf',
+        // 'editor.lineHighlightBorder': '#e3a5e3',
+        'editor.lineHighlightBackground': '#2c313c',
+        'editor.wordHighlightBackground': '#484e5b',
+        'editor.wordHighlightBorder': '#7f848e',
+        'editor.wordHighlightStrongBackground': '#abb2bf26',
+        'editor.wordHighlightStrongBorder': '#7f848e',
+        'editorHoverWidget.background': '#21252b',
+        'editorLineNumber.foreground': '#495162',
+        'editor.selectionBackground': '#67769660',
+        'editor.inactiveSelectionBackground': '#3a3f4b',
+        'minimap.selectionHighlight': '#abb2bf',
+    },
+});
+
 export class Themer {
     private currentTheme: Theme | null = null;