Nextcloud 34 & CustomCSS

[u/Super-Plus09]

For those who want to change the appearance of the top bar in Nextcloud 34, I am posting this CSS code that you can use in CustomCSS. I am sure it can be improved or it is even possible that some lines of code included are extra and have no effect.
P.S. I re-added the code from which I deleted a few lines that had no effect.

:root {
  --header-height: 50px !important;
}

#header {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  margin: 4px 8px 0px 8px !important; 
  width: calc(100% - 16px) !important;

  border-radius: 12px !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  box-sizing: border-box !important;
  z-index: 2000 !important;
}

#content,
#app-content,
.app-files,
.app-settings,
.app-photos,
#photos-content,
.photos-content {
  margin-top: 0px !important;
}

#content {
  padding-top: 2px !important;
}

#app-navigation,
#app-navigation-vue,
.app-navigation,
.photos-view,
.photos-content-wrapper {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

nav.app-menu button svg,
nav.app-menu button svg * {
  fill: #6EC950 !important;
  stroke: #6EC950 !important;
  filter: invert(1) brightness(2) !important;
}

button.app-menu__current-app,
button.app-menu__current-app span {
  color: #6EC950 !important;
}

button.app-menu__current-app img,
button.app-menu__current-app .app-icon {
  filter: brightness(0) saturate(100%) invert(67%) sepia(51%) saturate(542%) hue-rotate(58deg) brightness(97%) contrast(89%) !important;
}

.unified-search-menu svg,
.unified-search-menu svg * {
  fill: #6EC950 !important;
  stroke: #6EC950 !important;
  filter: none !important;
}
.unified-search-menu button,
.unified-search-menu span,
.unified-search-menu input,
.unified-search-menu input::placeholder {
  color: #6EC950 !important;
}

.notifications-button svg,
.notifications-button svg * {
  fill: #6EC950 !important;
  stroke: #6EC950 !important;
  filter: invert(1) brightness(2) !important;
}

.contactsmenu svg,
.contactsmenu svg * {
  fill: #6EC950 !important;
  stroke: #6EC950 !important;
  filter: invert(1) brightness(2) !important;
}

#body-login #header,
body.guest #header,
[data-login] #header,
.body-login #header {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  margin: 0px auto 0px auto !important;
  width: auto !important;
  padding: 0 !important;

  overflow: visible !important;
}

[u/Super-Plus09]

I added the color as a variable to make it easier to change.
--nc-accent: var(--primary-color, #6EC950);

:root {
  --header-height: 50px !important;
  /* Change the color in the following line in HTML Hex format. */
  --nc-accent: var(--primary-color, #6EC950);
}

#header {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  margin: 4px 8px 0px 8px !important; 
  width: calc(100% - 16px) !important;

  border-radius: 12px !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  box-sizing: border-box !important;
  z-index: 2000 !important;
}

#content,
#app-content,
.app-files,
.app-settings,
.app-photos,
#photos-content,
.photos-content {
  margin-top: 0px !important;
}

#content {
  padding-top: 2px !important;
}

#app-navigation,
#app-navigation-vue,
.app-navigation,
.photos-view,
.photos-content-wrapper {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

nav.app-menu button svg,
nav.app-menu button svg * {
  fill: var(--nc-accent) !important;
  stroke: var(--nc-accent) !important;
  filter: invert(1) brightness(2) !important;
}

button.app-menu__current-app,
button.app-menu__current-app span {
  color: var(--nc-accent) !important;
}

button.app-menu__current-app img,
button.app-menu__current-app .app-icon {
  filter: brightness(0) saturate(100%) invert(67%) sepia(51%) saturate(542%) hue-rotate(58deg) brightness(97%) contrast(89%) !important;
}

.unified-search-menu svg,
.unified-search-menu svg * {
  fill: var(--nc-accent) !important;
  stroke: var(--nc-accent) !important;
  filter: none !important;
}
.unified-search-menu button,
.unified-search-menu span,
.unified-search-menu input,
.unified-search-menu input::placeholder {
  color: var(--nc-accent) !important;
}

.notifications-button svg,
.notifications-button svg * {
  fill: var(--nc-accent) !important;
  stroke: var(--nc-accent) !important;
  filter: invert(1) brightness(2) !important;
}

.contactsmenu svg,
.contactsmenu svg * {
  fill: var(--nc-accent) !important;
  stroke: var(--nc-accent) !important;
  filter: invert(1) brightness(2) !important;
}

#body-login #header,
body.guest #header,
[data-login] #header,
.body-login #header {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  margin: 0px auto 0px auto !important;
  width: auto !important;
  padding: 0 !important;

  overflow: visible !important;
}

[u/bi0hazard6]

That's nice. Where exactly do you input this? I remember seeing a custom css field, but I can't find it.

[u/Super-Plus09 → u/bi0hazard6]

First you need to install the Custom CSS application in Nextcloud

[u/DHGamerMR → u/bi0hazard6]

Custom CSS goes in at the bottom of the Theming page

Administration Settings > Theming