Adwaita with Unity 8 colours

Actually, that is what I’ll be working on - Try and create “Adwaita-Darker” :wink: This means nothing more than

  1. Updating the Adwaita Source from Gitlab
  2. Mixing the Adwaita-dark headerbar with the Adwaita viewport (To fix the harsh top bar contrast) with 0 edits
  3. Creating different variants (Highlight Colors)
  4. Branching & Creating different versions (Light, Darker, Dark) - This will be like Radiance - Ambiance - Ambiance-dark → Easy upgrade path
  5. Create Icon Versions for variants
  6. Create Wallpaper Versions for variants (Hue) and versions (Shade)
  7. Create GNOME Shell themes for variants (Sliders like on Communitheme) and versions (Dark/Light titlebar when maximized - will fix the weird contrast on Radiance/the light version
  8. Continue with the steps mentioned above

→ Sorry if I’m hard to understand (Still a student & German), just ask if something is unclear :wink:

4 Likes

This is all looking very nice . Great work . I am an Adwaita fan so this makes me happy .
I’d like to see work on this continue even if it doesn’t get used for a ambiance replacement .

Adw8u theme ? :wink:

1 Like

That’s a great name xD

1 Like

Alright, I’ve justed pushed tonights progress in a new branch. It’s very buggy, I’ve not been able to apply the darker css to the button without copying the compiled css (tried it for hours). If anyone could help i’d appreciate it :wink:

Will this theme still include the Ubuntu-Dock ?
Id still like to see the ubuntu icon there .

I am a big fan of going down this path. Congratulations.

The good thing about this approach is that we can develop, not only sth that looks like Adwaita (a theme I love, but that doesn’t take too much time to develop since it’s already there), but also that we can have an alternative to both Ambiance and Radiance PLUS dark GTK 3 variants for certain applications.

Can I install it with a PPA and test it? :slight_smile:

1 Like

Guys, please let’s continue this over there:

No reason to discuss it in two different places.

This group only targets on a version of Adwaita which uses the Unity 8 colours. Nothing more. The communitheme-team is working on a completely new theme for Ubuntu. We shouldnt hinder their work by mixing this two projects.

5 Likes

And you can pronounce it the same as Adwaita

Adwaita-Day-Orange

Adwaita-Day-Aubergine

Adwaita with Unity 8 colours - Aubergine Wallpaper

Adwaita Dark with Unity 8 colours - Aubergine Wallpaper

Adwaita with Unity 8 colours - Orange Wallpaper

Adwaita Dark with Unity 8 colours - Orange Wallpaper

5 Likes

The wallpapers look great, thanks for creating them! I’ll be looking into the Icons soon and match them w/ the versions. Not sure whether the “darker” version is happening soon, I’ve created a branch for it but it’s very buggy right now :wink:

Also, considering the shell theme: Should I make the top bar & dock white when maximized? Would be the same as Radiance then & fix the harsh contrast

I liked that it was black with dark brown, similar to gnome vanilla.

A suggestion of the icons could be the same as the ubuntu-mate with the orange color

@initu-icr I will look into it!
There have been some updates, other versions are now available. To contribute to the orange/blue discusson, below are the latest screenshots for a comparison (Icons are Papirus-Adapta, matches the color nearly perfectly) (Check the Github Repo for more) :


As a comparison, here is Ambiance, which would currently be shipped on every Ubuntu install until at least 2020 if Communitheme won’t be done in time:

And Adwaita with Ubuntu Orange (Can be used with Adwaita-Ubuntu since the lastest commit):

Blue can also be consistent, after all the suru blue and orange colors are nearly complementary colors :wink:

2 Likes

The only changes to make Adwaita look like this are ~10 LOC, so this would be a super maintainable alternative to Ambiance if Communitheme does not get done in time. I’ll look into an orange and blue Adwaita icon theme tomorrow and probably two shell theme variants if time allows.

1 Like

Black for the top bar That’s inline with unity8 the dock I prefer it to window dodge but is touching a window I still think it should follow the unity8 principles.

Alright, I’ll consider this. Couldn’t help myself so i did it anyway - I do quite like it, screenshots and code will be up in a few minutes

It’s done!
I’ve created a little fork of communitheme that you can use to make the titlebars white - essentially this is like a sane version of radiance. Will be based on Adwaita of course but that will be a minor change (Will be done tomorrow).
To use it, you’ll have to do the following (BACKUP the files before doing this):

/* Add the following to the end of
admin:///usr/share/gnome-shell/theme/communitheme/gnome-shell.css: */

/* TOP BAR */
#panel {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 3px 3px 4px rgba(0, 0, 0, 0.2);
  /* transition from solid to transparent */
  transition-duration: 500ms;
  font-weight: 450;
  height: 1.86em; }
  #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
    background-color: transparent; }
  #panel #panelLeft, #panel #panelCenter {
    spacing: 4px; }
  #panel .panel-corner {
    -panel-corner-radius: 0;
    -panel-corner-background-color: rgba(255, 255, 255, 0.35);
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent; }
    #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
      -panel-corner-border-color: #eb6637; }
    #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
      -panel-corner-radius: 0;
      -panel-corner-background-color: transparent;
      -panel-corner-border-color: transparent; }
  #panel .panel-button {
    -natural-hpadding: 12px;
    -minimum-hpadding: 6px;
    font-weight: 450;
    color: #F7F7F7;
    text-shadow: none;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
    transition-duration: 100ms; }
    #panel .panel-button .app-menu-icon {
      -st-icon-style: symbolic;
      margin-left: 4px;
      margin-right: 4px; }
    #panel .panel-button .system-status-icon,
    #panel .panel-button .app-menu-icon > StIcon,
    #panel .panel-button .popup-menu-arrow {
      icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); }
    #panel .panel-button:hover {
      color: white;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); }
      #panel .panel-button:hover .system-status-icon,
      #panel .panel-button:hover .app-menu-icon > StIcon,
      #panel .panel-button:hover .popup-menu-arrow {
        icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); }
    #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
      background-color: rgba(0, 0, 0, 0.01);
      box-shadow: inset 0px -3px #E95420;
      color: white; }
      #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
        icon-shadow: none;
        /*black 0 2px 2px;*/ }
    #panel .panel-button .system-status-icon {
      icon-size: 1.09em;
      padding: 0 5px; }
    .unlock-screen #panel .panel-button,
    .login-screen #panel .panel-button,
    .lock-screen #panel .panel-button {
      color: white; }
      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
      .login-screen #panel .panel-button:focus,
      .login-screen #panel .panel-button:hover,
      .login-screen #panel .panel-button:active,
      .lock-screen #panel .panel-button:focus,
      .lock-screen #panel .panel-button:hover,
      .lock-screen #panel .panel-button:active {
        color: white; }
  #panel .panel-status-indicators-box,
  #panel .panel-status-menu-box {
    spacing: 2px; }
  #panel .power-status.panel-status-indicators-box {
    spacing: 0; }
  #panel .screencast-indicator {
    color: #F89B0F; }
  #panel.solid {
    background-color: #E8E8E7;
    /* transition from transparent to solid */
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.4)!important;
    transition-duration: 1000ms; }
    #panel.solid .panel-corner {
      -panel-corner-background-color: white; }
    #panel.solid .panel-button {
      color: #000;
      text-shadow: none; }
      #panel.solid .panel-button:hover {
        color: #000; }
    #panel.solid .system-status-icon,
    #panel.solid .app-menu-icon > StIcon,
    #panel.solid .popup-menu-arrow {
      icon-shadow: none; }

/* Add the following to the end of
admin:///usr/share/gnome-shell/extensions/ubuntu-dock@ubuntu.com/stylesheet.css: */

#dashtodockContainer {
    background-color: rgba(255, 255, 255, 0.2)!important;
}

#dashtodockContainer .notification-badge {
    /* Change the background here to whatever your variant of Adwaita-Ubuntu uses */
    background-color: #23A5D4;
}

#dashtodockContainer.running-dots .app-well-app.focused .overview-icon, #dashtodockContainer.dashtodock .app-well-app.focused .overview-icon {
    /* Make the current app indicator dark */
    background-color: rgba(0, 0, 0, 0.2);
}

#dashtodockContainer #dash {
    /* Make the dash white by default */
    background-color: rgba(255, 255, 255, 0.2)!important;
}

#dashtodockContainer.opaque {
    background-color: rgba(255, 255, 255, 0.8)!important;
}

#dashtodockContainer.transparent {
    background-color: rgba(255, 255, 255, 0.1)!important;
}

Instructions are also in the Github repo. I will obviously create a real adwaita theme out of this in the future as this is a working (Even transparency changes work) but quite ugly solution :slight_smile:
Below are some screenshots from the different variants:

I personally start to really like the blue version with adwaita/suru icons now as well, especially when highlighting things and in the context menu, it does indeed look … fresh, like the light water on a tropical island’s beach :wink:

What do you think about it? This is a very minimal edit and especially when used with Adwaita it could be done with less then ~20 LOC.

2 Likes

I guess a blue version (folder colors) of both suru and adwaita (+ an orange version here) icons is next (I guess Papirus/Material Design is out of the question)

1 Like