Update dark theme: Fix notifications, popover and progress bar. Update colors.

peertube-theme-dark/assets/style.css

@@ -1,55 +1,137 @@
-body {
-  --mainBackgroundColor: #111111;
-  --mainForegroundColor: #e0e0e1;
-
-  --mainBackgroundHoverColor: #30343b;
-
-  /* Compat with PeerTube < 3.2 */
-  --submenuColor: rgb(32, 32, 32);
-
-  --submenuBackgroundColor: rgb(32, 32, 32);
-
-  --inputForegroundColor: #e0e0e1;
-  --inputBackgroundColor: #30363d;
-  --inputPlaceholderColor: #aaa;
-
-  --textareaForegroundColor: #e0e0e1;
-  --textareaBackgroundColor: #30363d;
-  --markdownTextareaBackgroundColor: #30363d;
-
-  --greyForegroundColor: #bbb;
-  --greyBackgroundColor: #232830;
-  --greySecondaryBackgroundColor: #30343b;
-
-  --actionButtonColor: #bbb;
-  --activatedActionButtonColor: #fff;
-
-  --channelBackgroundColor: rgb(32, 32, 32);
-  --mainColorVeryLight: #292121;
+:root {
+  --bs-border-color: #3d3f41;
+  --bs-link-color: #257bfd;
+  --bs-link-hover-color: #2467cc
 }
 
-.icon-logo {
-  min-width: 29px;
-  min-height: 29px;
-  background-color: #fff;
-  background-origin: content-box;
-  border-radius: 20px;
-  padding: 3px 4px 3px 8px;
+body {
+
+  --mainBackgroundColor: #222;
+  --mainForegroundColor: #e0e0e1;
+  --mainBackgroundHoverColor: #fef3ec;
+
+  /* Compat with PeerTube < 3.2 */
+  --submenuColor: #202020;
+  --submenuBackgroundColor: #2c2c2c;
+
+  --inputForegroundColor: #e0e0e1;
+  --inputBackgroundColor: var(--mainBackgroundColor);
+  --inputPlaceholderColor: #d1d1d1;
+  --textareaForegroundColor: #e0e0e1;
+  --textareaBackgroundColor: var(--mainBackgroundColor);
+  --markdownTextareaBackgroundColor: #30363d;
+  --greyForegroundColor: #bbb;
+  --greyBackgroundColor: #464340;
+  --greySecondaryBackgroundColor: #4e4d4a;
+  --actionButtonColor: #bbb;
+  --activatedActionButtonColor: #fff;
+  --channelBackgroundColor: #303030;
+  --mainColorVeryLight: #242320;
+  --mainColorLightest: #3f3834;
+  --inputBorderColor: #a5a5a5;
+  --hoverColor: #ffffff0d
+}
+
+.dropdown-header {
+  color: var(--mainForegroundColor)
+}
+
+.dropdown-item:active {
+  background-color: var(--hoverColor) !important
+}
+
+.dropdown-menu {
+  --bs-dropdown-link-hover-bg: var(--hoverColor) !important
 }
 
 .dropdown-menu,
 .dropdown-divider {
-  border-color: var(--inputBorderColor);
+  border-color: var(--inputBorderColor)
 }
 
-.dropdown-header {
-  color: var(--mainForegroundColor);
+.icon-logo {
+  background-color: #fff;
+  background-origin: content-box;
+  border-radius: 20px;
+  min-height: 29px;
+  min-width: 29px;
+  padding: 3px 4px 3px 8px
 }
 
-.accordion-button {
-  background-color: #292121;
+.ng-dropdown-panel {
+  border-color: var(--inputBorderColor)
 }
 
-.alert .link-orange {
-  color: #292121;
+.ng-optgroup {
+  background-color: var(--mainBackgroundColor) !important;
+  color: var(--inputPlaceholderColor) !important;
+}
+
+.ng-option-marked,
+.ng-select-container,
+.ng-select-container.ng-has-value,
+.ng-select-container.ng-select-focused.ng-select-opened,
+.ng-select-multiple {
+  background-color: var(--mainBackgroundColor) !important;
+  color: var(--mainForegroundColor) !important
+}
+
+.ng-option:hover,
+.ng-option.ng-option-selected {
+  background-color: #555 !important;
+  color: var(--mainForegroundColor) !important
+}
+
+.ng-select-container .ng-arrow,
+.peertube-select-container::after {
+  border-top-color: var(--mainForegroundColor) !important
+}
+
+.ng-select.ng-select.ng-select-opened>.ng-select-container .ng-arrow {
+  border-bottom-color: var(--mainForegroundColor) !important
+}
+
+.notification {
+  border-bottom-color: rgba(255, 255, 255, 0.1) !important
+}
+
+.notification svg,
+.notifications-header svg,
+.menu-link svg {
+  color: var(--greyForegroundColor) !important
+}
+
+.notification.unread {
+  background-color: #ffffff0d !important
+}
+
+.notifications-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+  color: var(--greyForegroundColor) !important
+}
+
+.popover {
+  --bs-popover-bg: var(--mainBackgroundColor) !important;
+  --bs-popover-body-color: var(--mainForegroundColor) !important;
+  --bs-popover-box-shadow: 0 .5rem 1rem rgba(255, 255, 255, .15) !important;
+  --bs-popover-header-color: var(--mainForegroundColor) !important
+}
+
+.progress {
+  background-color: var(--greySecondaryBackgroundColor) !important
+}
+
+.progress>span,
+.all-notifications,
+.notifications-header svg:hover,
+.menu-link:hover svg {
+  color: var(--mainForegroundColor) !important
+}
+
+.root-header {
+  box-shadow: 0 1px 3px rgba(200, 200, 200, .10) !important
+}
+
+input#search-video {
+  box-shadow: rgba(200, 200, 200, 0.1) 0 1px 20px 0 !important
 }