diff --git a/src/index.html b/src/index.html
index 109f27c5b..22143839f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -107,6 +107,8 @@ <h3 id="basic-html-message">
         </article>
       </div>
     </div>
+    <div id="darkSwitch" class="darkmode-toggle" title="Turn on dark mode">🌓</div>
+    <script src="js/dark-mode-switch.js"></script>
     <script type="application/ld+json">
       {
         "@context": "http://schema.org",
diff --git a/src/js/dark-mode-switch.js b/src/js/dark-mode-switch.js
new file mode 100644
index 000000000..21c3db559
--- /dev/null
+++ b/src/js/dark-mode-switch.js
@@ -0,0 +1,47 @@
+(function() {
+  const darkSwitch = document.getElementById('darkSwitch');
+
+  const turnOnDarkMode = (save) => {
+    document.body.setAttribute('data-theme', 'dark');
+    darkSwitch.classList.add('darkModeOn');
+    darkSwitch.setAttribute('title', 'Turn off dark mode');
+    if (save) localStorage.setItem('darkSwitch', 'on');
+  };
+
+  const turnOffDarkMode = (save) => {
+    document.body.removeAttribute('data-theme');
+    darkSwitch.classList.remove('darkModeOn');
+    darkSwitch.setAttribute('title', 'Turn on dark mode');
+    if (save) localStorage.setItem('darkSwitch', 'off');
+  };
+
+  const init = () => {
+    // 1. check app setting
+    if (
+      localStorage.getItem('darkSwitch') !== null &&
+      localStorage.getItem('darkSwitch') === 'on'
+    ) {
+      turnOnDarkMode(false);
+    }
+    // 2. check system setting
+    else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      turnOnDarkMode(false);
+    } else {
+      turnOffDarkMode(false);
+    }
+  };
+
+  const toggle = () =>
+    darkSwitch.classList.contains('darkModeOn')
+      ? turnOffDarkMode(true)
+      : turnOnDarkMode(true);
+
+  window.addEventListener('load', function() {
+    if (darkSwitch) {
+      init();
+      darkSwitch.addEventListener('click', function() {
+        toggle();
+      });
+    }
+  });
+})();
diff --git a/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js b/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js
index aac0291bc..59606b8f9 100644
--- a/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js
+++ b/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js
@@ -364,7 +364,10 @@ define([
 
                 return (
                   <tr
-                    className={activeItem === id ? 'info' : ''}
+                    className={
+                      (activeItem === id ? 'info ' : '') +
+                      (item.active ? '' : 'inactive')
+                    }
                     style={{
                       backgroundColor: item.active
                         ? 'inherit'
diff --git a/src/js/react/MyAdsFreeform/components/CollapsePanel.jsx.js b/src/js/react/MyAdsFreeform/components/CollapsePanel.jsx.js
index abdc81274..81d688584 100644
--- a/src/js/react/MyAdsFreeform/components/CollapsePanel.jsx.js
+++ b/src/js/react/MyAdsFreeform/components/CollapsePanel.jsx.js
@@ -35,32 +35,18 @@ define(['react', 'prop-types', 'react-bootstrap'], function(
       const caretDir = this.state.open ? 'down' : 'right';
       return (
         <Panel expanded={this.state.open} onToggle={this.toggle}>
-          <Panel.Heading style={{ backgroundColor: 'white', padding: '0' }}>
+          <Panel.Heading style={{ padding: '0' }}>
             <Panel.Title>
               <button
-                className="btn btn-link btn-block"
+                className="create-notification-title btn btn-link btn-block"
                 onMouseEnter={this.toggleHover}
                 onMouseLeave={this.toggleHover}
                 onFocus={this.onChangeFocus(true)}
                 onBlur={this.onChangeFocus(false)}
-                style={{
-                  color: '#5D5D5D',
-                  fontSize: '1.1em',
-                  backgroundColor:
-                    this.state.hovered || this.state.focused
-                      ? '#f2f2f2'
-                      : 'white',
-                  textDecoration: 'none',
-                }}
                 aria-expanded={this.state.open}
                 onClick={this.toggle}
               >
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                  }}
-                >
+                <div className="s-create-notification-title__title">
                   <span>
                     <i className="fa fa-bell" aria-hidden="true" /> Create email
                     notification
diff --git a/src/js/react/Recommender/components/SearchExamples.jsx.js b/src/js/react/Recommender/components/SearchExamples.jsx.js
index 28ac5f45d..abfd4a872 100644
--- a/src/js/react/Recommender/components/SearchExamples.jsx.js
+++ b/src/js/react/Recommender/components/SearchExamples.jsx.js
@@ -25,12 +25,7 @@ define([
       <React.Fragment>
         <dt>{label}</dt>
         <dd>
-          <button
-            type="button"
-            onClick={onClick}
-            className="text-link"
-            style={{ border: 'dotted 1px rgba(0,0,0,0.3)', marginRight: '4px' }}
-          >
+          <button type="button" onClick={onClick} className="text-link">
             {text}
           </button>
           {tooltip && (
diff --git a/src/js/widgets/associated/components/app.jsx.js b/src/js/widgets/associated/components/app.jsx.js
index 6ce12acd2..2658401b8 100644
--- a/src/js/widgets/associated/components/app.jsx.js
+++ b/src/js/widgets/associated/components/app.jsx.js
@@ -1,11 +1,6 @@
 define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
   // component styles
   const styles = {
-    title: {
-      fontSize: '1.1em',
-      color: '#335baf',
-      textTransform: 'uppercase',
-    },
     list: {
       listStyleType: 'none',
       marginLeft: '-10px',
@@ -22,7 +17,7 @@ define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
 
   // create the title element
   const Title = ({ children }) => (
-    <div style={styles.title}>
+    <div className="associated__header__title">
       <i className="fa fa-folder-open" style={styles.icon} aria-hidden="true" />
       {children}
     </div>
diff --git a/src/js/widgets/classic_form/form.html b/src/js/widgets/classic_form/form.html
index a903ae98f..dd46de23d 100644
--- a/src/js/widgets/classic_form/form.html
+++ b/src/js/widgets/classic_form/form.html
@@ -193,7 +193,7 @@
     </div>
   </div>
   <div class="pull-right">
-    <button class="btn" type="reset">
+    <button class="btn btn-default" type="reset">
       <i class="fa fa-times" aria-hidden="true"></i> Clear
     </button>
     <button class="btn btn-primary" type="submit">
diff --git a/src/js/widgets/list_of_things/templates/pagination-partial.html b/src/js/widgets/list_of_things/templates/pagination-partial.html
index c154fec35..c6ed64860 100644
--- a/src/js/widgets/list_of_things/templates/pagination-partial.html
+++ b/src/js/widgets/list_of_things/templates/pagination-partial.html
@@ -7,7 +7,7 @@
 </div>
 {{#unless query}}
 {{#unless error}}
-<div class="row">
+<div class="row" style="margin: 0;">
     {{#if pageData}}
     <div class="col-sm-12 pagination-controls s-pagination-controls">
         <div class="col-xs-5 per-page-container">
diff --git a/src/js/widgets/paper_search_form/form.html b/src/js/widgets/paper_search_form/form.html
index 965b49f31..5033e5e37 100644
--- a/src/js/widgets/paper_search_form/form.html
+++ b/src/js/widgets/paper_search_form/form.html
@@ -55,7 +55,7 @@
       <button type="submit" class="btn btn-primary">
         <i class="fa fa-search" aria-hidden="true"></i> Search
       </button>
-      <button type="reset" class="btn">
+      <button type="reset" class="btn btn-default">
         <i class="fa fa-times" aria-hidden="true"></i> Clear
       </button>
     </form>
@@ -86,7 +86,7 @@
       <button type="submit" class="btn btn-primary">
         <i class="fa fa-search" aria-hidden="true"></i> Search
       </button>
-      <button type="reset" class="btn">
+      <button type="reset" class="btn btn-default">
         <i class="fa fa-times" aria-hidden="true"></i> Clear
       </button>
     </form>
@@ -119,7 +119,7 @@
       <button type="submit" class="btn btn-primary">
         <i class="fa fa-search" aria-hidden="true"></i> Search
       </button>
-      <button type="reset" class="btn">
+      <button type="reset" class="btn btn-default">
         <i class="fa fa-times" aria-hidden="true"></i> Clear
       </button>
     </form>
diff --git a/src/styles/img/dark-bg.jpg b/src/styles/img/dark-bg.jpg
new file mode 100644
index 000000000..f2bd52b95
Binary files /dev/null and b/src/styles/img/dark-bg.jpg differ
diff --git a/src/styles/img/dark-bg.png b/src/styles/img/dark-bg.png
new file mode 100644
index 000000000..005ef764b
Binary files /dev/null and b/src/styles/img/dark-bg.png differ
diff --git a/src/styles/sass/ads-sass/bootstrap-variables.scss b/src/styles/sass/ads-sass/bootstrap-variables.scss
index 1fe015707..6c962a36f 100644
--- a/src/styles/sass/ads-sass/bootstrap-variables.scss
+++ b/src/styles/sass/ads-sass/bootstrap-variables.scss
@@ -21,6 +21,44 @@ $brand-success:        #54a05c;
 $brand-warning:        #EE8E29;
 $brand-danger:         #E44830;
 
+// dark mode colors
+$darkmode-background: #010409;
+$darkmode-background-secondary: #0d1117;
+$darkmode-background-tertiary: #21262d;
+$darkmode-border: #30363d;
+$darkmode-text: #c9d1d9;
+$darkmode-text-strong: #eee;
+$darkmode-text-secondary: #8b949e;
+$darkmode-text-dim: #8b949e;
+$darkmode-text-dimmer: #484f58;
+$darkmode-text-disabled: #30363d;
+$darkmode-link: #58a6ff;
+$darkmode-input-bg: #21262d;
+$darkmode-input-border: #464545;
+$darkmode-input-border-focus: #388bfd;
+$darkmode-dropdown-bg:#21262d;
+$darkmode-dropdown-text: #c9d1d9;
+$darkmode-dropdown-highlight-bg: #0d1117;
+$darkmode-dropdown-highlight-text: #c9d1d9;
+$darkmode-selected-bg: #1f6feb;
+$darkmode-selected-text: #f0f6fc;
+$darkmode-container: #0d1117;
+$darkmode-container-border: #30363d;
+$darkmode-btn-primary: #375a7f;
+$darkmode-btn-default-text: #c9d1d9;
+$darkmode-btn-default-bg: #21262d;
+$darkmode-btn-default-border: #8b949e;
+$darkmode-btn-default-border-highlight: #c9d1d9;
+$darkmode-btn-hightlight-bg: #388bfd;
+$darkmode-btn-hightlight-border: #388bfd;
+$darkmode-danger: #e74c3c;
+$darkmode-info: #3498db;
+$darkmode-primary: #375a7f;
+$darkmode-secondary: #444;
+$darkmode-success: #00bc8c;
+$darkmode-warning: #f39c12;
+$darkmode-light: #adb5bd;
+
 //extra colors
 $brand-primary-faded: lighten($brand-primary, 20%);
 $subtle-brand-primary : desaturate($brand-primary, 40%);
diff --git a/src/styles/sass/ads-sass/dark-mode.scss b/src/styles/sass/ads-sass/dark-mode.scss
new file mode 100644
index 000000000..05e35ac33
--- /dev/null
+++ b/src/styles/sass/ads-sass/dark-mode.scss
@@ -0,0 +1,1593 @@
+.darkmode-toggle {
+  background: #100f2c;
+  width: 4rem;
+  height: 4rem;
+  position: fixed;
+  border-radius: 50%;
+  right: 32px;
+  bottom: 32px;
+  left: unset;
+  cursor: pointer;
+  transition: all 0.5s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
+[data-theme='dark'] {
+  /* if using background
+  background-image: url(../img/dark-bg.png);
+  background-size: cover;
+  background-attachment: fixed;
+  */
+  background-color: $darkmode-background !important;
+  color: $darkmode-text;
+
+  .darkmode-toggle {
+    background: #fff;
+  }
+
+  /* if using background
+  .s-starry-background-wrapper {
+    background-image: none;
+  }
+  */
+
+  a,
+  a:hover,
+  a:focus,
+  a:active {
+    color: $darkmode-link;
+  }
+
+  .alert {
+    color: #fff;
+    a {
+      color: #fff;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+
+  .alert-success {
+    background-color: $darkmode-success;
+  }
+
+  .alert-danger {
+    background-color: $darkmode-danger;
+  }
+
+  .alert-info {
+    background-color: $darkmode-info;
+  }
+
+  .alert-primary {
+    background-color: $darkmode-primary;
+  }
+
+  .alert-secondary {
+    background-color: $darkmode-secondary;
+  }
+
+  .alert-light {
+    background-color: $darkmode-light;
+  }
+
+  .alert-warning {
+    background-color: $darkmode-warning;
+  }
+
+  code {
+    background-color: $darkmode-input-bg;
+    color: $darkmode-text;
+  }
+
+  .bg-light {
+    background-color: #333 !important;
+  }
+
+  .bg-white {
+    background-color: #000 !important;
+  }
+
+  .bg-black {
+    background-color: $darkmode-text !important;
+  }
+
+  .jumbotron {
+    background-color: $darkmode-container !important;
+  }
+
+  .footer {
+    background-color: $darkmode-container !important;
+  }
+
+  .modal-content {
+    background-color: $darkmode-container !important;
+    border: 1px solid $darkmode-container-border !important;
+  }
+
+  .modal-header {
+    border-bottom: 1px solid $darkmode-container-border !important;
+    .modal-title,
+    .close {
+      background-color: $darkmode-container !important;
+      color: $darkmode-text;
+    }
+  }
+
+  .modal-footer {
+    border-top: 1px solid $darkmode-container-border !important;
+  }
+
+  .panel {
+    background-color: $darkmode-container;
+    border-radius: 5px;
+  }
+
+  .panel-body {
+    background-color: $darkmode-container !important;
+  }
+
+  .panel-heading {
+    border-bottom: 1px solid transparent;
+  }
+
+  .panel-heading > .dropdown .dropdown-toggle {
+    color: inherit;
+  }
+
+  .panel-footer {
+    background-color: #464545;
+    border-top: 1px solid #464545;
+  }
+
+  .panel-default {
+    border-color: #464545;
+    box-shadow: none;
+  }
+
+  .panel-default > .panel-heading {
+    color: #ffffff;
+    background-color: $darkmode-container;
+    border-color: #464545;
+  }
+
+  .panel-default > .panel-heading + .panel-collapse > .panel-body {
+    border-top-color: #464545;
+  }
+
+  .panel-default > .panel-heading .badge {
+    color: $darkmode-container;
+    background-color: #ffffff;
+  }
+
+  .panel-default > .panel-footer + .panel-collapse > .panel-body {
+    border-bottom-color: #464545;
+  }
+
+  .well {
+    background-color: $darkmode-container;
+    border: 1px solid $darkmode-container-border;
+    border-radius: 5px;
+  }
+
+  .well blockquote {
+    border-color: #ddd;
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
+  .form-control[disabled],
+  [disabled].export-start-val,
+  [disabled].export-end-val,
+  [disabled].show-slider-data-first,
+  [disabled].show-slider-data-second,
+  fieldset[disabled] .form-control,
+  fieldset[disabled] .export-start-val,
+  fieldset[disabled] .export-end-val,
+  fieldset[disabled] .show-slider-data-first,
+  fieldset[disabled] .show-slider-data-second {
+    background-color: $darkmode-background;
+    border-color: $darkmode-background-tertiary;
+    color: $darkmode-text-dimmer;
+  }
+
+  .form-control[readonly],
+  [readonly].export-start-val,
+  [readonly].export-end-val,
+  [readonly].show-slider-data-first,
+  [readonly].show-slider-data-second {
+    background-color: $darkmode-background;
+    border-color: $darkmode-background-tertiary;
+    color: $darkmode-text-dim;
+  }
+
+  .editable-item form {
+    background-color: $darkmode-background;
+  }
+
+  table {
+    background-color: transparent;
+    color: $darkmode-text;
+  }
+
+  caption {
+    color: #999999;
+  }
+  .table > thead > tr > th,
+  .table > tbody > tr > th,
+  .table > tfoot > tr > th,
+  .table > thead > tr > td,
+  .table > tbody > tr > td,
+  .table > tfoot > tr > td {
+    border-top: 1px solid #464545;
+  }
+
+  .table > thead > tr > th {
+    border-bottom: 2px solid #464545;
+  }
+
+  .table > tbody + tbody {
+    border-top: 2px solid #464545;
+  }
+
+  .table .table {
+    background-color: #222222;
+  }
+
+  .table-bordered {
+    border: 1px solid #464545;
+  }
+
+  .table-bordered > thead > tr > th,
+  .table-bordered > tbody > tr > th,
+  .table-bordered > tfoot > tr > th,
+  .table-bordered > thead > tr > td,
+  .table-bordered > tbody > tr > td,
+  .table-bordered > tfoot > tr > td {
+    border: 1px solid #464545;
+  }
+
+  .table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #3d3d3d;
+  }
+
+  .table-hover > tbody > tr:hover {
+    background-color: $darkmode-input-bg;
+  }
+
+  .table > thead > tr > td.active,
+  .table > tbody > tr > td.active,
+  .table > tfoot > tr > td.active,
+  .table > thead > tr > th.active,
+  .table > tbody > tr > th.active,
+  .table > tfoot > tr > th.active,
+  .table > thead > tr.active > td,
+  .table > tbody > tr.active > td,
+  .table > tfoot > tr.active > td,
+  .table > thead > tr.active > th,
+  .table > tbody > tr.active > th,
+  .table > tfoot > tr.active > th {
+    background-color: #464545;
+  }
+
+  .table-hover > tbody > tr > td.active:hover,
+  .table-hover > tbody > tr > th.active:hover,
+  .table-hover > tbody > tr.active:hover > td,
+  .table-hover > tbody > tr:hover > .active,
+  .table-hover > tbody > tr.active:hover > th {
+    background-color: #393838;
+  }
+
+  .table > thead > tr > td.success,
+  .table > tbody > tr > td.success,
+  .table > tfoot > tr > td.success,
+  .table > thead > tr > th.success,
+  .table > tbody > tr > th.success,
+  .table > tfoot > tr > th.success,
+  .table > thead > tr.success > td,
+  .table > tbody > tr.success > td,
+  .table > tfoot > tr.success > td,
+  .table > thead > tr.success > th,
+  .table > tbody > tr.success > th,
+  .table > tfoot > tr.success > th {
+    background-color: $darkmode-success;
+  }
+
+  .table-hover > tbody > tr > td.success:hover,
+  .table-hover > tbody > tr > th.success:hover,
+  .table-hover > tbody > tr.success:hover > td,
+  .table-hover > tbody > tr:hover > .success,
+  .table-hover > tbody > tr.success:hover > th {
+    background-color: #00a379;
+  }
+
+  .table > thead > tr > td.info,
+  .table > tbody > tr > td.info,
+  .table > tfoot > tr > td.info,
+  .table > thead > tr > th.info,
+  .table > tbody > tr > th.info,
+  .table > tfoot > tr > th.info,
+  .table > thead > tr.info > td,
+  .table > tbody > tr.info > td,
+  .table > tfoot > tr.info > td,
+  .table > thead > tr.info > th,
+  .table > tbody > tr.info > th,
+  .table > tfoot > tr.info > th {
+    background-color: $darkmode-info;
+  }
+
+  .table-hover > tbody > tr > td.info:hover,
+  .table-hover > tbody > tr > th.info:hover,
+  .table-hover > tbody > tr.info:hover > td,
+  .table-hover > tbody > tr:hover > .info,
+  .table-hover > tbody > tr.info:hover > th {
+    background-color: #258cd1;
+  }
+
+  .table > thead > tr > td.warning,
+  .table > tbody > tr > td.warning,
+  .table > tfoot > tr > td.warning,
+  .table > thead > tr > th.warning,
+  .table > tbody > tr > th.warning,
+  .table > tfoot > tr > th.warning,
+  .table > thead > tr.warning > td,
+  .table > tbody > tr.warning > td,
+  .table > tfoot > tr.warning > td,
+  .table > thead > tr.warning > th,
+  .table > tbody > tr.warning > th,
+  .table > tfoot > tr.warning > th {
+    background-color: $darkmode-warning;
+  }
+
+  .table-hover > tbody > tr > td.warning:hover,
+  .table-hover > tbody > tr > th.warning:hover,
+  .table-hover > tbody > tr.warning:hover > td,
+  .table-hover > tbody > tr:hover > .warning,
+  .table-hover > tbody > tr.warning:hover > th {
+    background-color: #e08e0b;
+  }
+
+  .table > thead > tr > td.danger,
+  .table > tbody > tr > td.danger,
+  .table > tfoot > tr > td.danger,
+  .table > thead > tr > th.danger,
+  .table > tbody > tr > th.danger,
+  .table > tfoot > tr > th.danger,
+  .table > thead > tr.danger > td,
+  .table > tbody > tr.danger > td,
+  .table > tfoot > tr.danger > td,
+  .table > thead > tr.danger > th,
+  .table > tbody > tr.danger > th,
+  .table > tfoot > tr.danger > th {
+    background-color: $darkmode-danger;
+  }
+
+  .table-hover > tbody > tr > td.danger:hover,
+  .table-hover > tbody > tr > th.danger:hover,
+  .table-hover > tbody > tr.danger:hover > td,
+  .table-hover > tbody > tr:hover > .danger,
+  .table-hover > tbody > tr.danger:hover > th {
+    background-color: $darkmode-danger;
+  }
+  .btn:hover,
+  .btn:focus,
+  .btn.focus {
+    background-color: $darkmode-btn-hightlight-bg;
+    border-color: $darkmode-btn-hightlight-bg;
+    color: $darkmode-btn-default-text;
+    text-decoration: none;
+  }
+
+  .btn:active,
+  .btn.active {
+    background-image: none;
+    outline: 0;
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  }
+
+  .btn.disabled,
+  .btn[disabled],
+  fieldset[disabled] .btn {
+    cursor: not-allowed;
+    filter: alpha(opacity=65);
+    opacity: 0.65;
+    box-shadow: none;
+  }
+
+  a.btn.disabled,
+  fieldset[disabled] a.btn {
+    pointer-events: none;
+  }
+
+  .btn-default {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-btn-default-bg;
+    border-color: $darkmode-btn-default-border;
+  }
+
+  .btn-default:focus,
+  .btn-default.focus {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-btn-default-bg;
+    border-color: $darkmode-btn-default-border-highlight;
+  }
+
+  .btn-default:hover {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-btn-default-bg;
+    border-color: $darkmode-btn-default-border-highlight;
+  }
+
+  .btn-default:active,
+  .btn-default.active,
+  .open > .dropdown-toggle.btn-default {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-btn-default-bg;
+    border-color: $darkmode-btn-default-border-highlight;
+  }
+
+  .btn-default:active:hover,
+  .btn-default.active:hover,
+  .open > .dropdown-toggle.btn-default:hover,
+  .btn-default:active:focus,
+  .btn-default.active:focus,
+  .open > .dropdown-toggle.btn-default:focus,
+  .btn-default:active.focus,
+  .btn-default.active.focus,
+  .open > .dropdown-toggle.btn-default.focus {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-btn-default-bg;
+    border-color: $darkmode-btn-default-border-highlight;
+  }
+
+  .btn-default.disabled:hover,
+  .btn-default[disabled]:hover,
+  fieldset[disabled] .btn-default:hover,
+  .btn-default.disabled:focus,
+  .btn-default[disabled]:focus,
+  fieldset[disabled] .btn-default:focus,
+  .btn-default.disabled.focus,
+  .btn-default[disabled].focus,
+  fieldset[disabled] .btn-default.focus {
+    background-color: #464545;
+    border-color: #464545;
+  }
+
+  .btn-default .badge {
+    color: #464545;
+    background-color: $darkmode-btn-default-text;
+  }
+
+  .btn-primary,
+  .btn-primary-faded,
+  .input-group-addon {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-btn-primary;
+    border-color: $darkmode-btn-primary;
+  }
+
+  .btn-primary:focus,
+  .btn-primary.focus,
+  .btn-primary-faded:focus,
+  .btn-primary-faded.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #28415b;
+    border-color: #101b26;
+  }
+
+  .btn-primary:hover,
+  .btn-primary-faded:hover {
+    color: $darkmode-btn-default-text;
+    background-color: #28415b;
+    border-color: #253c54;
+  }
+
+  .btn-primary:active,
+  .btn-primary.active,
+  .btn-primary-faded:active,
+  .btn-primary-faded.active,
+  .open > .dropdown-toggle.btn-primary {
+    color: $darkmode-btn-default-text;
+    background-color: #28415b;
+    background-image: none;
+    border-color: #253c54;
+  }
+
+  .btn-primary:active:hover,
+  .btn-primary.active:hover,
+  .open > .dropdown-toggle.btn-primary:hover,
+  .btn-primary:active:focus,
+  .btn-primary.active:focus,
+  .open > .dropdown-toggle.btn-primary:focus,
+  .btn-primary:active.focus,
+  .btn-primary.active.focus,
+  .open > .dropdown-toggle.btn-primary.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #1d2f43;
+    border-color: #101b26;
+  }
+
+  .btn-primary.disabled:hover,
+  .btn-primary[disabled]:hover,
+  fieldset[disabled] .btn-primary:hover,
+  .btn-primary.disabled:focus,
+  .btn-primary[disabled]:focus,
+  fieldset[disabled] .btn-primary:focus,
+  .btn-primary.disabled.focus,
+  .btn-primary[disabled].focus,
+  fieldset[disabled] .btn-primary.focus {
+    background-color: $darkmode-btn-primary;
+    border-color: $darkmode-btn-primary;
+  }
+
+  .btn-primary .badge {
+    color: $darkmode-btn-primary;
+    background-color: $darkmode-btn-default-text;
+  }
+
+  .btn-success {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-success;
+    border-color: $darkmode-success;
+  }
+
+  .btn-success:focus,
+  .btn-success.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #008966;
+    border-color: #003d2d;
+  }
+
+  .btn-success:hover {
+    color: $darkmode-btn-default-text;
+    background-color: #008966;
+    border-color: #007f5e;
+  }
+
+  .btn-success:active,
+  .btn-success.active,
+  .open > .dropdown-toggle.btn-success {
+    color: $darkmode-btn-default-text;
+    background-color: #008966;
+    background-image: none;
+    border-color: #007f5e;
+  }
+
+  .btn-success:active:hover,
+  .btn-success.active:hover,
+  .open > .dropdown-toggle.btn-success:hover,
+  .btn-success:active:focus,
+  .btn-success.active:focus,
+  .open > .dropdown-toggle.btn-success:focus,
+  .btn-success:active.focus,
+  .btn-success.active.focus,
+  .open > .dropdown-toggle.btn-success.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #00654b;
+    border-color: #003d2d;
+  }
+
+  .btn-success.disabled:hover,
+  .btn-success[disabled]:hover,
+  fieldset[disabled] .btn-success:hover,
+  .btn-success.disabled:focus,
+  .btn-success[disabled]:focus,
+  fieldset[disabled] .btn-success:focus,
+  .btn-success.disabled.focus,
+  .btn-success[disabled].focus,
+  fieldset[disabled] .btn-success.focus {
+    background-color: $darkmode-success;
+    border-color: $darkmode-success;
+  }
+
+  .btn-success .badge {
+    color: $darkmode-success;
+    background-color: $darkmode-btn-default-text;
+  }
+
+  .btn-info {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-info;
+    border-color: $darkmode-info;
+  }
+
+  .btn-info:focus,
+  .btn-info.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #217dbb;
+    border-color: #16527a;
+  }
+
+  .btn-info:hover {
+    color: $darkmode-btn-default-text;
+    background-color: #217dbb;
+    border-color: #2077b2;
+  }
+
+  .btn-info:active,
+  .btn-info.active,
+  .open > .dropdown-toggle.btn-info {
+    color: $darkmode-btn-default-text;
+    background-color: #217dbb;
+    background-image: none;
+    border-color: #2077b2;
+  }
+
+  .btn-info:active:hover,
+  .btn-info.active:hover,
+  .open > .dropdown-toggle.btn-info:hover,
+  .btn-info:active:focus,
+  .btn-info.active:focus,
+  .open > .dropdown-toggle.btn-info:focus,
+  .btn-info:active.focus,
+  .btn-info.active.focus,
+  .open > .dropdown-toggle.btn-info.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #1c699d;
+    border-color: #16527a;
+  }
+
+  .btn-info.disabled:hover,
+  .btn-info[disabled]:hover,
+  fieldset[disabled] .btn-info:hover,
+  .btn-info.disabled:focus,
+  .btn-info[disabled]:focus,
+  fieldset[disabled] .btn-info:focus,
+  .btn-info.disabled.focus,
+  .btn-info[disabled].focus,
+  fieldset[disabled] .btn-info.focus {
+    background-color: $darkmode-info;
+    border-color: $darkmode-info;
+  }
+
+  .btn-info .badge {
+    color: $darkmode-info;
+    background-color: $darkmode-btn-default-text;
+  }
+
+  .btn-warning {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-warning;
+    border-color: $darkmode-warning;
+  }
+
+  .btn-warning:focus,
+  .btn-warning.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #c87f0a;
+    border-color: #7f5006;
+  }
+
+  .btn-warning:hover {
+    color: $darkmode-btn-default-text;
+    background-color: #c87f0a;
+    border-color: #be780a;
+  }
+
+  .btn-warning:active,
+  .btn-warning.active,
+  .open > .dropdown-toggle.btn-warning {
+    color: $darkmode-btn-default-text;
+    background-color: #c87f0a;
+    background-image: none;
+    border-color: #be780a;
+  }
+
+  .btn-warning:active:hover,
+  .btn-warning.active:hover,
+  .open > .dropdown-toggle.btn-warning:hover,
+  .btn-warning:active:focus,
+  .btn-warning.active:focus,
+  .open > .dropdown-toggle.btn-warning:focus,
+  .btn-warning:active.focus,
+  .btn-warning.active.focus,
+  .open > .dropdown-toggle.btn-warning.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #a66908;
+    border-color: #7f5006;
+  }
+
+  .btn-warning.disabled:hover,
+  .btn-warning[disabled]:hover,
+  fieldset[disabled] .btn-warning:hover,
+  .btn-warning.disabled:focus,
+  .btn-warning[disabled]:focus,
+  fieldset[disabled] .btn-warning:focus,
+  .btn-warning.disabled.focus,
+  .btn-warning[disabled].focus,
+  fieldset[disabled] .btn-warning.focus {
+    background-color: $darkmode-warning;
+    border-color: $darkmode-warning;
+  }
+
+  .btn-warning .badge {
+    color: $darkmode-warning;
+    background-color: $darkmode-btn-default-text;
+  }
+
+  .btn-danger {
+    color: $darkmode-btn-default-text;
+    background-color: $darkmode-danger;
+    border-color: $darkmode-danger;
+  }
+
+  .btn-danger:focus,
+  .btn-danger.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #d62c1a;
+    border-color: #921e12;
+  }
+
+  .btn-danger:hover {
+    color: $darkmode-btn-default-text;
+    background-color: #d62c1a;
+    border-color: #cd2a19;
+  }
+
+  .btn-danger:active,
+  .btn-danger.active,
+  .open > .dropdown-toggle.btn-danger {
+    color: $darkmode-btn-default-text;
+    background-color: #d62c1a;
+    background-image: none;
+    border-color: #cd2a19;
+  }
+
+  .btn-danger:active:hover,
+  .btn-danger.active:hover,
+  .open > .dropdown-toggle.btn-danger:hover,
+  .btn-danger:active:focus,
+  .btn-danger.active:focus,
+  .open > .dropdown-toggle.btn-danger:focus,
+  .btn-danger:active.focus,
+  .btn-danger.active.focus,
+  .open > .dropdown-toggle.btn-danger.focus {
+    color: $darkmode-btn-default-text;
+    background-color: #b62516;
+    border-color: #921e12;
+  }
+
+  .btn-link {
+    font-weight: 400;
+  }
+
+  .btn-link,
+  .btn-link:active,
+  .btn-link.active,
+  .btn-link[disabled],
+  fieldset[disabled] .btn-link {
+    color: $darkmode-link;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  .btn-link,
+  .btn-link:hover,
+  .btn-link:focus,
+  .btn-link:active {
+    border-color: transparent;
+  }
+
+  .btn-link:hover,
+  .btn-link:focus {
+    color: $darkmode-link;
+    text-decoration: underline;
+    background-color: transparent;
+  }
+
+  .btn-link[disabled]:hover,
+  fieldset[disabled] .btn-link:hover,
+  .btn-link[disabled]:focus,
+  fieldset[disabled] .btn-link:focus {
+    color: #999999;
+    text-decoration: none;
+  }
+
+  .nav-tabs {
+    border-color: $darkmode-border;
+  }
+
+  .nav-tabs > li > a {
+    background-color: $darkmode-background;
+    border-color: $darkmode-border;
+    color: $darkmode-text-dim;
+    border-radius: 2px;
+    border: none;
+    border-bottom: 1px solid $darkmode-border;
+  }
+
+  .nav-tabs > li.active > a,
+  .nav-tabs > li.active > a:focus,
+  .nav-tabs > li.active > a:hover {
+    background-color: $darkmode-background;
+    color: $darkmode-selected-text;
+    border-bottom: none;
+    border-left: 1px solid $darkmode-border;
+    border-top: 1px solid $darkmode-border;
+    border-right: 1px solid $darkmode-border;
+    border-radius: 2px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    color: $darkmode-text;
+  }
+
+  .default-box-shadow,
+  .s-ads-card,
+  .s-tabs-widget .tab-content,
+  .facet__dropdown,
+  .ui-autocomplete,
+  .s-all-libraries-widget,
+  .library-detail-view,
+  .library-widget .main,
+  .s-main-content-container,
+  .s-inner-div-background > div,
+  .s-results-page-layout .s-left-col-container,
+  .s-right-col-widget-container,
+  .s-link-details,
+  .s-query-info-widget .s-library-area,
+  .s-form-widget .panel-default {
+    box-shadow: none;
+    border-color: $darkmode-border;
+    border-radius: 5px;
+  }
+
+  hr {
+    border-color: $darkmode-border;
+  }
+
+  input {
+    background-color: $darkmode-input-bg;
+    color: $darkmode-text;
+    border-color: $darkmode-input-border;
+    border-radius: 5px;
+
+    &:focus {
+      border-color: $darkmode-input-border-focus;
+    }
+  }
+
+  textarea {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+    color: $darkmode-text;
+    border-radius: 5px;
+  }
+
+  select {
+    background-color: $darkmode-input-bg;
+    color: $darkmode-text;
+    border-color: $darkmode-input-border;
+    border-radius: 5px;
+  }
+
+  /* search page */
+  .s-landing-page-layout
+    .search-bar-rows-container.s-search-bar-rows-container {
+    background: transparent;
+  }
+
+  .s-dynamic-page-body,
+  .s-results-control-row-container {
+    background: transparent;
+    border-bottom-color: $darkmode-border;
+    box-shadow: none;
+  }
+
+  #search-results-actions {
+    border-bottom: none;
+    background: transparent;
+    &.sticky {
+      background-color: $darkmode-background;
+      border-bottom: 1px solid $darkmode-border;
+    }
+  }
+
+  .border-default-light,
+  .s-stable-search-bar-height {
+    border-color: $darkmode-border;
+  }
+
+  button.text-link {
+    border: 2px solid $darkmode-container-border;
+  }
+
+  .classic-form label {
+    color: $darkmode-text;
+  }
+
+  legend {
+    color: $darkmode-text;
+  }
+
+  .landing-faq .col-sm-4:hover {
+    background-color: $darkmode-container;
+  }
+
+  .s-landing-tabs .landing-tab:not(.active) a {
+    color: $darkmode-text-dim !important;
+  }
+
+  .s-landing-tabs .landing-tab.active {
+    background-color: $darkmode-background;
+    border-left: 2px solid $darkmode-border;
+    border-top: 2px solid $darkmode-border;
+    border-right: 2px solid $darkmode-border;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    a {
+      color: $darkmode-selected-text !important;
+    }
+  }
+
+  .select2-dropdown {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+  }
+
+  .select2-selection {
+    background-color: $darkmode-input-bg;
+    color: $darkmode-text;
+    border-color: $darkmode-input-border;
+  }
+
+  .select2-container--default {
+    .select2-selection--single .select2-selection__placeholder {
+      color: $darkmode-link;
+    }
+
+    .select2-results__option--highlighted[aria-selected] {
+      color: $darkmode-dropdown-highlight-text;
+      background-color: $darkmode-dropdown-highlight-bg;
+    }
+
+    .select2-search--dropdown .select2-search__field {
+      background-color: $darkmode-input-bg;
+      border-color: $darkmode-input-border;
+      border-radius: 2px;
+    }
+  }
+
+  .navbar-nav .btn-link {
+    color: #c4c4c4;
+  }
+
+  .s-text-bold,
+  strong {
+    color: $darkmode-text-strong;
+  }
+
+  .dropdown-menu {
+    background-color: $darkmode-dropdown-bg;
+
+    li.no-hover-style {
+      color: $darkmode-dropdown-text;
+      &:hover {
+        background-color: $darkmode-dropdown-bg !important;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $darkmode-dropdown-text;
+        &:hover {
+          background-color: $darkmode-dropdown-bg !important;
+        }
+      }
+
+      a,
+      a:hover {
+        color: $darkmode-dropdown-text;
+        background-color: $darkmode-dropdown-bg !important;
+      }
+    }
+
+    li:not(.divider):not(.no-hover-style) {
+      color: $darkmode-dropdown-text;
+      background-color: $darkmode-dropdown-bg;
+      &:hover {
+        color: $darkmode-dropdown-text;
+        background-color: $darkmode-dropdown-highlight-bg;
+      }
+      a {
+        color: $darkmode-dropdown-text;
+        background-color: $darkmode-dropdown-bg;
+      }
+      a:hover {
+        color: $darkmode-dropdown-text;
+        background-color: $darkmode-dropdown-highlight-bg;
+      }
+    }
+  }
+
+  .landing-faq {
+    border-color: $darkmode-border;
+
+    a {
+      color: $darkmode-link !important;
+    }
+  }
+
+  .s-darker-background {
+    background: transparent;
+  }
+
+  #feedback-select-group a {
+    background: transparent;
+    color: $darkmode-text;
+    border-color: $darkmode-container-border;
+  }
+
+  .s-main-content-container {
+    background: transparent;
+    border-color: $darkmode-border;
+  }
+
+  .orcid-info__intro .header h1 {
+    color: $darkmode-text;
+  }
+
+  // Add to library widget
+  .s-query-info-widget .s-library-area {
+    background: $darkmode-background;
+
+    .panel-default {
+      background: transparent;
+
+      .panel-heading .panel-title {
+        background-color: $darkmode-input-bg;
+      }
+
+      .panel-body {
+        background: transparent !important;
+      }
+    }
+  }
+
+  // notification widget
+  [data-widget='MyAdsFreeform'] {
+    background: transparent;
+
+    .panel-default {
+      background: transparent;
+
+      .panel-heading .panel-title {
+        background-color: $darkmode-input-bg;
+      }
+
+      .panel-body {
+        background: transparent !important;
+      }
+    }
+  }
+
+  /* my libraries */
+
+  .s-user-pill-nav {
+    background-color: $darkmode-background-tertiary;
+  }
+
+  .s-user-pill-nav > li.active > a {
+    color: $darkmode-link;
+    border-color: $darkmode-link;
+  }
+
+  #page-with-sidenav-layout .user-pages__main-content {
+    background-color: $darkmode-background;
+  }
+
+  .s-nav-container {
+    background-color: $darkmode-background-secondary;
+    border: 1px solid $darkmode-border;
+    box-shadow: none;
+    @media screen and (max-width: $screen-md) {
+      background-color: $darkmode-background;
+    }
+
+    .s-nav-top-title {
+      color: $darkmode-link;
+      border-color: $darkmode-border;
+    }
+  }
+
+  .library-nav button,
+  .library-nav a {
+    color: $darkmode-text !important;
+    &:hover {
+      background-color: $darkmode-background-tertiary !important;
+    }
+
+    i.fa {
+      color: $darkmode-link;
+    }
+
+    &.btn {
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .s-all-libraries-widget {
+    background: $darkmode-background-secondary;
+    border-color: $darkmode-border;
+  }
+
+  .table-responsive {
+    @media screen and (max-width: $screen-sm) {
+      border-color: $darkmode-border;
+    }
+  }
+
+  .library-description {
+    color: $darkmode-text-dim;
+  }
+
+  .library-widget .header {
+    background: $darkmode-background-secondary;
+    box-shadow: none;
+    border-color: $darkmode-border;
+  }
+
+  .s-library-widget .s-library-info {
+    border-color: $darkmode-border;
+  }
+
+  .library-detail-view {
+    background: transparent;
+  }
+
+  .s-tab,
+  .s-tab a {
+    color: $darkmode-text;
+    &.active {
+      color: $darkmode-link;
+    }
+  }
+
+  .results-list,
+  .library-list-container {
+    color: $darkmode-text-dim;
+    a {
+      color: $darkmode-text;
+    }
+    a:hover {
+      color: $darkmode-link;
+    }
+  }
+
+  a,
+  a:visited {
+    .s-results-title {
+      color: $darkmode-text;
+    }
+  }
+
+  a:hover .s-results-title {
+    color: $darkmode-link;
+    text-decoration: none;
+  }
+
+  .s-results-authors {
+    color: $darkmode-text-dim;
+  }
+
+  .s-letter-icon .s-active-link i {
+    color: white;
+  }
+
+  .s-letter-icon i {
+    color: $darkmode-text-dim;
+  }
+
+  .s-icon-draw-attention {
+    color: $darkmode-link;
+  }
+
+  .s-link-details {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+    a,
+    a:visited {
+      color: $darkmode-text;
+    }
+    a:hover,
+    a:active {
+      color: $darkmode-link;
+    }
+  }
+
+  .s-main {
+    background: transparent;
+  }
+
+  .pager li > a,
+  .pager li > span {
+    background-color: $darkmode-container;
+    color: $darkmode-text;
+  }
+
+  .pager .disabled > a,
+  .pager .disabled > a:hover,
+  .pager .disabled > a:focus,
+  .pager .disabled > span {
+    background-color: $darkmode-container;
+    color: $darkmode-text-dim;
+  }
+
+  .all-libraries-widget tbody tr {
+    border-color: $darkmode-border;
+  }
+
+  /* results */
+
+  button.filter-operand-remove:hover {
+    background-color: $darkmode-btn-hightlight-bg;
+    border-color: $darkmode-btn-hightlight-bg;
+  }
+
+  .s-results-control-row {
+    background: transparent;
+  }
+
+  .s-more-info h4 a {
+    color: $darkmode-link;
+  }
+
+  .s-left-col-container {
+    background: transparent;
+    border-color: $darkmode-border;
+  }
+
+  .s-results-page-layout .s-results-border-bottom {
+    border-color: $darkmode-border;
+    @media screen and (max-width: $screen-md) {
+      border-left-color: $darkmode-background;
+    }
+  }
+
+  .facet-label {
+    color: $darkmode-text;
+    &:hover {
+      color: $darkmode-link;
+    }
+  }
+  .facet__list-container {
+    background: transparent;
+  }
+
+  .facet__list-container--child {
+    border-color: $darkmode-border;
+    border-radius: 5px;
+  }
+
+  .facet__dropdown {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+    color: $darkmode-text;
+    border-radius: 5px;
+  }
+
+  .facet__dropdown__title {
+    color: $darkmode-text;
+  }
+
+  .facet-label input:checked + span {
+    color: $darkmode-link;
+  }
+
+  .s-results-list li > div {
+    border-left-color: $darkmode-background;
+
+    &.chosen {
+      border-left-color: #54a05c;
+    }
+  }
+
+  .s-right-col-widget-container {
+    background: transparent;
+    border-color: $darkmode-border;
+    @media screen and (max-width: $screen-sm) {
+      background-color: $darkmode-background;
+    }
+  }
+
+  .panel-default .panel-heading .panel-title {
+    background: transparent;
+    border-color: $darkmode-border;
+
+    &:hover,
+    &:focus {
+      background-color: $darkmode-background;
+      color: $darkmode-text;
+    }
+  }
+
+  .s-library-add-title__title {
+    color: $darkmode-text;
+  }
+
+  .library-add-title {
+    &:hover,
+    &:focus {
+      background-color: $darkmode-background !important;
+      color: $darkmode-text;
+      text-decoration: none;
+    }
+  }
+
+  .s-create-notification-title__title {
+    color: $darkmode-text;
+  }
+
+  .create-notification-title {
+    &:hover,
+    &:focus {
+      background-color: $darkmode-background !important;
+      color: $darkmode-text;
+      text-decoration: none;
+    }
+  }
+
+  .s-tab.active {
+    border-color: $darkmode-link;
+    color: $darkmode-link;
+  }
+
+  .s-tabs-widget .nav-tabs > li.active > a {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: $darkmode-text;
+    }
+  }
+
+  .s-pagination-controls {
+    border-color: $darkmode-border;
+  }
+
+  // graphs
+
+  .s-tabs-widget .tab-content {
+    background: transparent;
+    border: 1px solid $darkmode-border;
+    border-top-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+
+  #year-graph,
+  .graph-facet {
+    background-color: $darkmode-background;
+    color: $darkmode-text;
+  }
+
+  .x-axis text,
+  .y-axis text,
+  .s-graph-view .graph-label {
+    fill: $darkmode-text !important;
+  }
+
+  .s-graph-view .legend rect {
+    fill: black;
+    stroke: $darkmode-border;
+  }
+
+  .s-control-row {
+    border-color: $darkmode-border;
+  }
+
+  .s-metrics-title {
+    background-color: $darkmode-input-bg;
+    color: $darkmode-text-strong;
+  }
+
+  .s-metrics-svg-container {
+    background: transparent;
+  }
+
+  text {
+    fill: white;
+  }
+
+  .axis text {
+    fill: $darkmode-text;
+  }
+
+  path.link {
+    stroke: white;
+  }
+
+  .x-axis,
+  .y-axis {
+    stroke: white;
+  }
+
+  .axis path,
+  .axis line {
+    stroke: $darkmode-text;
+  }
+
+  .d3-tip {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+    color: $darkmode-text;
+  }
+
+  .popover[role='tooltip'] {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+    color: $darkmode-text;
+
+    &.right > .arrow:after {
+      border-right-color: $darkmode-input-bg;
+    }
+
+    .popover-title {
+      background-color: $darkmode-input-bg;
+      border-color: $darkmode-input-border;
+      color: $darkmode-text-strong;
+    }
+
+    .popover-content {
+      background-color: $darkmode-input-bg;
+      border-color: $darkmode-input-border;
+      color: $darkmode-text;
+    }
+  }
+
+  .s-network-chart {
+    background-color: $darkmode-background;
+  }
+
+  .node-label {
+    fill: $darkmode-text;
+
+    &:hover {
+      fill: $darkmode-link;
+    }
+  }
+
+  .selected-label {
+    fill: $darkmode-link;
+  }
+
+  [data-widget='AuthorNetwork'] .link-background {
+    fill: rgba(0, 0, 0, 0.5);
+  }
+
+  [data-widget='PaperNetwork'] .link-background {
+    fill: $darkmode-background;
+  }
+
+  .network-g .node-containers:first-of-type > path {
+    fill: none !important;
+  }
+
+  .network-g circle[fill='#fff'] {
+    fill: $darkmode-background !important;
+  }
+
+  .s-vis-item-format {
+    background: $darkmode-background;
+  }
+
+  .time-series-container {
+    color: $darkmode-background;
+  }
+
+  .s-network-widget .s-filter-names-container {
+    background-color: $darkmode-input-bg;
+    border-color: $darkmode-input-border;
+  }
+
+  .s-bubble-chart {
+    background-color: $darkmode-background;
+  }
+
+  .s-controls {
+    background-color: $darkmode-background;
+  }
+
+  /* abstract */
+
+  .s-nav {
+    color: $darkmode-text;
+    border-color: transparent;
+
+    &.s-nav-inactive {
+      color: $darkmode-text-disabled;
+    }
+
+    &:hover {
+      background-color: $darkmode-background-tertiary;
+    }
+  }
+
+  .s-nav-selected {
+    border-color: #999;
+    background-color: $darkmode-background-tertiary;
+    color: $darkmode-text-strong;
+  }
+
+  .resources__container {
+    background: transparent;
+  }
+
+  #nav-button-container {
+    border-bottom: none;
+  }
+
+  #nav-button-container.sticky {
+    background-color: $darkmode-background !important;
+    border-bottom: 1px solid $darkmode-border;
+  }
+
+  .resources__header__row {
+    color: $darkmode-text;
+  }
+
+  a.resources__content__link {
+    color: $darkmode-text-strong;
+    &:hover {
+      color: $darkmode-link;
+    }
+  }
+
+  .associated__header__title {
+    color: $darkmode-text;
+  }
+
+  .s-abstract-metadata dt {
+    color: $darkmode-text;
+  }
+
+  /* settings */
+  .list-group-item {
+    background-color: $darkmode-background-secondary;
+    border-color: $darkmode-input-border;
+    color: $darkmode-text;
+
+    p {
+      color: $darkmode-text-dim;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $darkmode-background-tertiary;
+      color: $darkmode-text-strong;
+    }
+  }
+
+  tr.inactive {
+    background-color: $darkmode-background-tertiary !important;
+  }
+
+  .library-import-form form {
+    border-color: $darkmode-border;
+    border-radius: 5px;
+  }
+
+  /* footer */
+  .__footer_links a {
+    color: white;
+  }
+}
diff --git a/src/styles/sass/ads-sass/navbar.scss b/src/styles/sass/ads-sass/navbar.scss
index b88ff9c6f..d1ccd7f26 100644
--- a/src/styles/sass/ads-sass/navbar.scss
+++ b/src/styles/sass/ads-sass/navbar.scss
@@ -74,6 +74,10 @@
   > button {
     height: $navbar-height;
   }
+
+  .no-hover-style {
+    padding: 15px;
+  }
 }
 
 .s-orcid-label-container {
@@ -102,7 +106,6 @@
 }
 
 .s-orcid-dropdown .dropdown-menu {
-  padding: 16px;
   width: 350px;
 
   .divider {
diff --git a/src/styles/sass/ads-sass/results-page-widgets.scss b/src/styles/sass/ads-sass/results-page-widgets.scss
index f6444b012..50dde71d5 100644
--- a/src/styles/sass/ads-sass/results-page-widgets.scss
+++ b/src/styles/sass/ads-sass/results-page-widgets.scss
@@ -132,6 +132,22 @@
   }
 }
 
+
+.s-create-notification-title__title {
+  display: flex;
+  justify-content: space-between;
+  color: #5d5d5d;
+  font-size: 1.25em;
+}
+  
+.create-notification-title {
+  &:hover,
+  &:focus {
+    background: darken(white, 5%) !important;
+    text-decoration: none;
+  }
+}
+
 .s-empty-view-msg {
   padding: 0 10% 0 10%;
 }
diff --git a/src/styles/sass/ads-sass/utility.scss b/src/styles/sass/ads-sass/utility.scss
index 421ef3269..eaf232c2c 100644
--- a/src/styles/sass/ads-sass/utility.scss
+++ b/src/styles/sass/ads-sass/utility.scss
@@ -271,8 +271,10 @@
 
 button.text-link {
   background: none;
-  border: none;
   text-align: left;
+  border: 1px dotted rgba(0, 0, 0, 0.3); 
+  border-radius: 2px;;
+  margin-right: 4px;
 }
 
 .s-text-bold {
diff --git a/src/styles/sass/ads-sass/widget.scss b/src/styles/sass/ads-sass/widget.scss
index 0f98a4e45..f589dcb38 100644
--- a/src/styles/sass/ads-sass/widget.scss
+++ b/src/styles/sass/ads-sass/widget.scss
@@ -190,3 +190,9 @@ div[data-widget='ShowPaperExport'] .close-circle {
     min-width: 50%;
   }
 }
+
+.associated__header__title {
+  font-size: 1.1em;
+  color: #335baf;
+  text-transform: uppercase;
+}
diff --git a/src/styles/sass/manifest.scss b/src/styles/sass/manifest.scss
index a954ded9d..a10388717 100644
--- a/src/styles/sass/manifest.scss
+++ b/src/styles/sass/manifest.scss
@@ -51,3 +51,4 @@ $fa-font-path: '//netdna.bootstrapcdn.com/font-awesome/4.6.3/fonts'; // for refe
 @import 'ads-sass/widget';
 @import 'ads-sass/print';
 @import 'ads-sass/author-affiliation-tool';
+@import 'ads-sass/dark-mode';