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;
+}