Add CC dark theme option

This commit adds an option to enable a dark theme in the Community
Console. It can be enabled manually with a switch which is injected in
the CC or automatically by syncing it with the OS dark mode setting.

Change-Id: I7506e80a409c5b0190d942c9de88354b6c0cce10
diff --git a/src/_locales/ca/messages.json b/src/_locales/ca/messages.json
index 7a24358..d76a7cb 100644
--- a/src/_locales/ca/messages.json
+++ b/src/_locales/ca/messages.json
@@ -63,6 +63,18 @@
     "message": "Incrementa el contrast entre els fils llegits i no llegits a la Consola de la Comunitat.",
     "description": "Feature checkbox in the options page"
   },
+  "options_ccdarktheme": {
+    "message": "Activa el tema fosc a la Consola de la Comunitat, controlat per <span id='ccdarktheme_mode--container'></span>.",
+    "description": "Feature checkbox in the options page"
+  },
+  "options_ccdarktheme_mode_switch": {
+    "message": "un botó a la consola",
+    "description": "Select option added in #ccdarktheme_mode--container, in the options_ccdarktheme string"
+  },
+  "options_ccdarktheme_mode_system": {
+    "message": "la configuració del mode fosc del SO",
+    "description": "Select option added in #ccdarktheme_mode--container, in the options_ccdarktheme string"
+  },
   "options_profileindicator_header": {
     "message": "Punt indicador",
     "description": "Heading for the profile indicator feature options"
@@ -126,5 +138,9 @@
   "inject_profileindicatoralt_numposts": {
     "message": "Nombre de preguntes i respostes en els $1 darrers mesos.",
     "description": "Tooltip for the profile indicator dot."
+  },
+  "inject_ccdarkmode_helper": {
+    "message": "Canviar tema",
+    "description": "Tooltip for the dark mode switch."
   }
 }
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index b031666..de6f351 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -67,6 +67,18 @@
     "message": "Increase contrast between read and unread threads in the Community Console.",
     "description": "Feature checkbox in the options page"
   },
+  "options_ccdarktheme": {
+    "message": "Enable the dark theme in the Community Console, controlled <span id='ccdarktheme_mode--container'></span>.",
+    "description": "Feature checkbox in the options page"
+  },
+  "options_ccdarktheme_mode_switch": {
+    "message": "with a switch in the CC",
+    "description": "Select option added in #ccdarktheme_mode--container, in the options_ccdarktheme string"
+  },
+  "options_ccdarktheme_mode_system": {
+    "message": "by the OS dark mode setting",
+    "description": "Select option added in #ccdarktheme_mode--container, in the options_ccdarktheme string"
+  },
   "options_profileindicator_header": {
     "message": "Indicator dot",
     "description": "Heading for the profile indicator feature options"
@@ -126,5 +138,9 @@
   "inject_profileindicatoralt_numposts": {
     "message": "Number of questions and replies in the last $1 months.",
     "description": "Tooltip for the profile indicator dot."
+  },
+  "inject_ccdarktheme_helper": {
+    "message": "Switch theme",
+    "description": "Tooltip for the dark mode switch."
   }
 }
diff --git a/src/_locales/es/messages.json b/src/_locales/es/messages.json
index d1103c1..bdb20af 100644
--- a/src/_locales/es/messages.json
+++ b/src/_locales/es/messages.json
@@ -63,6 +63,18 @@
     "message": "Incrementa el contraste entre los hilos leídos y no leídos en la Consola de la Comunidad.",
     "description": "Feature checkbox in the options page"
   },
+  "options_ccdarktheme": {
+    "message": "Activa el tema oscuro en la Consola de la Comunidad, controlado por <span id='ccdarktheme_mode--container'></span>.",
+    "description": "Feature checkbox in the options page"
+  },
+  "options_ccdarktheme_mode_switch": {
+    "message": "un botón en la consola",
+    "description": "Select option added in #ccdarktheme_mode--container, in the options_ccdarktheme string"
+  },
+  "options_ccdarktheme_mode_system": {
+    "message": "la configuración del modo oscuro del SO",
+    "description": "Select option added in #ccdarktheme_mode--container, in the options_ccdarktheme string"
+  },
   "options_profileindicator_header": {
     "message": "Punto indicador",
     "description": "Heading for the profile indicator feature options"
@@ -126,5 +138,9 @@
   "inject_profileindicatoralt_numposts": {
     "message": "Número de preguntas y respuestas en los últimos $1 meses.",
     "description": "Tooltip for the profile indicator dot."
+  },
+  "inject_ccdarktheme_helper": {
+    "message": "Cambiar tema",
+    "description": "Tooltip for the dark mode switch."
   }
 }
diff --git a/src/common/common.js b/src/common/common.js
index 8845b81..f1366b1 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -14,10 +14,15 @@
   'profileindicator': false,
   'profileindicatoralt': false,
   'profileindicatoralt_months': 12,
+  'ccdarktheme': false,
+  'ccdarktheme_mode': 'switch',
+  'ccdarktheme_switch_enabled': true,
 };
 
 const specialOptions = [
   'profileindicatoralt_months',
+  'ccdarktheme_mode',
+  'ccdarktheme_switch_enabled',
 ];
 
 const deprecatedOptions = [
diff --git a/src/common/content_scripts.js b/src/common/content_scripts.js
index 7186037..1bc9a7d 100644
--- a/src/common/content_scripts.js
+++ b/src/common/content_scripts.js
@@ -1,7 +1,8 @@
-function injectStylesheet(stylesheetName) {
+function injectStylesheet(stylesheetName, attributes = {}) {
   var link = document.createElement('link');
   link.setAttribute('rel', 'stylesheet');
   link.setAttribute('href', stylesheetName);
+  if ('media' in attributes) link.setAttribute('media', attributes['media']);
   document.head.appendChild(link);
 }
 
diff --git a/src/content_scripts/console_inject.js b/src/content_scripts/console_inject.js
index eb0975b..f25fe4b 100644
--- a/src/content_scripts/console_inject.js
+++ b/src/content_scripts/console_inject.js
@@ -100,15 +100,55 @@
 
   if (options.fixedtoolbar) {
     injectStyles(
-        'ec-bulk-actions{position: sticky; top: 0; background: white; z-index: 96;}');
+        'ec-bulk-actions{position: sticky; top: 0; background: var(--TWPT-primary-background, #fff); z-index: 96;}');
   }
 
   if (options.increasecontrast) {
-    injectStyles('.thread-summary.read{background: #ecedee!important;}');
+    injectStyles(
+        '.thread-summary.read{background: var(--TWPT-thread-read-background, #ecedee)!important;}');
   }
 
   if (options.stickysidebarheaders) {
     injectStyles(
-        'material-drawer .main-header{background: #fff; position: sticky; top: 0; z-index: 1;}');
+        'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
+  }
+
+  if (options.ccdarktheme && options.ccdarktheme_mode == 'switch') {
+    injectStylesheet(
+        chrome.runtime.getURL('injections/ccdarktheme_switch.css'));
+
+    var darkThemeSwitch = document.createElement('material-button');
+    darkThemeSwitch.classList.add('TWPT-dark-theme');
+    darkThemeSwitch.setAttribute('button', '');
+    darkThemeSwitch.setAttribute(
+        'title', chrome.i18n.getMessage('inject_ccdarktheme_helper'));
+
+    darkThemeSwitch.addEventListener('click', e => {
+      chrome.storage.sync.get(null, currentOptions => {
+        currentOptions.ccdarktheme_switch_status =
+            !options.ccdarktheme_switch_status;
+        chrome.storage.sync.set(currentOptions, _ => {
+          location.reload();
+        });
+      });
+    });
+
+    var switchContent = document.createElement('div');
+    switchContent.classList.add('content');
+
+    var icon = document.createElement('material-icon');
+
+    var i = document.createElement('i');
+    i.classList.add('material-icon-i', 'material-icons-extended');
+    i.textContent = 'brightness_4';
+
+    icon.appendChild(i);
+    switchContent.appendChild(icon);
+    darkThemeSwitch.appendChild(switchContent);
+
+    var rightControl = document.querySelector('header .right-control');
+    rightControl.style.width =
+        (parseInt(window.getComputedStyle(rightControl).width) + 58) + 'px';
+    rightControl.insertAdjacentElement('afterbegin', darkThemeSwitch);
   }
 });
diff --git a/src/content_scripts/console_inject_start.js b/src/content_scripts/console_inject_start.js
index 92ad72b..52482c5 100644
--- a/src/content_scripts/console_inject_start.js
+++ b/src/content_scripts/console_inject_start.js
@@ -10,4 +10,19 @@
     document.querySelector('html').setAttribute(
         'data-startup', JSON.stringify(startup));
   }
+
+  if (items.ccdarktheme) {
+    switch (items.ccdarktheme_mode) {
+      case 'switch':
+        if (items.ccdarktheme_switch_status == true)
+          injectStylesheet(chrome.runtime.getURL('injections/ccdarktheme.css'));
+        break;
+
+      case 'system':
+        injectStylesheet(chrome.runtime.getURL('injections/ccdarktheme.css'), {
+          'media': '(prefers-color-scheme: dark)',
+        });
+        break;
+    }
+  }
 });
diff --git a/src/injections/ccdarktheme.css b/src/injections/ccdarktheme.css
new file mode 100644
index 0000000..ddb5ea0
--- /dev/null
+++ b/src/injections/ccdarktheme.css
@@ -0,0 +1,563 @@
+:root {
+  --TWPT-primary-text: #e8eaed;
+  --TWPT-primary-text-alt: var(--TWPT-primary-text);
+  --TWPT-secondary-text: #9aa0a6;
+  --TWPT-primary-background: #202124;
+  --TWPT-secondary-background: #28292c;
+  --TWPT-active-background: #3c4043;
+  --TWPT-card-border: #5f6368;
+  --TWPT-subtle-border: #383735;
+  --TWPT-link: #8ab4f8;
+  --TWPT-thread-read-background: rgba(255, 255, 255, 0.08);
+  --TWPT-drawer-background: #2d2e30;
+}
+
+body {
+  color: var(--TWPT-primary-text);
+  background-color: var(--TWPT-primary-background)!important;
+}
+
+p {
+  color: var(--TWPT-primary-text);
+}
+
+body.ec a {
+  color: var(--TWPT-link);
+}
+
+/* Header */
+.material-content > header {
+  background-color: var(--TWPT-primary-background)!important;
+}
+
+.material-content > header material-button {
+  color: rgba(255, 255, 255, .87)!important;
+}
+
+.search-box {
+  background-color: #313235!important;
+}
+
+.search-box .clear-icon {
+  opacity: 0.8;
+  color: rgba(255, 255, 255, .87)!important;
+}
+
+.material-content > header .bell.mixin {
+  fill: rgba(255, 255, 255, .87)!important;
+}
+
+/* Drawer */
+material-drawer, material-drawer .panel, material-list-item {
+  background-color: var(--TWPT-drawer-background)!important;
+}
+
+material-list-item:hover, material-list-item:focus {
+  background-color: var(--TWPT-active-background)!important;
+}
+
+material-drawer .panel {
+  border-bottom-color: #25231f!important;
+}
+
+material-drawer .drawer-section-title, material-drawer .header > material-icon {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+material-drawer material-list-item, material-drawer material-list-item .title {
+  color: #d2cecb!important;
+}
+
+material-drawer ec-forum-drawer-item material-checkbox material-icon {
+  filter: brightness(1.5);
+}
+
+/* Selector */
+.popup-wrapper, material-list {
+  background-color: var(--TWPT-drawer-background)!important;
+}
+
+material-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
+  box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
+  border-top-color: #1f1f1f!important;
+}
+
+material-list material-select-item:hover,
+    material-list material-select-item:focus,
+    material-list material-select-dropdown-item:hover,
+    material-list material-select-dropdown-item:focus,
+    material-list material-select-dropdown-item.active,
+    material-list material-select-dropdown-item:not(.multiselect).selected {
+  background-color: rgba(255, 255, 255, .04)!important;
+}
+
+material-list .menu-item-label, material-list .label, material-list .text-segment {
+  color: rgba(255, 255, 255, .87)!important;
+}
+
+material-list [group] > [label] {
+  color: #8a8a8a!important;
+}
+
+/* Main */
+.main {
+  color: var(--TWPT-primary-text)!important;
+}
+
+main .title-bar {
+  border-bottom-color: var(--TWPT-subtle-border)!important;
+}
+
+main .title-bar .title, main .page-header h1, main .header h1 {
+  color: var(--TWPT-primary-text)!important;
+}
+
+.card {
+  background-color: var(--TWPT-secondary-background)!important;
+  color: var(--TWPT-primary-text)!important;
+  border-color: var(--TWPT-card-border)!important;
+}
+
+.card .card-title, .card, .card-section-title {
+  color: var(--TWPT-primary-text)!important;
+}
+
+.card .card-section-hint {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+/* Action bar */
+.material-content .action-bar material-button,
+    ec-bulk-actions material-button,
+    ec-back-button material-button {
+  color: rgba(255, 255, 255, .54)!important;
+}
+
+.material-content .action-bar material-button.starred {
+  color: #fbbc04!important;
+}
+
+/* Thread list */
+ec-thread-list ul.thread-group {
+  background-color: var(--TWPT-primary-background)!important;
+}
+
+ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
+  border-bottom-color: var(--TWPT-subtle-border)!important;
+}
+
+ec-thread-summary material-expansionpanel.read {
+  background-color: var(--TWPT-thread-read-background)!important;
+}
+
+ec-thread-summary material-expansionpanel.checked {
+  background-color: #17191c!important;
+}
+
+ec-thread-summary material-expansionpanel .title {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-thread-summary material-expansionpanel ec-second-summary-line,
+    material-expansionpanel .header-content,
+    material-expansionpanel ec-thread-counts > span:not(.recommended-answers) {
+  color: #928e89!important;
+}
+
+ec-thread-summary material-expansionpanel ec-safe-html.body {
+  color: var(--TWPT-primary-text)!important;
+}
+
+/* Thread view */
+ec-question, .heading + .group, ec-message {
+  background-color: var(--TWPT-secondary-background)!important;
+}
+
+ec-question ec-review-bar {
+  background-color: var(--TWPT-active-background)!important;
+}
+
+ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+ec-question .alert {
+  background-color: var(--TWPT-active-background)!important;
+}
+
+ec-question .alert material-icon {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-question .alert ec-icon {
+  color: var(--TWPT-primary-text)!important;
+  fill: var(--TWPT-primary-text)!important;
+}
+
+ec-question .title {
+  color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-message-header ec-avatar svg, ec-message-header .role {
+  filter: brightness(1.5);
+}
+
+ec-question .body, ec-message .body {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-question .thread-insert {
+  background: none!important;
+}
+
+ec-question .details-heading {
+  color: var(--TWPT-primary-text-alt) !important;
+}
+
+ec-question .footer {
+  color: var(--TWPT-primary-text)!important;
+  background-color: var(--TWPT-active-background)!important;
+  border-top-color: var(--TWPT-card-border)!important;
+}
+
+.heading {
+  color: var(--TWPT-primary-text)!important;
+}
+
+.heading + .group,
+    .load-more-bar,
+    ec-message:not(:first-child),
+    .load-more-bar .load-more-button,
+    .load-more-bar .load-all-button {
+  border-color: var(--TWPT-card-border)!important;
+}
+
+ec-message .footer ec-relative-time,
+    ec-message .footer ec-safe-html {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+ec-message .helpful-prompt {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-question .me-too-button,
+    ec-question .subscribe-button,
+    ec-message .upvote-button,
+    ec-message .downvote-button {
+  color: var(--TWPT-secondary-text)!important;
+  background-color: #3c3e42!important;
+}
+
+ec-question .me-too-button.selected,
+    ec-question .subscribe-button.selected,
+    ec-message .upvote-button.selected,
+    ec-message .downvote-button.selected {
+  color: #4285f4!important;
+}
+
+.load-more-bar .load-more-button, .load-more-bar .load-all-button {
+  background-color: var(--TWPT-secondary-background)!important;
+}
+
+.locked-alert {
+  background-color: var(--TWPT-active-background)!important;
+  border: var(--TWPT-card-border)!important;
+}
+
+.locked-alert material-icon {
+  color: rgba(255, 255, 255, .38)!important;
+}
+
+ec-thread .finished-question {
+  background-color: var(--TWPT-active-background)!important;
+  border: var(--TWPT-card-border)!important;
+}
+
+.material-content .action-bar material-button.has-activity {
+  color: #1a73e8!important;
+}
+
+.material-content .action-bar material-button.showing-sidebar {
+  background-color: var(--TWPT-active-background)!important;
+}
+
+ec-activity-panel .title-bar h3 {
+  color: #e8eaf2!important;
+}
+
+ec-activity-panel ec-activity {
+  color: var(--TWPT-secondary-text)!important;
+  border-color: var(--TWPT-card-border)!important;
+}
+
+ec-activity-panel ec-activity .message {
+  color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-activity-panel ec-activity .thread-title {
+  color: #c3bfbc!important;
+}
+
+/* Recommended answers - show in green where we've overwritten the colors */
+.recommended-answers {
+  color: #34a853!important;
+}
+
+/* New thread view */
+material-stepper .stepper-step-name,
+    material-stepper .purpose-title {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-ask-flow .display-name-label,
+    material-stepper .additional-details-label {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+/* Profile view */
+ec-user .main-card-content {
+  background-color: var(--TWPT-secondary-background)!important;
+  border: 1px solid var(--TWPT-card-border)!important;
+  border-top-right-radius: 8px!important;
+  border-bottom-right-radius: 8px!important;
+}
+
+ec-user ec-display-name-editor {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-user bar-chart .axis text {
+  fill: rgba(255, 255, 255, .54)!important;
+}
+
+ec-user bar-chart .axis path,
+    ec-user bar-chart .axis .gridline,
+    ec-user bar-chart .axis line {
+  stroke: rgba(255, 255, 255, .12)!important;
+}
+
+ec-user bar-chart .axis line.axis-zero-tick,
+    ec-user bar-chart .axis.x .tick-mark {
+  stroke: rgba(255, 255, 255, .38)!important;
+}
+
+ec-user bar-chart .aplos-legend-entry {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+.aplos-hovercard {
+  background: var(--TWPT-secondary-background)!important;
+}
+
+.aplos-hovercard .title {
+  color: var(--TWPT-primary-text)!important;
+}
+
+.aplos-hovercard .subtitle,
+    .aplos-donut-center .subtitle,
+    .aplos-hovercard .series,
+    .aplos-donut-center .series,
+    .aplos-hovercard .value,
+    .aplos-donut-center .value {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+/* Duplicate thread feature */
+.search-results ec-thread-option material-expansionpanel .panel {
+  background-color: var(--TWPT-primary-background)!important;
+}
+
+.search-results ec-thread-option material-expansionpanel.selected .panel,
+    .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
+    .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
+  background-color: #17191c!important;
+}
+
+/* Disabled buttons */
+material-button[disabled] {
+  color: rgba(255, 255, 255, .26)!important;
+}
+
+/* Material icons */
+ec-filter-drawer-item material-icon,
+    ec-filter-drawer-item ec-icon,
+    material-drawer .drawer-section material-icon,
+    material-drawer .drawer-section ec-icon,
+    material-list material-icon,
+    ec-query-builder material-icon,
+    material-radio .icon-container:not(.checked) material-icon,
+    ec-thread-summary material-expansionpanel .title material-icon,
+    .search-results ec-thread-option material-icon,
+    .search-results ec-thread-option ec-icon,
+    ec-rich-text-editor material-icon,
+    ec-editor-command material-icon,
+    ec-canned-responses ec-canned-response-row material-icon {
+  color: rgba(255, 255, 255, .87)!important;
+}
+
+material-drawer ec-icon,
+  .search-results ec-thread-option ec-icon {
+  fill: rgba(255, 255, 255, .87)!important;
+}
+
+/* Dialogs */
+material-dialog, material-dialog .dialog-header {
+  background-color: var(--TWPT-primary-background)!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog .dialog-header {
+  background-color: #d2e3fc!important;
+}
+
+material-dialog .title {
+  color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
+  color: var(--TWPT-primary-background)!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
+  background-color: #170f01!important;
+}
+
+material-dialog .section-title,
+    material-dialog .select-label,
+    material-dialog .input-label,
+    material-dialog .btn-no,
+    ec-display-name-editor,
+    .forum-selection-label {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
+  color: var(--TWPT-secondary-text)!important;
+  background-color: var(--TWPT-active-background)!important;
+  border-top-color: #25231f!important;
+}
+
+/* Keyboard shortcuts dialog */
+material-dialog .main.with-scroll-strokes table td {
+  color: var(--TWPT-primary-text)!important;
+}
+
+/* Rich text editor */
+ec-editor-command material-button,
+    ec-formatting-popup material-button {
+  box-shadow: none!important;
+}
+
+ec-editor-command material-button.is-active {
+  background: var(--TWPT-active-background)!important;
+}
+
+ec-rich-text-editor .placeholder {
+  color: rgba(255, 255, 255, .38)!important;
+}
+
+ec-rich-text-editor .input {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-rich-text-editor .hint {
+  color: rgba(255, 255, 255, .54)!important;
+}
+
+material-select-searchbox + material-list material-list-item {
+  color: rgba(255, 255, 255, .87)!important;
+}
+
+ec-attachment .filename {
+  color: var(--TWPT-primary-text)!important;
+}
+
+/* Thread insert */
+ec-thread-insert .title {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-thread-insert ec-thread-counts,
+    ec-thread-insert .details,
+    ec-thread-insert ec-relative-time {
+  color: rgba(255, 255, 255, .54)!important;
+}
+
+/* Text input */
+material-input input {
+  color: var(--TWPT-primary-text)!important;
+}
+
+material-input .label-text,
+    material-input .hint-text,
+    material-input .counter {
+  color: rgba(255, 255, 255, .54)!important;
+}
+
+material-input .underline .unfocused-underline {
+  background-color: rgba(255, 255, 255, .12)!important;
+}
+
+label .label {
+  color: var(--TWPT-primary-text)!important;
+}
+
+/* Input underline */
+material-input .underline .unfocused-underline,
+    material-dropdown-select dropdown-button [buttondecorator] {
+  border-bottom-color: rgba(255, 255, 255, .12)!important;
+}
+
+/* Checkbox input */
+material-checkbox, material-checkbox .content {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+/* Material menu button and dropdown select */
+material-menu material-button, material-dropdown-select dropdown-button {
+  color: rgba(255, 255, 255, .54)!important;
+}
+
+material-dropdown-select dropdown-button .is-disabled .button-text {
+  color: rgba(255, 255, 255, .38)!important;
+}
+
+/* Announcements content */
+ec-announcements-content .header .title, ec-announcements-content .announcement-title {
+  color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-announcements-content .no-announcements-message {
+  color: #c3bfbc!important;
+}
+
+/* Account selector */
+.popup-wrapper .profile .email {
+  color: rgba(255, 255, 255, .54)!important;
+}
+
+material-gaia-picker-footer {
+  color: rgba(255, 255, 255, .54)!important;
+  background-color: var(--TWPT-active-background)!important;
+}
+
+/* Canned responses */
+ec-canned-responses .filter-label,
+    ec-canned-responses ec-canned-response-row .name,
+    ec-canned-responses ec-canned-response-row .snippet {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-canned-responses ec-canned-response-row .header.closed:hover,
+    ec-canned-responses ec-canned-response-row .header.closed:focus,
+    ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
+    ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
+  background-color: var(--TWPT-active-background)!important;
+}
+
+/* Reply button */
+material-fab.reply-button {
+  background-color: var(--TWPT-link)!important;
+  color: var(--TWPT-primary-background)!important;
+}
+
diff --git a/src/injections/ccdarktheme_switch.css b/src/injections/ccdarktheme_switch.css
new file mode 100644
index 0000000..c0d94f5
--- /dev/null
+++ b/src/injections/ccdarktheme_switch.css
@@ -0,0 +1,8 @@
+.TWPT-dark-theme {
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.TWPT-dark-theme .content {
+  padding: 8px;
+}
diff --git a/src/options.html b/src/options.html
index 6daa9ca..8bb4fb2 100644
--- a/src/options.html
+++ b/src/options.html
@@ -20,6 +20,7 @@
         <input type="checkbox" id="loaddrafts"> <label for="loaddrafts" data-i18n="loaddrafts"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
         <input type="checkbox" id="increasecontrast"> <label for="increasecontrast" data-i18n="increasecontrast"></label><br>
         <input type="checkbox" id="stickysidebarheaders"> <label for="stickysidebarheaders" data-i18n="stickysidebarheaders"></label><br>
+        <input type="checkbox" id="ccdarktheme"> <label for="ccdarktheme" data-i18n="ccdarktheme"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
       </p>
       <h4 data-i18n="profileindicator_header"></h4>
       <p>
diff --git a/src/options.js b/src/options.js
index 47cecf6..4d37a19 100644
--- a/src/options.js
+++ b/src/options.js
@@ -24,6 +24,14 @@
           options[opt] = document.getElementById(opt).value || 12;
           break;
 
+        case 'ccdarktheme_mode':
+          options[opt] = document.getElementById(opt).value || 'switch';
+          break;
+
+        // This option is controlled directly in the Community Console.
+        case 'ccdarktheme_switch_enabled':
+          break;
+
         default:
           console.warn('Unrecognized option: ' + opt);
           break;
@@ -79,6 +87,28 @@
                 .appendChild(input);
             break;
 
+          case 'ccdarktheme_mode':
+            var select = document.createElement('select');
+            select.id = 'ccdarktheme_mode';
+
+            const modes = ['switch', 'system'];
+            for (const mode of modes) {
+              var modeOption = document.createElement('option');
+              modeOption.value = mode;
+              modeOption.textContent =
+                  chrome.i18n.getMessage('options_ccdarktheme_mode_' + mode);
+              if (items.ccdarktheme_mode == mode) modeOption.selected = true;
+              select.appendChild(modeOption);
+            }
+
+            document.getElementById('ccdarktheme_mode--container')
+                .appendChild(select);
+            break;
+
+          // This option is controlled directly in the Community Console.
+          case 'ccdarktheme_switch_enabled':
+            break;
+
           default:
             console.warn('Unrecognized option: ' + opt);
             break;