Themes include dark mode by default.

10 files changed, 542 insertions, 532 deletions

diff --git a/templates/@theme-base/_dark_mode.scss b/templates/@theme-base/_dark_mode.scss
new file mode 100644
index 0000000..92f3fdd
--- /dev/null
+++ b/templates/@theme-base/_dark_mode.scss
@@ -0,0 +1,518 @@
+// Applies theme styles across as many areas of the layout as possible.
+
+// Scrollbar (PM currently does not style this element)
+body {
+  scrollbar-color: lighten($base, 10%) lighten($base, 2%);
+}
+::-webkit-scrollbar {
+  width: 16px;
+
+  &-track {
+    background: lighten($base, 2%);
+  }
+  &-thumb {
+    background: lighten($base, 10%);
+    box-shadow: inset 0 0 0 4px lighten($base, 2%);
+    border-radius: 16px;
+  }
+}
+
+.isDarkMode {
+  .bordered,
+  .bordered-container:not([class*="composerInputMeta-"]),
+  .breadcrumb-container {
+    border-color: lighten($base, 10%);
+  }
+
+  .squireToolbar-select-list {
+    background: $base;
+    color: $text_color;
+  }
+
+  .squireToolbar-dropdown-divider {
+    background-color: lighten($base, 10%);
+  }
+
+  .squireToolbar-select-item:hover {
+    background: darken($base, 2%);
+  }
+
+  // Compose window
+  #pm_composer .composer,
+  .composerInputMeta-overlay {
+    background: $base;
+  }
+
+  #pm_composer .composer .fill {
+    background: $base;
+  }
+
+  // Email tags present in new message window
+  .autocompleteEmails-item {
+    background-color: darken($base, 2%);
+    border-color: darken($base, 2%);
+  }
+
+  .autocompleteEmails-label {
+    border-left: 1px solid lighten($base, 10%);
+    border-right: 1px solid lighten($base, 10%);
+  }
+
+  .composerOptions-container.show {
+    background: darken($base, 2%);
+
+    .shadow-container {
+      background: $base;
+      color: $text_color;
+    }
+  }
+
+  .is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
+    background-color: darken($base, 2%);
+    border-color: lighten($base, 10%);
+    color: darken($base, 10%);
+  }
+
+  .pm-button-blueborder {
+    border-color: $highlight;
+    color: $highlight;
+  }
+
+  .pm-button-blueborder:hover {
+    border-color: lighten($highlight, 5%);
+    color: lighten($highlight, 5%);
+  }
+
+  [class*="squireToolbar-row"] .squireToolbar-action-mode:active, [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
+    background: lighten($base, 2%) !important;
+  }
+
+  .squireToolbar-separator {
+    background: lighten($base, 5%);
+  }
+
+  .composerTime-container,
+  [class*="composer-field"] {
+    color: $text_color;
+  }
+
+  .composerInputMeta-overlay-fakefield {
+    border-color: $text_color;
+  }
+
+  // Encryption icon
+  .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
+    color: white;
+  }
+
+  // Message items
+  .conversation {
+    border-color: lighten($base, 10%);
+  }
+
+  .main-area,
+  .main-area--noHeader, 
+  .main-area--withToolbar,
+  .main-area--withToolbar--noHeader,
+  [class*="block-info-"] {
+    color: $text_color;
+  }
+
+  [class*="block-info"] {
+    background-color: lighten($base, 10%);
+    color: $text_color;
+  }
+
+  .fill-global-grey {
+    fill: $highlight;
+  }
+
+  .starbutton {
+    fill: $extra_color;
+  }
+
+  // Read message
+  .bg-global-light, kbd {
+    background: $base;
+  }
+
+  // Contacts items and header
+  .item-container, .item-container-row, .contactsummary-container {
+    background: $base;
+  }
+
+  .items-column-list-inner, .ReactVirtualized__Grid__innerScrollContainer {
+    border-color: lighten($base, 10%);
+
+    .item-container, .item-container-row {
+      border-color: lighten($base, 10%);
+    }
+  }
+
+  // Unread, not active
+  .item-container:not(.item-is-selected):not(.read):not(.active),
+  .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
+  .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container {
+    background: lighten($base, 5%);
+  }
+
+  // Active
+  .item-container.active, .item-is-selected {
+    background: darken($base, 2%);
+    .flex-item-fluid {
+      color: $highlight;
+    }
+  }
+
+  // Selected message checkbox
+  .item-icon {
+    background-color: $base;
+    border: 1px solid darken($text_color, 5%);
+  }
+
+  .selectBoxElement-container:hover .item-icon {
+    background-color: $base;
+    border: 1px solid darken($highlight, 5%);
+
+    .item-icon-fakecheck-icon {
+      fill: darken($highlight, 5%);
+    }
+  }
+
+  .selectBoxElement-container {
+    color: $text_color;
+  }
+
+  .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
+    background-color: darken($highlight, 5%);
+    border-color: darken($highlight, 5%);
+  }
+
+  // Message list background area
+  .items-column-list,
+  .elementList-container-row {
+    background-color: $base;
+  }
+
+  // Current message panel
+  .message-header {
+    background-color: lighten($base, 5%);
+  }
+
+  .view-column-detail {
+    background-color: $base;
+  }
+
+  details:first-child {
+    border-color: lighten($base, 10%);
+  }
+
+  .items-column-list,
+  .message-container, 
+  .message-attachments {
+    border-color: lighten($base, 10%);
+  }
+
+  .message-container:not(.sent):not(.draft) .message-header.message-summary::before, 
+  .message-header.is-inbound::before {
+    border-top: 1px solid lighten($base, 10%);
+    border-left: 1px solid lighten($base, 10%);
+    background-color: lighten($base, 5%);
+  }
+
+  // Mailing list block
+  .message-infobox {
+    background-color: $base;
+  }
+
+  // Email body background, text and links
+  .message-content.frame.message-frame {
+    background: white;
+    color: black;
+  }
+
+  .block-info-standard, .bodyDecrypted blockquote {
+    border-color: $highlight;
+  }
+
+  .squireDropdown-item-label {
+    color: $text_color;
+  }
+
+  .squireToolbar-action-color {
+    background: transparent;
+  }
+
+  // This forces the background of a new message to used the base color.
+  .angular-squire-iframe body {
+    color: $text_color;
+    background: lighten($base, 5%);
+
+    a {
+      color: $highlight;
+    }
+  }
+
+  .plaintext-editor {
+    color: $text_color;
+  }
+
+  // Attachment button
+  .pm-button, .pm-button--info, .pm-button--redborder {
+    background: $base;
+    border-color: lighten($base, 10%);
+    color: $text_color;
+  }
+
+  .message-attachmentInfo {
+    border-color: lighten($base, 10%);
+  }
+
+  .is-hover.pm-button--info, .is-hover.pm-button--redborder,
+  .pm-button--info:focus, .pm-button--info:focus-within,
+  .pm-button--info:hover, .pm-button--redborder:focus,
+  .pm-button--redborder:focus-within, .pm-button--redborder:hover,
+  .pm-button.is-hover, .pm-button:focus, 
+  .pm-button:focus-within, .pm-button:hover:not(.pm-button--primary) {
+    color: $highlight;
+  }
+
+  .is-disabled.pm-button--info,
+  .is-disabled.pm-button--redborder,
+  .pm-button--info[disabled],
+  .pm-button--redborder[disabled],
+  .pm-button.is-disabled,
+  .pm-button[disabled] {
+    background: lighten($base, 10%);
+  }
+
+  .is-active.pm-button--info,
+  .is-active.pm-button--redborder,
+  .pm-button--info:not(div):active,
+  .pm-button--redborder:not(div):active,
+  .pm-button.is-active, .pm-button:not(div):active {
+    background: lighten($base, 10%);
+    color: $highlight;
+  }
+
+  // Dropdowns
+  .dropDown-content {
+    background: $base;
+    color: $text_color;
+
+    button {
+      color: $text_color;
+    }
+
+    .elementsSelector-btn-action,
+    .dropDown-item:hover {
+      color: $text_color;
+    }
+
+    .dropDown-item:hover {
+      background: lighten($base, 5%) !important;
+    }
+
+    .dropDown-item + .dropDown-item {
+      border-top: 1px solid lighten($base, 10%);
+    }
+
+    .dropDown-item {
+      .color-global-grey {
+        color: $text_color;
+      }
+    }
+  }
+
+  .dropDown {
+    .dropDown-content {
+      &::before, &::after {
+        border-bottom-color: $base;
+      }
+    }
+  }
+
+  .dropDown--right-bottom {
+    &::before {
+      border-right-color: $base;
+    }
+
+    .dropDown-content {
+      &::before, &::after {
+        background: $base;
+      }
+    }
+  }
+
+  .dropDown--bottom-right {
+    .dropDown-content {
+      &::before, &::after {
+        background: $base;
+      }
+    }
+  }
+
+  .dropDown--bottom-left::before, 
+  .dropDown--bottom-right::before, 
+  .dropDown--bottom::before {
+    border-bottom-color: lighten($base, 10%);
+  }
+
+  .dropDown--bottom-right {
+    border: 1px solid lighten($base, 10%);
+  }
+
+  .pm-field-icon-container[type="search"], .pm-field[type="search"] {
+    background-color: lighten($base, 5%);
+  }
+
+  .dropDown-contentInner {
+    background-color: $base;
+
+    &::before, &::after {
+      background-color: $base;
+    }
+
+    .dropDown-item span {
+      color: $text_color !important;
+    }
+  }
+
+  .searchbox-field[type="search"]:not(#global_search) {
+    background: $text_color;
+    color: $base;
+  }
+
+  // Links
+  .link, a, .pm-button--link {
+    color: $highlight;
+  }
+
+  .link:active, .link:focus, .link:hover, 
+  a:active, a:focus, a:hover,
+  .pm-button--link:hover,
+  .composerInputMeta-label:hover {
+    color: lighten($highlight, 5%);
+  }
+
+  // Modal
+  .pm-modal, .pm-modalContentInner {
+    background-color: $base;
+    color: $text_color;
+
+    &::before, &::after {
+      background-color: $base;
+    }
+    
+    .labelColorSelector-item-mask {
+      border: 2px solid lighten($base, 15%);
+    }
+  }
+
+  .pm-button--primaryborder, .pm-button-blueborder {
+    border-color: $highlight;
+    color: $highlight;
+    background-color: lighten($base, 5%);
+    transition: background-color .2s ease-in-out;
+  }
+
+  .is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus,
+  .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover,
+  .pm-button-blueborder.is-hover, .pm-button-blueborder:focus,
+  .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
+    border-color: $highlight;
+    color: $highlight;
+    background-color: darken($base, 1%);
+  }
+
+  // Input fields
+  .pm-field, .pm-field-icon-container,
+  .focus.pm-field-icon-container, .pm-field-icon-container:focus,
+  .pm-field-icon-container:focus-within, .pm-field.focus,
+  .pm-field:focus, .pm-field:focus-within,
+  .composerInputMeta-overlay-fakefield,
+  .composerInputMeta-autocomplete {
+    color: $text_color;
+    background-color: lighten($base, 5%);
+
+    &::placeholder {
+      color: darken($text_color, 5%);
+    }
+  }
+
+  .composerInputMeta-autocomplete input {
+    color: $text_color;
+    background-color: lighten($base, 5%);
+
+    &::placeholder {
+      color: darken($text_color, 5%);
+    }
+  }
+
+  select.pm-field, select.pm-field-icon-container {
+    background-color: lighten($base, 5%);
+    color: $text_color;
+  }
+
+  // Storage progress modal
+  .storageProgress-content.dropDown-content--rightbottom {
+    &::before {
+      border-right-color: $base;
+    }
+  }
+
+  // Settings panel
+  .main-area, .main-area-content {
+    background-color: $base;
+
+    .p1 {
+      background-color: lighten($base, 5%);
+    }
+  }
+
+  .subnav {
+    background: lighten($base, 5%);
+    
+    .link, a {
+      color: $highlight;
+    }
+    
+    .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
+      color: lighten($highlight, 5%);
+    }
+  }
+
+  // Toggle button
+  .pm-toggle-label {
+    border-color: lighten($base, 10%);
+    background: lighten($base, 5%);
+
+    &::before {
+      background: $base;
+    }
+
+    .pm-toggle-label-img {
+      fill: $text_color;
+    }
+  }
+
+  // Plans table
+  .pm-plans-table-row--highlighted {
+    background-color: $base;
+  }
+
+  // Forms
+  .pm-checkbox-fakecheck,
+  .pm-radio-fakeradio {
+    border-color: $highlight;
+    background: transparent;
+  }
+
+  [class*="icon-"].color-primary {
+    color: $highlight;
+  }
+
+  .color-global-grey-dm {
+    color: $highlight;
+  }
+}
diff --git a/templates/@theme-base/_full.scss b/templates/@theme-base/_full.scss
deleted file mode 100644
index a36463e..0000000
--- a/templates/@theme-base/_full.scss
+++ /dev/null
@@ -1,516 +0,0 @@
-// Applies theme styles across as many areas of the layout as possible.
-
-// Scrollbar (PM currently does not style this element)
-body {
-  scrollbar-color: lighten($base, 10%) lighten($base, 2%);
-}
-::-webkit-scrollbar {
-  width: 16px;
-
-  &-track {
-    background: lighten($base, 2%);
-  }
-  &-thumb {
-    background: lighten($base, 10%);
-    box-shadow: inset 0 0 0 4px lighten($base, 2%);
-    border-radius: 16px;
-  }
-}
-
-.bordered,
-.bordered-container:not([class*="composerInputMeta-"]),
-.breadcrumb-container {
-  border-color: lighten($base, 10%);
-}
-
-.squireToolbar-select-list {
-  background: $base;
-  color: $text_color;
-}
-
-.squireToolbar-dropdown-divider {
-  background-color: lighten($base, 10%);
-}
-
-.squireToolbar-select-item:hover {
-  background: darken($base, 2%);
-}
-
-// Compose window
-#pm_composer .composer,
-.composerInputMeta-overlay {
-  background: $base;
-}
-
-#pm_composer .composer .fill {
-  background: $base;
-}
-
-// Email tags present in new message window
-.autocompleteEmails-item {
-  background-color: darken($base, 2%);
-  border-color: darken($base, 2%);
-}
-
-.autocompleteEmails-label {
-  border-left: 1px solid lighten($base, 10%);
-  border-right: 1px solid lighten($base, 10%);
-}
-
-.composerOptions-container.show {
-  background: darken($base, 2%);
-
-  .shadow-container {
-    background: $base;
-    color: $text_color;
-  }
-}
-
-.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
-  background-color: darken($base, 2%);
-  border-color: lighten($base, 10%);
-  color: darken($base, 10%);
-}
-
-.pm-button-blueborder {
-  border-color: $highlight;
-  color: $highlight;
-}
-
-.pm-button-blueborder:hover {
-  border-color: lighten($highlight, 5%);
-  color: lighten($highlight, 5%);
-}
-
-[class*="squireToolbar-row"] .squireToolbar-action-mode:active, [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
-  background: lighten($base, 2%) !important;
-}
-
-.squireToolbar-separator {
-  background: lighten($base, 5%);
-}
-
-.composerTime-container,
-[class*="composer-field"] {
-  color: $text_color;
-}
-
-.composerInputMeta-overlay-fakefield {
-  border-color: $text_color;
-}
-
-// Encryption icon
-.encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
-  color: white;
-}
-
-// Message items
-.conversation {
-  border-color: lighten($base, 10%);
-}
-
-.main-area,
-.main-area--noHeader, 
-.main-area--withToolbar,
-.main-area--withToolbar--noHeader,
-[class*="block-info-"] {
-  color: $text_color;
-}
-
-[class*="block-info"] {
-  background-color: lighten($base, 10%);
-  color: $text_color;
-}
-
-.fill-global-grey {
-  fill: $highlight;
-}
-
-.starbutton {
-  fill: $extra_color;
-}
-
-// Read message
-.bg-global-light, kbd {
-  background: $base;
-}
-
-// Contacts items and header
-.item-container, .item-container-row, .contactsummary-container {
-  background: $base;
-}
-
-.items-column-list-inner, .ReactVirtualized__Grid__innerScrollContainer {
-  border-color: lighten($base, 10%);
-
-  .item-container, .item-container-row {
-    border-color: lighten($base, 10%);
-  }
-}
-
-// Unread, not active
-.item-container:not(.item-is-selected):not(.read):not(.active),
-.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container {
-  background: lighten($base, 5%);
-}
-
-// Active
-.item-container.active, .item-is-selected {
-  background: darken($base, 2%);
-  .flex-item-fluid {
-    color: $highlight;
-  }
-}
-
-// Selected message checkbox
-.item-icon {
-  background-color: $base;
-  border: 1px solid darken($text_color, 5%);
-}
-
-.selectBoxElement-container:hover .item-icon {
-  background-color: $base;
-  border: 1px solid darken($highlight, 5%);
-
-  .item-icon-fakecheck-icon {
-    fill: darken($highlight, 5%);
-  }
-}
-
-.selectBoxElement-container {
-  color: $text_color;
-}
-
-.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
-  background-color: darken($highlight, 5%);
-  border-color: darken($highlight, 5%);
-}
-
-// Message list background area
-.items-column-list,
-.elementList-container-row {
-  background-color: $base;
-}
-
-// Current message panel
-.message-header {
-  background-color: lighten($base, 5%);
-}
-
-.view-column-detail {
-  background-color: $base;
-}
-
-details:first-child {
-  border-color: lighten($base, 10%);
-}
-
-.items-column-list,
-.message-container, 
-.message-attachments {
-  border-color: lighten($base, 10%);
-}
-
-.message-container:not(.sent):not(.draft) .message-header.message-summary::before, 
-.message-header.is-inbound::before {
-  border-top: 1px solid lighten($base, 10%);
-  border-left: 1px solid lighten($base, 10%);
-  background-color: lighten($base, 5%);
-}
-
-// Mailing list block
-.message-infobox {
-  background-color: $base;
-}
-
-// Email body background, text and links
-.message-content.frame.message-frame {
-  background: white;
-  color: black;
-}
-
-.block-info-standard, .bodyDecrypted blockquote {
-  border-color: $highlight;
-}
-
-.squireDropdown-item-label {
-  color: $text_color;
-}
-
-.squireToolbar-action-color {
-  background: transparent;
-}
-
-// This forces the background of a new message to used the base color.
-.angular-squire-iframe body {
-  color: $text_color;
-  background: lighten($base, 5%);
-
-  a {
-    color: $highlight;
-  }
-}
-
-.plaintext-editor {
-  color: $text_color;
-}
-
-// Attachment button
-.pm-button, .pm-button--info, .pm-button--redborder {
-  background: $base;
-  border-color: lighten($base, 10%);
-  color: $text_color;
-}
-
-.message-attachmentInfo {
-  border-color: lighten($base, 10%);
-}
-
-.is-hover.pm-button--info, .is-hover.pm-button--redborder,
-.pm-button--info:focus, .pm-button--info:focus-within,
-.pm-button--info:hover, .pm-button--redborder:focus,
-.pm-button--redborder:focus-within, .pm-button--redborder:hover,
-.pm-button.is-hover, .pm-button:focus, 
-.pm-button:focus-within, .pm-button:hover:not(.pm-button--primary) {
-  color: $highlight;
-}
-
-.is-disabled.pm-button--info,
-.is-disabled.pm-button--redborder,
-.pm-button--info[disabled],
-.pm-button--redborder[disabled],
-.pm-button.is-disabled,
-.pm-button[disabled] {
-  background: lighten($base, 10%);
-}
-
-.is-active.pm-button--info,
-.is-active.pm-button--redborder,
-.pm-button--info:not(div):active,
-.pm-button--redborder:not(div):active,
-.pm-button.is-active, .pm-button:not(div):active {
-  background: lighten($base, 10%);
-  color: $highlight;
-}
-
-// Dropdowns
-.dropDown-content {
-  background: $base;
-  color: $text_color;
-
-  button {
-    color: $text_color;
-  }
-
-  .elementsSelector-btn-action,
-  .dropDown-item:hover {
-    color: $text_color;
-  }
-
-  .dropDown-item:hover {
-    background: lighten($base, 5%) !important;
-  }
-
-  .dropDown-item + .dropDown-item {
-    border-top: 1px solid lighten($base, 10%);
-  }
-
-  .dropDown-item {
-    .color-global-grey {
-      color: $text_color;
-    }
-  }
-}
-
-.dropDown {
-  .dropDown-content {
-    &::before, &::after {
-      border-bottom-color: $base;
-    }
-  }
-}
-
-.dropDown--right-bottom {
-  &::before {
-    border-right-color: $base;
-  }
-
-  .dropDown-content {
-    &::before, &::after {
-      background: $base;
-    }
-  }
-}
-
-.dropDown--bottom-right {
-  .dropDown-content {
-    &::before, &::after {
-      background: $base;
-    }
-  }
-}
-
-.dropDown--bottom-left::before, 
-.dropDown--bottom-right::before, 
-.dropDown--bottom::before {
-  border-bottom-color: lighten($base, 10%);
-}
-
-.dropDown--bottom-right {
-  border: 1px solid lighten($base, 10%);
-}
-
-.pm-field-icon-container[type="search"], .pm-field[type="search"] {
-  background-color: lighten($base, 5%);
-}
-
-.dropDown-contentInner {
-  background-color: $base;
-
-  &::before, &::after {
-    background-color: $base;
-  }
-
-  .dropDown-item span {
-    color: $text_color !important;
-  }
-}
-
-.searchbox-field[type="search"]:not(#global_search) {
-  background: $text_color;
-  color: $base;
-}
-
-// Links
-.link, a, .pm-button--link {
-  color: $highlight;
-}
-
-.link:active, .link:focus, .link:hover, 
-a:active, a:focus, a:hover,
-.pm-button--link:hover,
-.composerInputMeta-label:hover {
-  color: lighten($highlight, 5%);
-}
-
-// Modal
-.pm-modal, .pm-modalContentInner {
-  background-color: $base;
-  color: $text_color;
-
-  &::before, &::after {
-    background-color: $base;
-  }
-  
-  .labelColorSelector-item-mask {
-    border: 2px solid lighten($base, 15%);
-  }
-}
-
-.pm-button--primaryborder, .pm-button-blueborder {
-  border-color: $highlight;
-  color: $highlight;
-  background-color: lighten($base, 5%);
-  transition: background-color .2s ease-in-out;
-}
-
-.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus,
-.pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover,
-.pm-button-blueborder.is-hover, .pm-button-blueborder:focus,
-.pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
-  border-color: $highlight;
-  color: $highlight;
-  background-color: darken($base, 1%);
-}
-
-// Input fields
-.pm-field, .pm-field-icon-container,
-.focus.pm-field-icon-container, .pm-field-icon-container:focus,
-.pm-field-icon-container:focus-within, .pm-field.focus,
-.pm-field:focus, .pm-field:focus-within,
-.composerInputMeta-overlay-fakefield,
-.composerInputMeta-autocomplete {
-  color: $text_color;
-  background-color: lighten($base, 5%);
-
-  &::placeholder {
-    color: darken($text_color, 5%);
-  }
-}
-
-.composerInputMeta-autocomplete input {
-  color: $text_color;
-  background-color: lighten($base, 5%);
-
-  &::placeholder {
-    color: darken($text_color, 5%);
-  }
-}
-
-select.pm-field, select.pm-field-icon-container {
-  background-color: lighten($base, 5%);
-  color: $text_color;
-}
-
-// Storage progress modal
-.storageProgress-content.dropDown-content--rightbottom {
-  &::before {
-    border-right-color: $base;
-  }
-}
-
-// Settings panel
-.main-area, .main-area-content {
-  background-color: $base;
-
-  .p1 {
-    background-color: lighten($base, 5%);
-  }
-}
-
-.subnav {
-  background: lighten($base, 5%);
-  
-  .link, a {
-    color: $highlight;
-  }
-  
-  .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
-    color: lighten($highlight, 5%);
-  }
-}
-
-// Toggle button
-.pm-toggle-label {
-  border-color: lighten($base, 10%);
-  background: lighten($base, 5%);
-
-  &::before {
-    background: $base;
-  }
-
-  .pm-toggle-label-img {
-    fill: $text_color;
-  }
-}
-
-// Plans table
-.pm-plans-table-row--highlighted {
-  background-color: $base;
-}
-
-// Forms
-.pm-checkbox-fakecheck,
-.pm-radio-fakeradio {
-  border-color: $highlight;
-  background: transparent;
-}
-
-[class*="icon-"].color-primary {
-  color: $highlight;
-}
-
-.color-global-grey-dm {
-  color: $highlight;
-}
\ No newline at end of file
diff --git a/templates/blue_and_orange/blue_and_orange.scss b/templates/blue_and_orange/blue_and_orange.scss
index 6770b56..f8ddaef 100644
--- a/templates/blue_and_orange/blue_and_orange.scss
+++ b/templates/blue_and_orange/blue_and_orange.scss
@@ -20,5 +20,6 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
\ No newline at end of file
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
diff --git a/templates/dark_bubble_gum/dark_bubble_gum.scss b/templates/dark_bubble_gum/dark_bubble_gum.scss
index 65cddd0..ef32a48 100644
--- a/templates/dark_bubble_gum/dark_bubble_gum.scss
+++ b/templates/dark_bubble_gum/dark_bubble_gum.scss
@@ -20,5 +20,6 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
\ No newline at end of file
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
diff --git a/templates/deutera_one/deutera_one.scss b/templates/deutera_one/deutera_one.scss
index d409afa..e2a8ba1 100644
--- a/templates/deutera_one/deutera_one.scss
+++ b/templates/deutera_one/deutera_one.scss
@@ -20,6 +20,7 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
 @import 'override';
\ No newline at end of file
diff --git a/templates/dracula/dracula.scss b/templates/dracula/dracula.scss
index 4d99ebe..3df23cb 100644
--- a/templates/dracula/dracula.scss
+++ b/templates/dracula/dracula.scss
@@ -20,5 +20,6 @@ $warning_color: #ffb86c;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
diff --git a/templates/green_lume/green_lume.scss b/templates/green_lume/green_lume.scss
index 13e0951..4d78793 100644
--- a/templates/green_lume/green_lume.scss
+++ b/templates/green_lume/green_lume.scss
@@ -21,5 +21,6 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
\ No newline at end of file
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
diff --git a/templates/gruvbox/gruvbox.scss b/templates/gruvbox/gruvbox.scss
index 2428299..9a873e5 100644
--- a/templates/gruvbox/gruvbox.scss
+++ b/templates/gruvbox/gruvbox.scss
@@ -21,5 +21,6 @@ $warning_color: #d79921;
 $info_color: #458588;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
\ No newline at end of file
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
diff --git a/templates/monokai/monokai.scss b/templates/monokai/monokai.scss
index e0ee625..81443fa 100644
--- a/templates/monokai/monokai.scss
+++ b/templates/monokai/monokai.scss
@@ -20,5 +20,6 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
\ No newline at end of file
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
\ No newline at end of file
diff --git a/templates/ochin/ochin.scss b/templates/ochin/ochin.scss
index 2d72095..75c8da3 100644
--- a/templates/ochin/ochin.scss
+++ b/templates/ochin/ochin.scss
@@ -22,6 +22,7 @@ $warning_color: #ffaa00;
 $info_color: #1b68c6;
 
 @import "../@theme-base/styles";
-// @import "../@theme-base/full";
-// Please do not remove the import above, add overrides and other partials below this line.
+@import "../@theme-base/dark_mode";
+
+// Please do not remove the imports above, add overrides and other partials below this line.
 @import 'override';