refactor(cc-dark-theme): organize styles in several files
Until now we had a single file for the dark theme styles with ~2500
lines, with several sections which were marked with CSS comments.
This CL separates this file into several ones to improve its
maintainability, using the folder structure suggested by
https://sass-guidelin.es/#architecture.
Fixed: twpowertools:21
Change-Id: I0c1741f58b470085c0a499b32aa64feb43d8ad31
diff --git a/src/ccDarkTheme/components/_action-bar.scss b/src/ccDarkTheme/components/_action-bar.scss
new file mode 100644
index 0000000..9bf28fa
--- /dev/null
+++ b/src/ccDarkTheme/components/_action-bar.scss
@@ -0,0 +1,15 @@
+.material-content .action-bar material-button,
+ ec-bulk-actions material-button,
+ ec-back-button material-button,
+ .sort-options material-button {
+ color: var(--TWPT-subtle-button-background)!important;
+}
+
+.material-content .action-bar .review-button.reviewing {
+ color: #1a73e8!important;
+ background: #dae7ff!important;
+}
+
+.material-content .action-bar material-button.starred {
+ color: var(--TWPT-starred)!important;
+}
diff --git a/src/ccDarkTheme/components/_activity-panel.scss b/src/ccDarkTheme/components/_activity-panel.scss
new file mode 100644
index 0000000..e097612
--- /dev/null
+++ b/src/ccDarkTheme/components/_activity-panel.scss
@@ -0,0 +1,24 @@
+ec-activity-panel .title-bar h3 {
+ color: #e8eaf2!important;
+}
+
+ec-activity-panel .title-bar material-button {
+ color: var(--TWPT-subtle-button-background)!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;
+}
+
+ec-activity-panel ec-activity .thread-body {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/_canned-responses.scss b/src/ccDarkTheme/components/_canned-responses.scss
new file mode 100644
index 0000000..63996ae
--- /dev/null
+++ b/src/ccDarkTheme/components/_canned-responses.scss
@@ -0,0 +1,31 @@
+ec-canned-responses .filter-label,
+ ec-canned-responses ec-canned-response-row .name {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-canned-responses .label-row,
+ ec-canned-responses ec-canned-response-row .snippet,
+ ec-canned-responses ec-canned-response-row .tag .content,
+ ec-canned-responses ec-canned-response-row .TWPT-tag .TWPT-content {
+ color: var(--TWPT-secondary-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,
+ ec-canned-responses ec-canned-response-row material-expansionpanel:not(.expanded) .main-header:focus-within,
+ ec-canned-responses ec-canned-response-row material-expansionpanel:not(.expanded) .main-header:hover {
+ background-color: var(--TWPT-active-background)!important;
+}
+
+ec-canned-responses .filter-row,
+ ec-canned-responses .label-row,
+ ec-canned-responses ec-canned-response-row material-expansionpanel {
+ border-bottom-color: var(--TWPT-subtle-border)!important;
+}
+
+ec-canned-responses .create-button {
+ background: #0842a0!important;
+ color: #d3e3fd!important;
+}
diff --git a/src/ccDarkTheme/components/_drawer.scss b/src/ccDarkTheme/components/_drawer.scss
new file mode 100644
index 0000000..973b7f8
--- /dev/null
+++ b/src/ccDarkTheme/components/_drawer.scss
@@ -0,0 +1,33 @@
+material-drawer, material-drawer .panel, ec-filter-drawer-item > .root, ec-forum-drawer-item material-list-item {
+ background-color: var(--TWPT-drawer-background)!important;
+}
+
+material-drawer material-expansionpanel .main-header > .header:is(:hover, :focus) {
+ background-color: var(--TWPT-active-background)!important;
+}
+
+:is(
+ ec-filter-drawer-item > .root,
+ ec-forum-drawer-item > material-list-item,
+ material-list material-list-item,
+ .drawer-section .drawer-item:not([separator=present])
+ ):is(:hover, :focus, :focus-within, .active, .drawer-item--active) {
+ background: 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);
+}
diff --git a/src/ccDarkTheme/components/_duplicate-thread.scss b/src/ccDarkTheme/components/_duplicate-thread.scss
new file mode 100644
index 0000000..cf0858f
--- /dev/null
+++ b/src/ccDarkTheme/components/_duplicate-thread.scss
@@ -0,0 +1,17 @@
+.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;
+}
+
+.search-results .results-title {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+.search-results ec-thread-option material-expansionpanel .panel > .main > .main-content .snippet {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/_icon.scss b/src/ccDarkTheme/components/_icon.scss
new file mode 100644
index 0000000..5a1fef6
--- /dev/null
+++ b/src/ccDarkTheme/components/_icon.scss
@@ -0,0 +1,22 @@
+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,
+ 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,
+ ec-ask-flow > .header material-button {
+ color: rgba(255, 255, 255, .87)!important;
+}
+
+material-drawer ec-icon,
+ .search-results ec-thread-option ec-icon,
+ ec-thread-summary material-expansionpanel .title ec-icon,
+ ec-announcements-menu-item ec-icon {
+ fill: rgba(255, 255, 255, .87)!important;
+}
diff --git a/src/ccDarkTheme/components/_index.scss b/src/ccDarkTheme/components/_index.scss
new file mode 100644
index 0000000..6307f8f
--- /dev/null
+++ b/src/ccDarkTheme/components/_index.scss
@@ -0,0 +1,26 @@
+@forward 'drawer';
+@forward 'notifications';
+@forward 'tabs';
+@forward 'query-builder';
+@forward 'action-bar';
+@forward 'thread-list';
+@forward 'review-bar';
+@forward 'activity-panel';
+@forward 'thread-view';
+@forward 'stepper';
+@forward 'thread-composer';
+@forward 'profile-chart';
+@forward 'user-badge';
+@forward 'duplicate-thread';
+@forward 'buttons';
+@forward 'icon';
+@forward 'dialogs';
+@forward 'rich-text-editor';
+@forward 'thread-insert';
+@forward 'inputs';
+@forward 'menu';
+@forward 'popups';
+@forward 'canned-responses';
+@forward 'settings';
+@forward 'loading-spinner';
+@forward 'custom';
diff --git a/src/ccDarkTheme/components/_loading-spinner.scss b/src/ccDarkTheme/components/_loading-spinner.scss
new file mode 100644
index 0000000..ef71ebc
--- /dev/null
+++ b/src/ccDarkTheme/components/_loading-spinner.scss
@@ -0,0 +1,3 @@
+material-spinner {
+ border-color: var(--TWPT-blue-A100)!important;
+}
diff --git a/src/ccDarkTheme/components/_menu.scss b/src/ccDarkTheme/components/_menu.scss
new file mode 100644
index 0000000..b0e5a02
--- /dev/null
+++ b/src/ccDarkTheme/components/_menu.scss
@@ -0,0 +1,3 @@
+material-menu material-button {
+ color: var(--TWPT-primary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/_profile-chart.scss b/src/ccDarkTheme/components/_profile-chart.scss
new file mode 100644
index 0000000..2312723
--- /dev/null
+++ b/src/ccDarkTheme/components/_profile-chart.scss
@@ -0,0 +1,44 @@
+ec-user bar-chart .axis text,
+ ec-unified-user .scTailwindSharedActivitychartchart .axis text {
+ fill: var(--TWPT-subtle-button-background)!important;
+}
+
+ec-user bar-chart .axis path,
+ ec-user bar-chart .axis .gridline,
+ ec-user bar-chart .axis line,
+ ec-unified-user .scTailwindSharedActivitychartchart .axis path,
+ ec-unified-user .scTailwindSharedActivitychartchart .axis .gridline,
+ ec-unified-user .scTailwindSharedActivitychartchart .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,
+ ec-unified-user .scTailwindSharedActivitychartchart .axis line.axis-zero-tick,
+ ec-unified-user .scTailwindSharedActivitychartchart .axis.x .tick-mark {
+ stroke: rgba(255, 255, 255, .38)!important;
+}
+
+ec-user bar-chart .aplos-legend-entry,
+ ec-unified-user .scTailwindSharedActivitychartchart .aplos-legend-entry {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+.aplos-hovercard {
+ color: var(--TWPT-interop-secondary-text)!important;
+ background: var(--TWPT-secondary-background)!important;
+ border: none!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;
+}
diff --git a/src/ccDarkTheme/components/_query-builder.scss b/src/ccDarkTheme/components/_query-builder.scss
new file mode 100644
index 0000000..b7551b7
--- /dev/null
+++ b/src/ccDarkTheme/components/_query-builder.scss
@@ -0,0 +1,19 @@
+// Filters (ec-query-builder)
+material-condition-builder .compound-condition-operator {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-condition-builder .compound-condition-operator:is(::before, ::after) {
+ border-left-color: rgba(255, 255, 255, .20)!important;
+}
+
+material-condition-builder .add-button,
+ ec-query-builder .save-filter-button:not([disabled]) {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-condition-builder .add-condition,
+ ec-query-builder .close-button {
+ background-color: var(--TWPT-interop-blue)!important;
+ color: #1f1f1f!important;
+}
diff --git a/src/ccDarkTheme/components/_review-bar.scss b/src/ccDarkTheme/components/_review-bar.scss
new file mode 100644
index 0000000..ea94e0e
--- /dev/null
+++ b/src/ccDarkTheme/components/_review-bar.scss
@@ -0,0 +1,47 @@
+// Review bar shown above the main message or replies
+ec-review-bar {
+ background-color: var(--TWPT-active-background)!important;
+}
+
+ec-review-bar material-chip {
+ background-color: var(--TWPT-button-background)!important;
+}
+
+ec-review-bar material-chip:not(.relevant-active):not(.active) {
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
+ color: var(--TWPT-primary-text)!important;
+ fill: var(--TWPT-primary-text)!important;
+}
+
+ec-review-bar material-chip:not(.relevant-active):not(.active) .content {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-review-bar material-chip.relevant-active {
+ border-color: var(--TWPT-good-text)!important;
+}
+
+ec-review-bar material-chip.relevant-active material-icon {
+ color: var(--TWPT-good-text)!important;
+ fill: var(--TWPT-good-text)!important;
+}
+
+ec-review-bar material-chip.relevant-active .content {
+ color: var(--TWPT-good-text)!important;
+}
+
+ec-review-bar material-chip.active {
+ border-color: var(--TWPT-bad-text)!important;
+}
+
+ec-review-bar material-chip.active material-icon {
+ color: var(--TWPT-bad-text)!important;
+ fill: var(--TWPT-bad-text)!important;
+}
+
+ec-review-bar material-chip.active .content {
+ color: var(--TWPT-bad-text)!important;
+}
diff --git a/src/ccDarkTheme/components/_rich-text-editor.scss b/src/ccDarkTheme/components/_rich-text-editor.scss
new file mode 100644
index 0000000..61553f4
--- /dev/null
+++ b/src/ccDarkTheme/components/_rich-text-editor.scss
@@ -0,0 +1,37 @@
+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-wrapper,
+ ec-rich-text-editor .spacer {
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-rich-text-editor .input-wrapper.input-wrapper--focused {
+ border-color: var(--TWPT-blue-A100)!important;
+}
+
+ec-rich-text-editor .input {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-rich-text-editor .hint {
+ color: var(--TWPT-subtle-button-background)!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;
+}
diff --git a/src/ccDarkTheme/components/_settings.scss b/src/ccDarkTheme/components/_settings.scss
new file mode 100644
index 0000000..87ebbe0
--- /dev/null
+++ b/src/ccDarkTheme/components/_settings.scss
@@ -0,0 +1,7 @@
+ec-settings .forum-language-container {
+ border-bottom-color: var(--TWPT-subtle-border)!important;
+}
+
+ec-settings .forum-language-container :is(material-button, button) {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/_stepper.scss b/src/ccDarkTheme/components/_stepper.scss
new file mode 100644
index 0000000..5c035b1
--- /dev/null
+++ b/src/ccDarkTheme/components/_stepper.scss
@@ -0,0 +1,19 @@
+// The stepper is shown in the "new thread" and "edit message" views
+material-stepper {
+ border-top-color: var(--TWPT-card-border)!important;
+}
+
+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,
+ material-stepper .detail-label {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-stepper .stepper-step[selectable=true]:focus {
+ background-color: rgba(60, 64, 67, .24)!important;
+}
diff --git a/src/ccDarkTheme/components/_tabs.scss b/src/ccDarkTheme/components/_tabs.scss
new file mode 100644
index 0000000..e90bc72
--- /dev/null
+++ b/src/ccDarkTheme/components/_tabs.scss
@@ -0,0 +1,11 @@
+material-tab-strip tab-button {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-tab-strip tab-button.active {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-tab-strip .tab-indicator {
+ border-top-color: var(--TWPT-blue-A100)!important;
+}
diff --git a/src/ccDarkTheme/components/_thread-composer.scss b/src/ccDarkTheme/components/_thread-composer.scss
new file mode 100644
index 0000000..b4a8cfa
--- /dev/null
+++ b/src/ccDarkTheme/components/_thread-composer.scss
@@ -0,0 +1,73 @@
+ec-thread-composer .main-content .title-label,
+ ec-thread-composer .main-content .post-label {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-thread-composer .main-content .title-input,
+ ec-thread-composer .main-content ec-rich-text-editor {
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer .main-content .title-alert,
+ ec-thread-composer .main-content .footer-disclaimer-error {
+ color: var(--TWPT-bad-text)!important;
+}
+
+ec-thread-composer .main-content .hero-button-container material-button {
+ border-color: var(--TWPT-input-underline);
+}
+
+ec-thread-composer .main-content .hero-button-container material-button .content {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+ec-thread-composer .main-content .draft-button {
+ background: revert!important;
+ color: var(--TWPT-interop-blue);
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer .main-content .post-button {
+ background: var(--TWPT-interop-blue)!important;
+ color: #1f1f1f!important;
+}
+
+ec-thread-composer .main-content .post-button[disabled] {
+ background: rgba(227, 227, 227, 0.122)!important;
+}
+
+ec-thread-composer material-drawer {
+ background-color: inherit!important;
+}
+
+ec-thread-composer material-drawer .right-panel {
+ border-left-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer material-drawer .panel-section-title {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-thread-composer material-drawer .panel-section-divider {
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer material-drawer material-radio .radio-label {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-thread-composer material-drawer material-radio .radio-description,
+ ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-dialog.community-video-dialog .footer material-button.cancel {
+ color: var(--TWPT-interop-blue)!important;
+}
+
+material-dialog.community-video-dialog .footer material-button.update:not([disabled]) {
+ background: var(--TWPT-interop-blue)!important;
+ color: #1f1f1f!important;
+}
+
+// Note: see _thread-view.scss. There is a rule for the thread creation footer.
diff --git a/src/ccDarkTheme/components/_thread-insert.scss b/src/ccDarkTheme/components/_thread-insert.scss
new file mode 100644
index 0000000..ef95c99
--- /dev/null
+++ b/src/ccDarkTheme/components/_thread-insert.scss
@@ -0,0 +1,10 @@
+// ec-thread-insert is a card with a summary of a thread when escalating it.
+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: var(--TWPT-subtle-button-background)!important;
+}
diff --git a/src/ccDarkTheme/components/_thread-list.scss b/src/ccDarkTheme/components/_thread-list.scss
new file mode 100644
index 0000000..f5a5890
--- /dev/null
+++ b/src/ccDarkTheme/components/_thread-list.scss
@@ -0,0 +1,95 @@
+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-list .no-results,
+ ec-thread-list .finished-results {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+ec-thread-summary material-expansionpanel.read:not(.checked) {
+ background-color: var(--TWPT-thread-read-background)!important;
+}
+
+ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
+ opacity: 0.8;
+}
+
+ec-thread-summary material-expansionpanel.read .title .icon {
+ opacity: 0.48!important;
+}
+
+ec-thread-summary material-expansionpanel.checked {
+ background-color: #2c4b77!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),
+ material-expansionpanel .duplicate-label {
+ color: #928e89!important;
+}
+
+material-expansionpanel .removed-label {
+ color: var(--TWPT-bad-text)!important;
+}
+
+ec-thread-summary material-expansionpanel ec-safe-html.body,
+ material-expansionpanel .issue-tracking-work-state {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-thread-list material-fab.trigger {
+ background: rgba(124, 172, 248, 0.239)!important;
+ color: var(--TWPT-interop-blue)!important;
+}
+
+.popup-wrapper:has(.actions > .action-wrapper > material-fab.themeable) {
+ background-color: unset!important;
+}
+
+.popup-wrapper .actions > .action-wrapper > material-fab.themeable {
+ background-color: var(--TWPT-button-background)!important;
+ color: var(--TWPT-interop-blue)!important;
+}
+
+// The following section changes the styles of the checkboxes in thread lists,
+// based in the styles defined in the "Checkbox input" section.
+ec-thread-summary material-expansionpanel .action material-button:not(.starred),
+ ec-thread-list material-checkbox material-icon,
+ ec-thread-summary material-expansionpanel .star-button:not(.starred),
+ ec-thread-summary material-expansionpanel .mdc-button.mdc-icon-button material-icon {
+ color: #696867!important; // Custom value to match previous behavior
+ opacity: 1!important;
+}
+
+ec-thread-summary material-expansionpanel .action material-button.starred {
+ color: var(--TWPT-starred)!important;
+}
+
+ec-thread-list material-checkbox material-icon.filled {
+ color: #62a5ff!important; // Custom value to contrast well with the background
+}
+
+// .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment.
+ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon,
+ .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon,
+ ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon,
+ .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon {
+ color: #807d7c!important; // custom value
+}
+
+ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
+ .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon.filled,
+ ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
+ .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon.filled {
+ color: #92c1ff!important; // custom value
+}
diff --git a/src/ccDarkTheme/components/_thread-view.scss b/src/ccDarkTheme/components/_thread-view.scss
new file mode 100644
index 0000000..74efcd6
--- /dev/null
+++ b/src/ccDarkTheme/components/_thread-view.scss
@@ -0,0 +1,192 @@
+ec-question, .heading + .group, ec-message {
+ background-color: var(--TWPT-secondary-background)!important;
+}
+
+ec-thread .no-review-needed {
+ background-color: #155829!important;
+ border-color: var(--TWPT-subtle-border)!important;
+}
+
+// "Original thread" box inside escalations
+sc-tailwind-thread-question-thread-summary .scTailwindThreadQuestionThreadsummarythread-summary {
+ background: var(--TWPT-active-background)!important;
+ border-color: var(--TWPT-card-border)!important;
+}
+
+sc-tailwind-thread-question-thread-summary .scTailwindThreadQuestionThreadsummarydetails {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+sc-tailwind-thread-question-thread-summary .scTailwindThreadQuestionThreadsummarytitle {
+ color: var(--TWPT-primary-text)!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, ec-message .alert {
+ background-color: var(--TWPT-active-background)!important;
+}
+
+ec-question .alert material-icon, ec-message .alert material-icon {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-question .alert ec-icon, ec-message .alert ec-icon {
+ color: var(--TWPT-primary-text)!important;
+ fill: var(--TWPT-primary-text)!important;
+}
+
+ec-question .alert material-button {
+ color: var(--TWPT-link)!important;
+}
+
+ec-question .title {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-user-link .name-text {
+ color: var(--TWPT-link)!important;
+}
+
+ec-message-header ec-avatar svg, ec-message-header .role,
+ ec-message .footer .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 .state-chips material-chip,
+ .TWPT-extrainfo-chip {
+ background-color: var(--TWPT-button-background)!important;
+ border: none!important;
+ box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
+ 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+ 0 1px 3px 0 rgba(0, 0, 0, 0.12)!important;
+}
+
+ec-question .state-chips material-chip .content,
+ .TWPT-extrainfo-chip .TWPT-content {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-question .footer,
+ ec-ask-flow .content-disclaimer {
+ 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 .type {
+ color: var(--TWPT-primary-text)!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: var(--TWPT-button-background)!important;
+}
+
+ec-message .alert {
+ color: var(--TWPT-secondary-text)!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 button.reply.collapsed {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+ec-thread .finished-question {
+ background-color: var(--TWPT-active-background)!important;
+ border: var(--TWPT-card-border)!important;
+}
+
+ec-thread .finished-question .next-question {
+ color: var(--TWPT-link)!important;
+ border-color: var(--TWPT-link)!important;
+}
+
+.material-content .action-bar material-button.has-activity {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+.material-content .action-bar material-button.showing-sidebar {
+ background-color: var(--TWPT-active-background)!important;
+}
+
+// Recommended answers - show in green where we've overwritten the colors
+.recommended-answers {
+ color: #34a853!important;
+}
+
+// Suggested answers - show brighter blue
+.suggested-icon {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+// Help button (shown in the suggested answers header)
+.explanation-icon material-icon {
+ color: var(--TWPT-subtle-button-background)!important;
+}
+
+// Help button tooltip
+.popup .paper-container {
+ background: var(--TWPT-drawer-background)!important;
+}
+
+.explanation-icon material-icon:hover {
+ color: var(--TWPT-blue-A100)!important;
+}
diff --git a/src/ccDarkTheme/components/_user-badge.scss b/src/ccDarkTheme/components/_user-badge.scss
new file mode 100644
index 0000000..3915b62
--- /dev/null
+++ b/src/ccDarkTheme/components/_user-badge.scss
@@ -0,0 +1,55 @@
+/**
+ * Some fixes for the interop PE badge components in the Community Console.
+ *
+ * The |.scTailwindThreadPost_headerUserinfotag| elements have a
+ * |style="--color:#aaaaaa"| attribute which indicates the color of the badge,
+ * and we are transforming it to the dark mode color accordingly.
+ *
+ * The | .scTailwindThreadMessageMessageinteractionsuser-label| elements have a
+ * |style="--userLabelColor: #aaaaaa"| attribute, so we do the same there.
+ *
+ * We match only the hex color instead of the whole attribute because over time
+ * the attributes have changed (spaces have been removed, for instance).
+ */
+
+// Alumnus
+.scTailwindThreadPost_headerUserinfotag[style*="#0F9D58" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#0F9D58" i] {
+ --color: #C4EED0!important;
+ --userLabelColor: #C4EED0!important;
+}
+
+// Bronze
+.scTailwindThreadPost_headerUserinfotag[style*="#896E63" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#896E63" i] {
+ --color: #B9ABA3!important;
+ --userLabelColor: #B9ABA3!important;
+}
+
+// Silver
+.scTailwindThreadPost_headerUserinfotag[style*="#5F6368" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#5F6368" i] {
+ --color: #C4C7C5!important;
+ --userLabelColor: #C4C7C5!important;
+}
+
+// Gold
+.scTailwindThreadPost_headerUserinfotag[style*="#E37400" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#E37400" i] {
+ --color: #F09D00!important;
+ --userLabelColor: #F09D00!important;
+}
+
+// Platinum
+.scTailwindThreadPost_headerUserinfotag[style*="#455A64" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#455A64" i] {
+ --color: #E3E3E3!important;
+ --userLabelColor: #E3E3E3!important;
+}
+
+// Diamond, Community Specialist, Community Manager and Google Employee
+.scTailwindThreadPost_headerUserinfotag[style*="#1A73E8" i],
+ .scTailwindThreadMessageMessageinteractionsuser-label[style*="#1A73E8" i] {
+ --color: #A8C7FA!important;
+ --userLabelColor: #A8C7FA!important;
+}
diff --git a/src/ccDarkTheme/components/buttons/_button.scss b/src/ccDarkTheme/components/buttons/_button.scss
new file mode 100644
index 0000000..10ad660
--- /dev/null
+++ b/src/ccDarkTheme/components/buttons/_button.scss
@@ -0,0 +1,7 @@
+material-button[disabled] {
+ color: rgba(255, 255, 255, .26)!important;
+}
+
+.mdc-button {
+ --gm-colortextbutton-disabled-ink-color: rgba(255, 255, 255, .26);
+}
diff --git a/src/ccDarkTheme/components/buttons/_index.scss b/src/ccDarkTheme/components/buttons/_index.scss
new file mode 100644
index 0000000..ab002dc
--- /dev/null
+++ b/src/ccDarkTheme/components/buttons/_index.scss
@@ -0,0 +1,4 @@
+@forward 'button';
+@forward 'yes-no';
+@forward 'reply';
+@forward 'skip-to-main';
diff --git a/src/ccDarkTheme/components/buttons/_reply.scss b/src/ccDarkTheme/components/buttons/_reply.scss
new file mode 100644
index 0000000..bc7aeaf
--- /dev/null
+++ b/src/ccDarkTheme/components/buttons/_reply.scss
@@ -0,0 +1,5 @@
+material-fab.reply-button,
+ material-fab.reply-fab {
+ background-color: var(--TWPT-link)!important;
+ color: var(--TWPT-primary-background)!important;
+}
diff --git a/src/ccDarkTheme/components/buttons/_skip-to-main.scss b/src/ccDarkTheme/components/buttons/_skip-to-main.scss
new file mode 100644
index 0000000..17eb10f
--- /dev/null
+++ b/src/ccDarkTheme/components/buttons/_skip-to-main.scss
@@ -0,0 +1,3 @@
+.skip-to-main:focus {
+ background: revert!important;
+}
diff --git a/src/ccDarkTheme/components/buttons/_yes-no.scss b/src/ccDarkTheme/components/buttons/_yes-no.scss
new file mode 100644
index 0000000..3127b9e
--- /dev/null
+++ b/src/ccDarkTheme/components/buttons/_yes-no.scss
@@ -0,0 +1,21 @@
+material-yes-no-buttons material-button:not([disabled]).highlighted:not([raised]) {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-yes-no-buttons material-button:not([disabled]).highlighted:not([raised]):is(:hover, :focus) {
+ background-color: revert!important;
+}
+
+material-yes-no-buttons material-button:not([disabled]).highlighted:not([raised]):is(:hover, :focus):after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: currentColor;
+ opacity: .12;
+ border-radius: inherit;
+ pointer-events: none;
+}
diff --git a/src/ccDarkTheme/components/custom/_index.scss b/src/ccDarkTheme/components/custom/_index.scss
new file mode 100644
index 0000000..90ce688
--- /dev/null
+++ b/src/ccDarkTheme/components/custom/_index.scss
@@ -0,0 +1,2 @@
+@forward 'log';
+@forward 'warning';
diff --git a/src/ccDarkTheme/components/custom/_log.scss b/src/ccDarkTheme/components/custom/_log.scss
new file mode 100644
index 0000000..5184810
--- /dev/null
+++ b/src/ccDarkTheme/components/custom/_log.scss
@@ -0,0 +1,7 @@
+.TWPT-log {
+ background-color: #424242!important;
+}
+
+.TWPT-log-entry.TWPT-log-entry--error {
+ color: #ff8A80!important;
+}
diff --git a/src/ccDarkTheme/components/custom/_warning.scss b/src/ccDarkTheme/components/custom/_warning.scss
new file mode 100644
index 0000000..f40844a
--- /dev/null
+++ b/src/ccDarkTheme/components/custom/_warning.scss
@@ -0,0 +1,3 @@
+.TWPT-warning {
+ background-color: #670505!important;
+}
diff --git a/src/ccDarkTheme/components/dialogs/_bug-case-links.scss b/src/ccDarkTheme/components/dialogs/_bug-case-links.scss
new file mode 100644
index 0000000..0d35544
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_bug-case-links.scss
@@ -0,0 +1,7 @@
+.bug-case-links-dialog material-button.add-button {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+ec-bug-case-link material-button {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/dialogs/_dialog.scss b/src/ccDarkTheme/components/dialogs/_dialog.scss
new file mode 100644
index 0000000..5ae0bf1
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_dialog.scss
@@ -0,0 +1,52 @@
+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 material-dialog :is(.header-notice, .notice), material-dialog .legal-prompt {
+ background-color: #394457!important;
+}
+
+ec-movable-dialog material-dialog .main :is(.header-notice, .notice) material-icon[icon="info_outline"] {
+ color: var(--TWPT-blue-A100)!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;
+}
+
+material-dialog main > .user {
+ border-bottom-color: var(--TWPT-card-border)!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;
+}
+
+ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
+ color: var(--TWPT-link)!important;
+}
+
+material-dialog .footer material-button[raised]:not([disabled]),
+ material-dialog .footer .mdc-button.submit:not(:disabled){
+ background-color: var(--TWPT-blue-A100)!important;
+ color: #1f1f1f!important;
+}
diff --git a/src/ccDarkTheme/components/dialogs/_index.scss b/src/ccDarkTheme/components/dialogs/_index.scss
new file mode 100644
index 0000000..59f8798
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_index.scss
@@ -0,0 +1,4 @@
+@forward 'dialog';
+@forward 'private-message';
+@forward 'keyboard-shortcuts';
+@forward 'bug-case-links';
diff --git a/src/ccDarkTheme/components/dialogs/_keyboard-shortcuts.scss b/src/ccDarkTheme/components/dialogs/_keyboard-shortcuts.scss
new file mode 100644
index 0000000..047118b
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_keyboard-shortcuts.scss
@@ -0,0 +1,20 @@
+material-dialog .main.with-scroll-strokes table th {
+ color: var(--TWPT-primary-text)!important;
+}
+
+material-dialog .main.with-scroll-strokes table td {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+material-dialog .main.with-scroll-strokes table tr,
+ material-dialog .main.with-scroll-strokes .shortcut {
+ border-color: var(--TWPT-card-border)!important;
+}
+
+material-dialog .main.with-scroll-strokes.bottom-scroll-stroke {
+ border-bottom-color: var(--TWPT-card-border)!important;
+}
+
+material-dialog .main.with-scroll-strokes.top-scroll-stroke {
+ border-top-color: var(--TWPT-card-border)!important;
+}
diff --git a/src/ccDarkTheme/components/dialogs/_private-message.scss b/src/ccDarkTheme/components/dialogs/_private-message.scss
new file mode 100644
index 0000000..7e531b9
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_private-message.scss
@@ -0,0 +1,7 @@
+ec-movable-dialog .wrapper > .main > main > .top-row > div { // Note: this is too generic so it might match other things
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-movable-dialog .wrapper > .main > main > .top-row .recipient-container .recipient {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_checkbox.scss b/src/ccDarkTheme/components/inputs/_checkbox.scss
new file mode 100644
index 0000000..657373f
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_checkbox.scss
@@ -0,0 +1,35 @@
+// This doesn't apply to checkboxes in the drawer
+material-checkbox material-icon:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-checkbox .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: var(--TWPT-primary-text)!important;
+}
+
+material-checkbox.disabled .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: rgba(255, 255, 255, .54)!important;
+}
+
+/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
+material-checkbox material-icon.filled:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-checkbox:focus:not(.disabled).gm-icons .icon,
+ .gm-icons material-checkbox:focus:not(.disabled) .icon,
+ material-checkbox:hover:not(.disabled).gm-icons .icon,
+ .gm-icons material-checkbox:hover:not(.disabled) .icon {
+ color: #cfd2d8!important; /* custom value */
+}
+
+material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
+ .gm-icons material-checkbox:focus:not(.disabled) .icon.filled,
+ material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
+ .gm-icons material-checkbox:hover:not(.disabled) .icon.filled {
+ color: var(--TWPT-blue-100)!important;
+}
+
+.gm-icons material-checkbox .icon-container::before{
+ background-color: #dfdedb!important; /* custom value */
+}
diff --git a/src/ccDarkTheme/components/inputs/_dropdown-select.scss b/src/ccDarkTheme/components/inputs/_dropdown-select.scss
new file mode 100644
index 0000000..9ea47d8
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_dropdown-select.scss
@@ -0,0 +1,8 @@
+material-dropdown-select dropdown-button {
+ color: var(--TWPT-primary-text)!important;
+}
+
+material-dropdown-select dropdown-button .button.is-disabled .button-text,
+ material-dropdown-select dropdown-button .button.is-disabled material-icon {
+ color: rgba(255, 255, 255, .32)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_index.scss b/src/ccDarkTheme/components/inputs/_index.scss
new file mode 100644
index 0000000..a1d509b
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_index.scss
@@ -0,0 +1,7 @@
+@forward 'checkbox';
+@forward 'dropdown-select';
+@forward 'pickers';
+@forward 'radio';
+@forward 'selector';
+@forward 'switch';
+@forward 'text';
diff --git a/src/ccDarkTheme/components/inputs/_pickers.scss b/src/ccDarkTheme/components/inputs/_pickers.scss
new file mode 100644
index 0000000..2cf091c
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_pickers.scss
@@ -0,0 +1,10 @@
+ec-work-state-picker > button,
+ ec-symptom-picker > button {
+ color: var(--TWPT-secondary-text)!important;
+ background-color: var(--TWPT-button-background)!important;
+ border-color: var(--TWPT-subtle-border)!important;
+}
+
+.material-popup-content .popup-content .title {
+ color: var(--TWPT-primary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_radio.scss b/src/ccDarkTheme/components/inputs/_radio.scss
new file mode 100644
index 0000000..e7b1668
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_radio.scss
@@ -0,0 +1,12 @@
+material-radio .icon-container:not(.checked) material-icon {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-radio .icon-container.checked material-icon {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-radio {
+ --gm-radio-stroke-color--checked: var(--TWPT-blue-A100);
+ --gm-radio-ink-color: var(--TWPT-blue-A100);
+}
diff --git a/src/ccDarkTheme/components/inputs/_selector.scss b/src/ccDarkTheme/components/inputs/_selector.scss
new file mode 100644
index 0000000..e0a62f0
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_selector.scss
@@ -0,0 +1,51 @@
+// This applies not only to the selector but also to the ec-work-state-picker.
+material-list, .popup .item-group-list {
+ background-color: var(--TWPT-drawer-background)!important;
+}
+
+material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
+ .popup .item-group-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,
+ material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
+ .popup .item-group-list material-select-item:hover,
+ .popup .item-group-list material-select-item:focus,
+ .popup .item-group-list material-select-item.active,
+ .popup .item-group-list material-select-dropdown-item:hover,
+ .popup .item-group-list material-select-dropdown-item:focus,
+ .popup .item-group-list material-select-dropdown-item.active,
+ .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
+ background-color: var(--TWPT-highlighted-item-background)!important;
+}
+
+material-list .single-select-item,
+ material-list .menu-item-label,
+ material-list .label,
+ material-list .text-segment,
+ menu-item-groups .single-select-item,
+ menu-item-groups .menu-item-label,
+ menu-item-groups .label,
+ menu-item-groups .text-segment {
+ color: rgba(255, 255, 255, .87)!important;
+}
+
+.popup .item-group-list material-icon {
+ color: rgba(255, 255, 255, .7)!important;
+}
+
+material-list [group] > [label] {
+ color: #8a8a8a!important;
+}
+
+// This is shown in the new thread view
+ec-forum-language-picker .labeled-select .select-label {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_switch.scss b/src/ccDarkTheme/components/inputs/_switch.scss
new file mode 100644
index 0000000..4d1f61d
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_switch.scss
@@ -0,0 +1,15 @@
+.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
+ background-color: #7d7d7d!important; /* custom value */
+}
+
+.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
+ border-color: #fff!important; /* custom value */
+}
+
+.mdc-switch.mdc-switch--checked .mdc-switch__track {
+ background-color: var(--TWPT-blue-A100)!important;
+}
+
+.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
+ border-color: var(--TWPT-blue-A100)!important;
+}
diff --git a/src/ccDarkTheme/components/inputs/_text.scss b/src/ccDarkTheme/components/inputs/_text.scss
new file mode 100644
index 0000000..b61da70
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_text.scss
@@ -0,0 +1,70 @@
+material-input input {
+ color: var(--TWPT-primary-text)!important;
+}
+
+material-input .label-text,
+ material-input .hint-text,
+ material-input .counter,
+ material-input .leading-text,
+ material-input .leading-text material-icon {
+ color: var(--TWPT-subtle-button-background)!important;
+}
+
+material-input .underline .unfocused-underline {
+ background-color: var(--TWPT-input-underline)!important;
+}
+
+material-input .underline .focused-underline {
+ background-color: var(--TWPT-blue-A100)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input) .baseline {
+ border-color: var(--gm-outlinedtextfield-outline-color)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input) .baseline:hover {
+ border-color: var(--gm-outlinedtextfield-outline-color)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input) .baseline.focused {
+ border-color: var(--gm-outlinedtextfield-outline-color--stateful)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input).invalid .baseline {
+ border-color: var(--gm-outlinedtextfield-outline-color--error)!important;
+}
+
+:is(material-input.gm-input, .gm-input material-input).invalid .error-text {
+ color: var(--gm-outlinedtextfield-helper-text-color--error)!important;
+}
+
+label .label,
+ .input-field > .label {
+ color: var(--TWPT-primary-text)!important;
+}
+
+.mdc-text-field--outlined:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-floating-label {
+ color: var(--gm-outlinedtextfield-label-color)!important;
+}
+
+.mdc-text-field--outlined:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-notched-outline :is(.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing) {
+ border-color: var(--gm-outlinedtextfield-outline-color)!important;
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--focused):not(.mdc-text-field--disabled) .mdc-floating-label {
+ color: var(--gm-outlinedtextfield-label-color--error)!important;
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-notched-outline :is(.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing) {
+ border-color: var(--gm-outlinedtextfield-outline-color--error)!important;
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--focused):not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
+ color: var(--gm-outlinedtextfield-helper-text-color--error)!important;
+}
+
+// Input underline
+material-input .underline .unfocused-underline,
+ material-dropdown-select dropdown-button [buttondecorator] {
+ border-color: var(--TWPT-input-underline)!important;
+}
diff --git a/src/ccDarkTheme/components/notifications/_bell.scss b/src/ccDarkTheme/components/notifications/_bell.scss
new file mode 100644
index 0000000..1e3d0b5
--- /dev/null
+++ b/src/ccDarkTheme/components/notifications/_bell.scss
@@ -0,0 +1,3 @@
+notification-bell:focus {
+ background-color: rgba(255, 255, 255, .10)!important;
+}
diff --git a/src/ccDarkTheme/components/notifications/_index.scss b/src/ccDarkTheme/components/notifications/_index.scss
new file mode 100644
index 0000000..f5445bb
--- /dev/null
+++ b/src/ccDarkTheme/components/notifications/_index.scss
@@ -0,0 +1,2 @@
+@forward 'bell';
+@forward 'panel';
diff --git a/src/ccDarkTheme/components/notifications/_panel.scss b/src/ccDarkTheme/components/notifications/_panel.scss
new file mode 100644
index 0000000..6e443ec
--- /dev/null
+++ b/src/ccDarkTheme/components/notifications/_panel.scss
@@ -0,0 +1,32 @@
+.notification-panel .header {
+ border-bottom-color: var(--TWPT-card-border)!important;
+}
+
+.notification-panel .header material-button {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+.notification-panel .cards-container .promo-message {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+.notification-panel .cards-container .promo-message .header-text {
+ color: var(--TWPT-primary-text)!important;
+}
+
+.notification-panel .cards-container ec-notification-card-content {
+ border-bottom-color: var(--TWPT-card-border)!important;
+}
+
+.notification-panel .cards-container ec-notification-card-content .text {
+ color: var(--TWPT-primary-text)!important;
+}
+
+.notification-panel .cards-container ec-notification-card-content .text a {
+ color: var(--TWPT-link)!important;
+}
+
+.notification-panel .cards-container ec-notification-card-content .time,
+ .notification-panel .cards-container ec-notification-card-content .close material-button {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/popups/_account-selector.scss b/src/ccDarkTheme/components/popups/_account-selector.scss
new file mode 100644
index 0000000..f4da84b
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_account-selector.scss
@@ -0,0 +1,12 @@
+.popup-wrapper .profile .email {
+ color: var(--TWPT-subtle-button-background)!important;
+}
+
+material-gaia-picker-footer {
+ color: var(--TWPT-subtle-button-background)!important;
+ background-color: var(--TWPT-active-background)!important;
+}
+
+material-gaia-picker-footer material-button {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/popups/_announcements.scss b/src/ccDarkTheme/components/popups/_announcements.scss
new file mode 100644
index 0000000..03b12d1
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_announcements.scss
@@ -0,0 +1,30 @@
+ec-announcements-content .header,
+ ec-announcements-content .no-announcements,
+ ec-announcements-content .announcement {
+ border-bottom-color: var(--TWPT-card-border)!important;
+}
+
+ec-announcements-content .header .title, ec-announcements-content .announcement-title {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-announcements-content .announcement-date {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+ec-announcements-content .no-announcements-message {
+ color: #c3bfbc!important;
+}
+
+ec-announcements-content .view-all-link,
+ ec-announcements-content .read-more-button {
+ color: var(--TWPT-link)!important;
+}
+
+ec-announcements-content ::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, .26)!important;
+}
+
+ec-announcements-content ::-webkit-scrollbar-thumb:hover {
+ background-color: #4285f4!important;
+}
diff --git a/src/ccDarkTheme/components/popups/_index.scss b/src/ccDarkTheme/components/popups/_index.scss
new file mode 100644
index 0000000..a12ea2c
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_index.scss
@@ -0,0 +1,3 @@
+@forward 'popup';
+@forward 'account-selector';
+@forward 'announcements';
diff --git a/src/ccDarkTheme/components/popups/_popup.scss b/src/ccDarkTheme/components/popups/_popup.scss
new file mode 100644
index 0000000..11f01e7
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_popup.scss
@@ -0,0 +1,8 @@
+// Generic popup (for notification bell, account selector, etc.)
+.popup-wrapper {
+ background-color: var(--TWPT-drawer-background)!important;
+
+ .header-text {
+ color: var(--TWPT-primary-text)!important;
+ }
+}