Introduce darkmode theme (#1969)

This commit introduces a new more relaxed theme, the dark theme!
In addition, the theme can now be selected according to the system defaults.
And the other themes, as well as the general structure were unified/simplified.

Co-authored-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
Co-authored-by: Matthias Thieroff <matthias.thieroff@cloudogu.com>

gradle/changelog/introduce_darkmode.yaml

@@ -0,0 +1,4 @@
+- type: added
+  description: Introduce darkmode theme ([#1969](https://github.com/scm-manager/scm-manager/pull/1969))
+- type: changed
+  description: Default theme is selected according to system defaults ([#1969](https://github.com/scm-manager/scm-manager/pull/1969))

scm-ui/ui-components/.storybook/preview.js

@@ -87,7 +87,8 @@ export const parameters = {
     default: "light",
     list: [
       { name: "light", color: "#fff" },
-      { name: "highcontrast", color: "#000" },
+      { name: "highcontrast", color: "#050514" },
+      { name: "dark", color: "#121212" },
     ],
   },
   options: {

scm-ui/ui-components/src/DangerZone.tsx

@@ -41,10 +41,9 @@ export const DangerZone = styled.div`
     }
   }
 
-  // TODO ersetzen?
   > *:not(:last-child) {
     padding-bottom: 1.5rem;
-    border-bottom: solid 2px whitesmoke;
+    border-bottom: solid 2px var(--scm-border-color);
   }
   @media screen and (max-width: ${devices.tablet.width}px) {
     .button {

scm-ui/ui-components/src/SyntaxHighlighter.tsx

@@ -34,10 +34,12 @@ import useScrollToElement from "./useScrollToElement";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import copyToClipboard from "./CopyToClipboard";
+import { Button } from "./buttons";
 
 const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/;
 
-const TopRightButton = styled.button`
+const TopRightButton = styled(Button)`
+  height: inherit;
   position: absolute;
   display: none;
   top: 0;
@@ -90,7 +92,6 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
   if (value && value.length > 1 && value.endsWith("\n")) {
     valueWithoutTrailingLineBreak = value.substr(0, value.length - 1);
   }
-
   return (
     <Container ref={setContentRef} className="is-relative">
       <ReactSyntaxHighlighter
@@ -101,7 +102,7 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
       >
         {valueWithoutTrailingLineBreak}
       </ReactSyntaxHighlighter>
-      <TopRightButton className="is-clickable" title={t("syntaxHighlighting.copyButton")} onClick={copy}>
+      <TopRightButton className="is-small" title={t("syntaxHighlighting.copyButton")} action={copy}>
         <i className={copied ? "fa fa-clipboard-check" : "fa fa-clipboard"} />
       </TopRightButton>
     </Container>

scm-ui/ui-components/src/buttons/CreateButton.tsx

@@ -27,7 +27,7 @@ import Button, { ButtonProps } from "./Button";
 import classNames from "classnames";
 
 const Wrapper = styled.div`
-  border: 2px solid #e9f7fd;
+  border: 2px solid var(--scm-border-color);
 `;
 
 export default class CreateButton extends React.Component<ButtonProps> {

scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx

@@ -37,7 +37,7 @@ type Props = {
 const Button = styled.button`
   width: 50px;
   &:hover {
-    color: #33b2e8;
+    color: var(--scm-info-color);
   }
 `;
 

scm-ui/ui-components/src/popover/Popover.tsx

@@ -56,8 +56,8 @@ const PopoverContainer = styled.div<ContainerProps>`
     top: 100%;
     left: ${props => props.width / 2}px;
     border-color: transparent;
-    border-bottom-color: white;
+    border-bottom-color: var(--scm-popover-border-color);
-    border-left-color: white;
+    border-left-color: var(--scm-popover-border-color);
     border-width: 0.4rem;
     margin-left: -0.4rem;
     margin-top: -0.4rem;

scm-ui/ui-components/src/repos/DiffButton.tsx

@@ -28,7 +28,7 @@ import Tooltip from "../Tooltip";
 const Button = styled.button`
   width: 50px;
   &:hover {
-    color: #33b2e8;
+    color: var(--scm-info-color);
   }
 `;
 

scm-ui/ui-components/src/repos/JumpToFileButton.tsx

@@ -30,7 +30,7 @@ import Icon from "../Icon";
 const Button = styled(Link)`
   width: 50px;
   &:hover {
-    color: #33b2e8;
+    color: var(--scm-info-color);
   }
 `;
 

scm-ui/ui-components/src/repos/annotate/AnnotatePopover.tsx

@@ -50,8 +50,8 @@ const PopoverContainer = styled.div`
     top: 100%;
     left: 5.5em;
     border-color: transparent;
-    border-bottom-color: white;
+    border-bottom-color: var(--scm-popover-border-color);
-    border-left-color: white;
+    border-left-color: var(--scm-popover-border-color);
     border-width: 0.4rem;
     margin-left: -0.4rem;
     margin-top: -0.4rem;

scm-ui/ui-components/src/table/Table.stories.tsx

@@ -62,7 +62,7 @@ storiesOf("Table", module)
           };
         }}
       >
-        {(row: any) => <b style={{ color: "red" }}>{row.lastname}</b>}
+        {(row: any) => <b className="has-text-danger">{row.lastname}</b>}
       </Column>
       <Column header={"E-Mail"}>{(row: any) => <span>{row.email}</span>}</Column>
     </Table>

scm-ui/ui-styles/public/_styleguide.html

@@ -373,7 +373,7 @@
   <section class="section container">
     <div class="columns is-size-7">
       <section class="column is-one-third">
-        <div style="font-weight: bold; margin-bottom: 0.5rem;">
+        <div class="has-text-weight-bold mb-2">
           <span
             class="image is-rounded"
             style="float: left; margin-right: 0.3em; padding-top: 0.2em; width: 1em; height: 1em;"
@@ -395,7 +395,7 @@
         </ul>
       </section>
       <section class="column is-one-third">
-        <div style="font-weight: bold; margin-bottom: 0.5rem;">
+        <div class="has-text-weight-bold mb-2">
           <i class="fas fa-info-circle fa-fw"></i>
           Information
         </div>
@@ -405,7 +405,7 @@
         </ul>
       </section>
       <section class="column is-one-third">
-        <div style="font-weight: bold; margin-bottom: 0.5rem;">
+        <div class="has-text-weight-bold mb-2">
           <i class="fas fa-life-ring fa-fw"></i>
           Support
         </div>
@@ -424,7 +424,7 @@
       <h3 class="subtitle is-4">Headlines</h3>
       <div class="notification">Subheadlines should only be used if there is reasonable content for them.</div>
       <div class="container">
-        <div class="box" style="box-shadow: none; border: 1px solid #dbdbdb;">
+        <div class="box" style="box-shadow: none; border: 1px solid var(--scm-border-color);">
           <h1 class="title">Users</h1>
           <h2 class="subtitle">Create, read, update and delete users</h2>
         </div>
@@ -1094,6 +1094,7 @@
               <p class="control"><a class="button is-success">Success</a></p>
               <p class="control"><a class="button is-warning">Warning</a></p>
               <p class="control"><a class="button is-danger">Danger</a></p>
+              <p class="control"><a class="button">Default</a></p>
             </div>
           </div>
         </div>
@@ -1113,6 +1114,7 @@
               <p class="control"><a class="button is-success" disabled="">Success</a></p>
               <p class="control"><a class="button is-warning" disabled="">Warning</a></p>
               <p class="control"><a class="button is-danger" disabled="">Danger</a></p>
+              <p class="control"><a class="button" disabled="">Default</a></p>
             </div>
           </div>
         </div>
@@ -1132,6 +1134,7 @@
               <p class="control"><a class="button is-success is-hovered">Success</a></p>
               <p class="control"><a class="button is-warning is-hovered">Warning</a></p>
               <p class="control"><a class="button is-danger is-hovered">Danger</a></p>
+              <p class="control"><a class="button is-hovered">Default</a></p>
             </div>
           </div>
         </div>
@@ -1152,6 +1155,7 @@
                 <p class="control"><a class="button is-success is-active">Success</a></p>
                 <p class="control"><a class="button is-warning is-active">Warning</a></p>
                 <p class="control"><a class="button is-danger is-active">Danger</a></p>
+                <p class="control"><a class="button is-active">Default</a></p>
               </div>
             </div>
           </div>
@@ -1176,6 +1180,7 @@
                 <p class="control"><a class="button is-success is-loading">Success</a></p>
                 <p class="control"><a class="button is-warning is-loading">Warning</a></p>
                 <p class="control"><a class="button is-danger is-loading">Danger</a></p>
+                <p class="control"><a class="button is-loading">Default</a></p>
               </div>
             </div>
           </div>
@@ -1197,6 +1202,7 @@
                 <p class="control"><a class="button is-success is-outlined">Success</a></p>
                 <p class="control"><a class="button is-warning is-outlined">Warning</a></p>
                 <p class="control"><a class="button is-danger is-outlined">Danger</a></p>
+                <p class="control"><a class="button is-outlined">Default</a></p>
               </div>
             </div>
           </div>
@@ -1362,7 +1368,7 @@
       <div class="has-text-right">
         <button class="button is-primary" type="submit">Create Repository</button>
       </div>
-      <div class="has-text-centered" style="margin-top: 2em; padding: 1em; border: 2px solid rgb(233, 247, 253);">
+      <div class="has-text-centered" style="margin-top: 2em; padding: 1em; border: 2px solid var(--scm-border-color);">
         <button class="button is-primary" type="submit">Create Repository</button>
       </div>
     </div>
@@ -1699,7 +1705,6 @@
           <span
             class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
             data-tooltip="Unique name of the group"
-            style=""
           >
             <i class="fas fa-question-circle has-text-info"></i>
           </span>
@@ -1717,7 +1722,6 @@
           <span
             class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
             data-tooltip="A short description of the group"
-            style=""
           >
             <i class="fas fa-question-circle has-text-info"></i>
           </span>
@@ -1738,7 +1742,6 @@
           <span
             class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
             data-tooltip="The api key will be restricted to permissions of this role"
-            style=""
           >
             <i class="fas fa-question-circle has-text-info"></i>
           </span>
@@ -1753,15 +1756,15 @@
           </select>
         </div>
       </div>
-      <div class="field is-horizontal" style="margin-top: 2rem;">
+      <div class="field is-horizontal mt-4">
         <div class="field-label is-normal" style="flex-basis: inherit; flex-grow: 0;">
           <label class="label is-size-6" for="selectBranch">Select branch</label>
         </div>
         <div class="field-body">
-          <div class="field is-narrow" style="margin-bottom: 0 !important;">
+          <div class="field is-narrow mb-0">
             <div class="control" style="min-width: 10rem;">
               <div class="is-fullwidth select">
-                <select style="" id="selectBranch">
+                <select id="selectBranch">
                   <option value="main">main</option>
                   <option value="develop">develop</option>
                 </select>
@@ -1781,7 +1784,6 @@
             <span
               class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
               data-tooltip="This user is managed by an external system."
-              style=""
             >
               <i class="fas fa-question-circle has-text-info"></i>
             </span>
@@ -1812,7 +1814,7 @@
       <form>
         <div class="field is-grouped">
           <div class="control">
-            <label class="hbseve radio" style="margin-right: 0.5em;">
+            <label class="hbseve radio mr-2">
               <input checked="" name="permission_scope" type="radio" value="USER_PERMISSION" />
               User Permission
             </label>
@@ -1936,7 +1938,7 @@
       <div class="is-flex is-align-items-center">
         <div style="width: 16px; height: 16px; font-size: 13px;">
           <span class="tooltip has-tooltip-right" data-tooltip="Copy Permalink to Clipboard">
-            <i class="fas fa-link has-text-inherit" style="color: #dbdbdb; opacity: 0.75;"></i>
+            <i class="fas fa-link has-text-inherit" style="color: var(--scm-border-color); opacity: 0.75;"></i>
           </span>
         </div>
         <nav
@@ -1977,7 +1979,7 @@
                   <div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
                     <p class="shorten-text is-marginless"><strong>Git</strong></p>
                   </div>
-                  <div style="">
+                  <div>
                     <div class="is-flex" style="margin-left: auto;"></div>
                   </div>
                 </div>
@@ -2019,15 +2021,15 @@
                     <div class="is-flex">
                       <span
                         class="level-item"
-                        style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
+                        style="padding: 0.5rem; border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
                       >
                         <i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
                       </span>
                     </div>
                   </div>
                 </div>
-                <div class="level is-flex" style="padding-bottom: 1rem;">
+                <div class="level is-flex pb-4">
-                  <div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
+                  <div class="level-left is-hidden-mobile mr-2">
                     <small>1.1.0-SNAPSHOT</small>
                   </div>
                   <div
@@ -2060,22 +2062,22 @@
                   <div style="margin-left: auto;">
                     <div class="is-flex">
                       <span
-                        class="level-item"
+                        class="level-item p-2"
-                        style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
+                        style="border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
                       >
                         <i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
                       </span>
                       <span
-                        class="level-item"
+                        class="level-item p-2 ml-2"
-                        style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important; margin-left: 0.5rem;"
+                        style="border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
                       >
                         <i class="fas fa-fw fa-sync-alt has-text-info" title="Update"></i>
                       </span>
                     </div>
                   </div>
                 </div>
-                <div class="level is-flex" style="padding-bottom: 1rem;">
+                <div class="level is-flex pb-4">
-                  <div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
+                  <div class="level-left is-hidden-mobile mr-2">
                     <small>2.6.0</small>
                   </div>
                   <div
@@ -2120,31 +2122,31 @@
       <ul class="Details__StyledMemberList-sc-1uy93gc-0 cmCFmV">
         <li
           class=""
-          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
+          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
         >
           <a><i class="fas fa-user has-text-inherit"></i> mmuster</a>
         </li>
         <li
           class=""
-          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
+          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
         >
           <a><i class="fas fa-user has-text-inherit"></i> belefant</a>
         </li>
         <li
           class=""
-          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
+          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
         >
           <a><i class="fas fa-user has-text-inherit"></i> aschultz</a>
         </li>
         <li
           class=""
-          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
+          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
         >
           <a><i class="fas fa-user has-text-inherit"></i> zgummi</a>
         </li>
         <li
           class=""
-          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;"
+          style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
         >
           <a><i class="fas fa-user has-text-inherit"></i> nobody</a>
         </li>

scm-ui/ui-styles/src/components/_main.scss

@@ -21,6 +21,30 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+:root {
+  --scm-white-color: #{$white};
+  --scm-light-color: #{$light};
+  --scm-dark-color: #{$dark};
+  --scm-primary-color: #{$primary};
+  --scm-link-color: #{$link};
+  --scm-info-color: #{$info};
+  --scm-success-color: #{$success};
+  --scm-warning-color: #{$warning};
+  --scm-danger-color: #{$danger};
+
+  --scm-secondary-least-color: #{$secondary-least};
+  --scm-secondary-less-color: #{$secondary-less};
+  --scm-secondary-color: #{$secondary};
+  --scm-secondary-more-color: #{$secondary-more};
+  --scm-secondary-most-color: #{$secondary-most};
+
+  --scm-border-color: #{$border};
+  --scm-border: #{$border-width} solid #{$border};
+
+  --scm-popover-border-color: #{$white};
+}
+
 // TODO split into multiple files
 
 .is-ellipsis-overflow {
@@ -84,15 +108,6 @@ hr.header-with-actions {
   }
 }
 
-footer.footer {
-  background-color: $white-ter;
-  padding: inherit;
-
-  a {
-    color: darken($info, 15%);
-  }
-}
-
 .has-hover-background-blue:hover {
   background-color: scale-color($blue, $alpha: -90%);
 }
@@ -113,6 +128,61 @@ footer.footer {
   background-color: $blue-light;
 }
 
+.has-text-secondary-least {
+  color: $secondary-least !important;
+}
+a.has-text-secondary-least:hover,
+a.has-text-secondary-least:focus {
+  color: lighten($secondary-least, 10%) !important;
+}
+.has-background-secondary-least {
+  background-color: $secondary-least !important;
+}
+
+.has-text-secondary-less {
+  color: $secondary-less !important;
+}
+a.has-text-secondary-less:hover,
+a.has-text-secondary-less:focus {
+  color: lighten($secondary-less, 10%) !important;
+}
+.has-background-secondary-less {
+  background-color: $secondary-less !important;
+}
+
+.has-text-secondary {
+  color: $secondary !important;
+}
+a.has-text-secondary:hover,
+a.has-text-secondary:focus {
+  color: lighten($secondary, 10%) !important;
+}
+.has-background-secondary {
+  background-color: $secondary !important;
+}
+
+.has-text-secondary-more {
+  color: $secondary-more !important;
+}
+a.has-text-secondary-more:hover,
+a.has-text-secondary-more:focus {
+  color: lighten($secondary-more, 10%) !important;
+}
+.has-background-secondary-more {
+  background-color: $secondary-more !important;
+}
+
+.has-text-secondary-most {
+  color: $secondary-most !important;
+}
+a.has-text-secondary-most:hover,
+a.has-text-secondary-most:focus {
+  color: lighten($secondary-most, 10%) !important;
+}
+.has-background-secondary-most {
+  background-color: $secondary-most !important;
+}
+
 // border and background colors
 .has-background-dark-75 {
   background-color: $dark-75;
@@ -181,7 +251,7 @@ footer.footer {
 // tags
 .tag:not(body) {
   border: 1px solid transparent;
-  background-color: $white;
+  background-color: $scheme-main;
 
   &.is-delete {
     background-color: $light;
@@ -193,7 +263,7 @@ footer.footer {
   }
 
   &.is-outlined {
-    background-color: $white;
+    background-color: $scheme-main;
   }
   &.is-black.is-outlined {
     color: $black;
@@ -237,6 +307,13 @@ footer.footer {
   }
 }
 
+.popover {
+  &:before {
+    border-bottom-color: $popover-background-color;
+    border-left-color: $popover-background-color;
+  }
+}
+
 // buttons
 .button {
   padding-left: 1.5em;
@@ -251,7 +328,7 @@ footer.footer {
   &.is-warning,
   &.is-danger {
     &.is-outlined {
-      background-color: $white;
+      background-color: inherit;
     }
   }
 
@@ -347,8 +424,14 @@ footer.footer {
   }
 }
 
-.notifications .dropdown-menu:before {
+.notifications .dropdown-menu {
-  border: 0.4rem solid transparent;
+  border: 1px solid $border;
+
+  &:before {
+    border: 0.4rem solid transparent;
+    border-bottom-color: $border;
+    border-left-color: $border;
+  }
 }
 
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
@@ -480,7 +563,7 @@ ul.is-separated {
 
   tr {
     a {
-      color: #363636;
+      color: $grey-darker;
     }
     &.border-is-green td:first-child {
       border-left-color: $green;
@@ -510,7 +593,7 @@ ul.is-separated {
 
     &:hover {
       td {
-        background-color: whitesmoke;
+        background-color: $white-ter;
 
         &.is-darker {
           background-color: #e1e1e1;
@@ -531,15 +614,15 @@ ul.is-separated {
   }
   td {
     padding: 1em 1.25em;
-    background-color: #fafafa;
+    background-color: $white-bis;
-    border-bottom: 1px solid whitesmoke;
+    border-bottom: 1px solid $white-ter;
     border-left-color: $grey;
 
     &:first-child {
       border-left: 3px solid;
     }
     &.is-darker {
-      background-color: whitesmoke;
+      background-color: $white-ter;
     }
     // Explicitly "remove" styles from td element to use it as an empty table column header, which is necessary for
     // a11y because an empty th element is not allowed.
@@ -550,7 +633,7 @@ ul.is-separated {
     }
   }
   &.is-hoverable tbody tr:not(.is-selected):hover {
-    background-color: whitesmoke;
+    background-color: $white-ter;
   }
   thead th {
     background-color: transparent;
@@ -579,8 +662,8 @@ ul.is-separated {
   }
 
   .panel-footer {
-    background-color: whitesmoke;
+    background-color: $panel-heading-background-color;
-    color: #363636;
+    color: $panel-heading-color;
     font-size: 1.25em;
     font-weight: 300;
     line-height: 1.25;
@@ -667,7 +750,7 @@ form .field:not(.is-grouped) {
   .tabs.is-toggle li.is-active a:hover {
     background-color: #28b1e8;
     border-color: #28b1e8;
-    color: #fff;
+    color: $white;
   }
 }
 
@@ -678,7 +761,7 @@ form .field:not(.is-grouped) {
   position: absolute;
   right: 0;
   top: 0;
-  background-color: whitesmoke;
+  background-color: $white-ter;
 }
 
 // menu
@@ -692,7 +775,6 @@ form .field:not(.is-grouped) {
   display: flex;
   height: 3.2rem;
   align-items: center;
-  color: #fff;
   font-size: 1em;
   font-weight: 600;
   background-color: $blue;
@@ -707,12 +789,11 @@ form .field:not(.is-grouped) {
 }
 .menu-list {
   a {
-    color: #333;
     padding: 1rem;
 
     &.is-active {
-      color: $info;
+      color: $link;
-      background-color: #fff;
+      background-color: $scheme-main;
     }
   }
 

scm-ui/ui-styles/src/dark.scss

@@ -0,0 +1,308 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@import "utils/_pre.scss";
+
+$turquoise: #55abad;
+$blue: #599dad;
+$cyan: $blue;
+$green: #419374;
+$yellow: #ccad5e;
+$red: #ae4e6b;
+$white: $grey-lighter;
+$light: $grey-dark;
+
+$primary-invert: $white;
+$link-invert: $white;
+$info-invert: $white;
+$success-invert: $white;
+$warning-invert: #583708;
+$danger-invert: $white;
+$light-invert: $white;
+$dark-invert: $white;
+
+$scheme-main: #121212;
+$background: $grey-dark;
+
+$border: $grey-dark;
+$border-width: 1px;
+
+$text: $grey-lighter;
+$text-strong: $grey-lighter;
+
+$code: lighten($red, 10%);
+$code-background: lighten($scheme-main, 10%);
+
+$link-hover: $grey;
+$link-focus: $grey;
+$link-active: $grey;
+
+$secondary-least: $scheme-main;
+$secondary-less: $black-ter;
+$secondary: $grey;
+$secondary-more: $grey-light;
+$secondary-most: $white-ter;
+
+// layout
+$footer-background-color: $black-ter;
+$footer-color: $text;
+
+// element
+$box-background-color: lighten($scheme-main, 2.5%);
+
+$button-hover-color: lighten($text-strong, 2.5%);
+$button-active-color: lighten($text-strong, 2.5%);
+
+// component
+$card-background-color: $box-background-color;
+
+$menu-label-color: $text;
+$menu-item-color: $text;
+$menu-item-hover-background-color: $grey-dark;
+
+$modal-card-head-background-color: $black-ter;
+$modal-card-body-background-color: #17181c;
+
+$navbar-item-color: $grey-lighter;
+$navbar-item-hover-color: $navbar-item-color;
+$navbar-item-active-color: $navbar-item-color;
+
+$panel-heading-background-color: $black-ter;
+
+// form
+$input-placeholder-color: $grey-light;
+$input-disabled-color: #7A7A7A;
+
+// extension
+$popover-background-color: $grey-dark;
+$popover-border-color: $grey-dark;
+
+$table-row-hover-background-color: $grey-darker;
+
+@import "utils/_post.scss";
+
+:root {
+  --scm-popover-border-color: #{$popover-border-color};
+}
+
+$dark-75: scale-color($dark, $lightness: -25%);
+$dark-50: scale-color($dark, $lightness: -50%);
+$dark-25: scale-color($dark, $lightness: -75%);
+$info-75: scale-color($info, $lightness: -25%);
+$info-50: scale-color($info, $lightness: -50%);
+$info-25: scale-color($info, $lightness: -75%);
+$link-75: scale-color($link, $lightness: -25%);
+$link-50: scale-color($link, $lightness: -50%);
+$link-25: scale-color($link, $lightness: -75%);
+$primary-75: scale-color($primary, $lightness: -25%);
+$primary-50: scale-color($primary, $lightness: -50%);
+$primary-25: scale-color($primary, $lightness: -75%);
+$success-75: scale-color($success, $lightness: -25%);
+$success-50: scale-color($success, $lightness: -50%);
+$success-25: scale-color($success, $lightness: -75%);
+$warning-75: scale-color($warning, $lightness: -25%);
+$warning-50: scale-color($warning, $lightness: -50%);
+$warning-25: scale-color($warning, $lightness: -75%);
+$danger-75: scale-color($danger, $lightness: -25%);
+$danger-50: scale-color($danger, $lightness: -50%);
+$danger-25: scale-color($danger, $lightness: -75%);
+
+.has-background-dark-75 {
+  background-color: $dark-75;
+}
+.has-background-dark-50 {
+  background-color: $dark-50;
+}
+.has-background-dark-25 {
+  background-color: $dark-25;
+}
+.has-background-info-75 {
+  background-color: $info-75;
+}
+.has-background-info-50 {
+  background-color: $info-50;
+}
+.has-background-info-25 {
+  background-color: $info-25;
+}
+.has-background-link-75 {
+  background-color: $link-75;
+}
+.has-background-link-50 {
+  background-color: $link-50;
+}
+.has-background-link-25 {
+  background-color: $link-25;
+}
+.has-background-primary-75 {
+  background-color: $primary-75;
+}
+.has-background-primary-50 {
+  background-color: $primary-50;
+}
+.has-background-primary-25 {
+  background-color: $primary-25;
+}
+.has-background-success-75 {
+  background-color: $success-75;
+}
+.has-background-success-50 {
+  background-color: $success-50;
+}
+.has-background-success-25 {
+  background-color: $success-25;
+}
+.has-background-warning-75 {
+  background-color: $warning-75;
+}
+.has-background-warning-50 {
+  background-color: $warning-50;
+}
+.has-background-warning-25 {
+  background-color: $warning-25;
+}
+.has-background-danger-75 {
+  background-color: $danger-75;
+}
+.has-background-danger-50 {
+  background-color: $danger-50;
+}
+.has-background-danger-25 {
+  background-color: $danger-25;
+}
+
+:root {
+  --scm-secondary-background: #{$scheme-main};
+  --scm-secondary-text: #{$white};
+  --scm-border: 2px solid #{$white-ter};
+  --scm-hover-color: #{$grey};
+  --scm-column-selection: #{$link-dark};
+
+  --sh-base-color: #{$white};
+  --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  --sh-block-background: #{$scheme-main};
+  --sh-inline-code-color: #ff3860;
+  --sh-inline-code-background: #fbe7eb;
+  --sh-comment-color: #9a9a9a;
+  --sh-punctuation-color: #999999;
+  --sh-property-color: #2c99c7;
+  --sh-selector-color: #009dff;
+  --sh-operator-color: #999999;
+  --sh-operator-bg: inherit;
+  --sh-variable-color: #c386ca;
+  --sh-function-color: #ff6181;
+  --sh-keyword-color: #00a984;
+  --sh-selected-color: #{$warning-dark};
+  --sh-highlight-background: #f5f5f5;
+  --sh-highlight-accent: #99d8f3;
+
+  --diff-background-color: #{$scheme-main};
+  --diff-text-color: #{$white-bis};
+  --diff-font-family: Consolas, Courier, monospace;
+  --diff-selection-background-color: #{desaturate(#b3d7ff, 20%)};
+  --diff-gutter-insert-background-color: #{desaturate(#05c71d, 20%)};
+  --diff-gutter-delete-background-color: #{desaturate(#eb7a85, 20%)};
+  --diff-gutter-selected-background-color: #{desaturate(#fffce0, 20%)};
+  --diff-code-insert-background-color: #{desaturate(#05240b, 20%)};
+  --diff-code-delete-background-color: #{desaturate(#230608, 20%)};
+  --diff-code-insert-edit-background-color: #{desaturate(#c0dc91, 20%)};
+  --diff-code-delete-edit-background-color: #{desaturate(#000, 20%)};
+  --diff-code-selected-background-color: #{desaturate(#fffce0, 20%)};
+  --diff-omit-gutter-line-color: #cb2a1d;
+}
+
+.menu-list {
+  a {
+    > li {
+      border-color: $grey-light;
+    }
+    li:last-child {
+      border-color: $grey-light;
+    }
+  }
+}
+
+//popover
+.popover {
+  border: 1px solid $popover-border-color;
+}
+
+.modal-card {
+  border: 1px solid $border;
+
+  & .modal-close,
+  & .delete {
+    background-color: $background;
+  }
+}
+
+.card-table {
+  tr {
+    a {
+      color: $grey-light;
+    }
+
+    &:hover {
+      td {
+        background-color: $grey-darker;
+
+        &.is-darker {
+          background-color: $black-ter;
+        }
+      }
+    }
+  }
+  td {
+    background-color: $black-ter;
+    border-bottom: none;
+
+    &.is-darker {
+      background-color: $grey-dark;
+    }
+  }
+  &.is-hoverable tbody tr:not(.is-selected):hover {
+    background-color: $grey-darker;
+  }
+}
+
+.diff-code-conflict {
+  background-color: #332900;
+}
+
+.diff-gutter-conflict {
+  background-color: #bc9f2a;
+}
+
+.diff-decoration-content div {
+  color: $scheme-main;
+}
+
+//Display darker version of background image
+.has-scm-background {
+  background-image: url(images/scmManagerHeroDark.jpg) !important;
+}
+
+.has-hover-visible:hover {
+  color: $grey !important;
+}

scm-ui/ui-styles/src/highcontrast.scss

@@ -24,14 +24,20 @@
 
 @import "utils/_pre.scss";
 
-// $text: $white;
+$red: #e63453;
+
 $scheme-main: #050514;
 $background: $grey-dark;
 $text: $white-ter;
 $text-strong: $white-bis;
 
-$danger: #e63453;
+$secondary-least: $scheme-main;
-$code: lighten($danger, 25%);
+$secondary-less: $black-ter;
+$secondary: $white-bis;
+$secondary-more: $white-ter;
+$secondary-most: $white;
+
+$code: lighten($red, 25%);
 $primary-invert: #050514;
 $info-invert: #050514;
 $link-invert: #050514;
@@ -41,7 +47,7 @@ $danger-invert: #050514;
 
 $light-gray: #f2f2f2;
 
-$footer-background-color: $grey-dark;
+$footer-background-color: $black-ter;
 $footer-color: $white-ter;
 
 //make horizontal lines pop more
@@ -50,6 +56,11 @@ $hr-background-color: $white-bis;
 $box-background-color: scale-color($scheme-main, $lightness: 15%);
 $box-background-color: $grey-darker;
 
+$menu-label-color: $scheme-main;
+$menu-item-color: $white-ter;
+
+$panel-heading-background-color: $black-ter;
+
 $modal-card-head-background-color: $black-ter;
 $modal-card-body-background-color: $scheme-main;
 
@@ -64,13 +75,14 @@ $tooltip-background-color: $white-bis;
 $tooltip-background-opacity: 0.9 !default;
 $tooltip-color: $scheme-main;
 
+$border-width: 2px;
+$border: $white-ter;
+
 @import "utils/_post.scss";
 
 :root {
   --scm-secondary-background: #{$scheme-main};
   --scm-secondary-text: #{$white};
-  --scm-border: 2px solid #{$white-ter};
-  --scm-info-color: #{$info};
   --scm-hover-color: #{$grey};
   --scm-column-selection: #{$link-dark};
 
@@ -108,17 +120,6 @@ $tooltip-color: $scheme-main;
 }
 
 .button {
-  &.is-primary,
-  &.is-info,
-  &.is-link,
-  &.is-success,
-  &.is-warning,
-  &.is-danger {
-    &.is-outlined {
-      background-color: inherit;
-    }
-  }
-
   &.is-primary:hover,
   &.is-primary.is-hovered {
     background-color: scale-color($primary, $lightness: -5%);
@@ -205,36 +206,21 @@ $tooltip-color: $scheme-main;
   }
 }
 
-.menu-label {
-  color: $scheme-main;
-}
-
-.menu-list {
-  a {
-    color: $white-ter;
-
-    &.is-active {
-      background-color: $scheme-main;
-    }
-  }
-}
-
 //footer is overwritten in _main.scss
 footer.footer {
-  background-color: $black-ter;
   a {
     color: scale-color($link, $lightness: 25%);
   }
 }
 
 .card {
-  border: 1px solid $white-ter;
+  border: 1px solid $border;
   box-shadow: none;
 }
 
 //card
 .modal-card {
-  border: 1px solid $white-ter;
+  border: 1px solid $border;
 
   & .modal-close,
   & .delete {
@@ -257,9 +243,6 @@ footer.footer {
           background-color: $grey-darker;
         }
       }
-      a {
-        color: $link;
-      }
     }
   }
   td {
@@ -278,18 +261,8 @@ footer.footer {
   }
 }
 
-// panels
 .panel {
   border-color: $white-bis;
-
-  .panel-heading {
-    background-color: $black-ter;
-  }
-
-  .panel-footer {
-    background-color: $black-ter;
-    color: $white-bis;
-  }
 }
 
 //diffs
@@ -338,9 +311,6 @@ td:first-child.diff-gutter-conflict:before {
 
 //inline member tags
 .tag:not(body) {
-  border: 1px solid transparent;
-  background-color: $white;
-
   &.is-delete {
     &::before,
     &::after {
@@ -363,11 +333,6 @@ td:first-child.diff-gutter-conflict:before {
   &.is-light .has-text-link {
     color: scale-color($link, $lightness: -50%) !important;
   }
-
-  //outline-tags
-  &.is-outlined {
-    background-color: $scheme-main;
-  }
 }
 
 //cards receive white border
@@ -376,21 +341,7 @@ td:first-child.diff-gutter-conflict:before {
 }
 
 .popover {
-  border: 1px solid $white-ter;
+  border: 1px solid $border;
-
-  &:before {
-    border-bottom-color: $grey-dark;
-    border-left-color: $grey-dark;
-  }
-}
-
-.notifications .dropdown-menu {
-  border: 1px solid $white-ter;
-
-  &:before {
-    border-bottom-color: $white-ter;
-    border-left-color: $white-ter;
-  }
 }
 
 //Display darker version of background image
@@ -398,61 +349,6 @@ td:first-child.diff-gutter-conflict:before {
   background-image: url(images/scmManagerHeroDark.jpg) !important;
 }
 
-.has-text-secondary-least {
-  color: $scheme-main !important;
-}
-a.has-text-secondary-least:hover,
-a.has-text-secondary-least:focus {
-  color: lighten($scheme-main, 10%) !important;
-}
-.has-background-secondary-least {
-  background-color: $scheme-main !important;
-}
-
-.has-text-secondary-less {
-  color: $black-ter !important;
-}
-a.has-text-secondary-less:hover,
-a.has-text-secondary-less:focus {
-  color: lighten($black-ter, 10%) !important;
-}
-.has-background-secondary-less {
-  background-color: $black-ter !important;
-}
-
-.has-text-secondary {
-  color: $white-bis !important;
-}
-a.has-text-secondary:hover,
-a.has-text-secondary:focus {
-  color: lighten($white-bis, 10%) !important;
-}
-.has-background-secondary {
-  background-color: $white-bis !important;
-}
-
-.has-text-secondary-more {
-  color: $white-ter !important;
-}
-a.has-text-secondary-more:hover,
-a.has-text-secondary-more:focus {
-  color: lighten($white-ter, 10%) !important;
-}
-.has-background-secondary-more {
-  background-color: $white-ter !important;
-}
-
-.has-text-secondary-most {
-  color: $white !important;
-}
-a.has-text-secondary-most:hover,
-a.has-text-secondary-most:focus {
-  color: lighten($white, 10%) !important;
-}
-.has-background-secondary-most {
-  background-color: $white !important;
-}
-
 .has-background-light {
   color: $grey-dark;
 }
@@ -461,15 +357,8 @@ a.has-text-secondary-most:focus {
   color: $white-bis !important;
 }
 
-[disabled].textarea::placeholder,
-[disabled].input::placeholder,
-fieldset[disabled] .textarea::placeholder,
-fieldset[disabled] .input::placeholder {
-  color: $white-bis;
-}
-
 .repository-export-info-box {
-  background-color: $high-contrast-info-25;
+  background-color: scale-color($info, $lightness: -75%);
   border: 0.2rem solid;
 }
 

scm-ui/ui-styles/src/light.scss

@@ -23,18 +23,38 @@
  */
 
 @import "utils/_pre.scss";
-// colors defined in variables/commons.scss
+
-$subtitle-color: #666;
 $warning-invert: #88550d;
+
+$border: $grey-lighter;
+$border-width: 1px;
+
+$secondary-least: $white;
+$secondary-less: $white-ter;
+$secondary: $grey-light;
+$secondary-more: $grey-darker;
+$secondary-most: $black;
+
+// layout
+$footer-background-color: $white-ter;
+
+// element
 $button-disabled-opacity: 0.25;
 
+$subtitle-color: #666;
+
+// component
+$menu-label-color: $white;
+$menu-item-color: #333;
+
+// extension
+$popover-background-color: $grey-light;
+
 @import "utils/_post.scss";
 
 :root {
   --scm-secondary-background: #{$white};
   --scm-secondary-text: #{$black};
-  --scm-border: 1px solid #dbdbdb;
-  --scm-info-color: #{$info};
   --scm-hover-color: #{$black-ter};
   --scm-column-selection: #{$link-25};
 
@@ -57,72 +77,31 @@ $button-disabled-opacity: 0.25;
   --sh-highlight-accent: #99d8f3;
 }
 
+.button {
+  &.is-primary,
+  &.is-info,
+  &.is-link,
+  &.is-success,
+  &.is-warning,
+  &.is-danger {
+    &.is-outlined {
+      background-color: $white;
+    }
+  }
+}
+
+footer.footer {
+  a {
+    color: darken($info, 15%);
+  }
+}
+
 .popover:before {
   border-bottom-color: white;
   border-left-color: white;
   box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
 }
 
-.notifications .dropdown-menu:before {
-  border-bottom-color: white;
-  border-left-color: white;
-}
-
-.has-text-secondary-least {
-  color: $white !important;
-}
-a.has-text-secondary-least:hover,
-a.has-text-secondary-least:focus {
-  color: lighten($white, 10%) !important;
-}
-.has-background-secondary-least {
-  background-color: $white !important;
-}
-
-.has-text-secondary-less {
-  color: $white-ter !important;
-}
-a.has-text-secondary-less:hover,
-a.has-text-secondary-less:focus {
-  color: lighten($white-ter, 10%) !important;
-}
-.has-background-secondary-less {
-  background-color: $white-ter !important;
-}
-
-.has-text-secondary {
-  color: $grey-light !important;
-}
-a.has-text-secondary:hover,
-a.has-text-secondary:focus {
-  color: lighten($grey-light, 10%) !important;
-}
-.has-background-secondary {
-  background-color: $grey-light !important;
-}
-
-.has-text-secondary-more {
-  color: $grey-darker !important;
-}
-a.has-text-secondary-more:hover,
-a.has-text-secondary-more:focus {
-  color: lighten($grey-darker, 10%) !important;
-}
-.has-background-secondary-more {
-  background-color: $grey-darker !important;
-}
-
-.has-text-secondary-most {
-  color: $black !important;
-}
-a.has-text-secondary-most:hover,
-a.has-text-secondary-most:focus {
-  color: lighten($black, 10%) !important;
-}
-.has-background-secondary-most {
-  background-color: $black !important;
-}
-
 .has-hover-visible:hover {
   color: $grey-darker !important;
 }

scm-ui/ui-styles/src/variables/_commons.scss

@@ -21,16 +21,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-//$link: #007EB0;
+
-$info: #33b2e8;
 $turquoise: #00d1df;
 $blue: #33b2e8;
 $cyan: $blue;
 $green: #00c79b;
-$warning: #ffdd57;
+$yellow: #ffdd57;
+$red: #ff3860;
+
 $blue-light: #98d8f3;
-$danger: #ff3860;
 
 $family-monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
 
 $input-border-color: $blue-light;
+
+$navbar-background-color: transparent;
+$navbar-item-color: $white;
+$navbar-item-hover-color: $navbar-item-color;
+$navbar-item-active-color: $navbar-item-color;
+$navbar-item-hover-background-color: rgba(10, 10, 10, 0.1);
+
+$footer-padding: inherit;
+
+$popover-border-color: $white;

scm-ui/ui-styles/src/variables/_derived.scss

@@ -43,24 +43,3 @@ $danger-75: scale-color($danger, $lightness: 25%);
 $danger-50: scale-color($danger, $lightness: 50%);
 $danger-25: scale-color($danger, $lightness: 75%);
 
-$high-contrast-dark-75: scale-color($dark, $lightness: -25%);
-$high-contrast-dark-50: scale-color($dark, $lightness: -50%);
-$high-contrast-dark-25: scale-color($dark, $lightness: -75%);
-$high-contrast-info-75: scale-color($info, $lightness: -25%);
-$high-contrast-info-50: scale-color($info, $lightness: -50%);
-$high-contrast-info-25: scale-color($info, $lightness: -75%);
-$high-contrast-link-75: scale-color($link, $lightness: -25%);
-$high-contrast-link-50: scale-color($link, $lightness: -50%);
-$high-contrast-link-25: scale-color($link, $lightness: -75%);
-$high-contrast-primary-75: scale-color($primary, $lightness: -25%);
-$high-contrast-primary-25: scale-color($primary, $lightness: -75%);
-$high-contrast-primary-50: scale-color($primary, $lightness: -50%);
-$high-contrast-success-75: scale-color($success, $lightness: -25%);
-$high-contrast-success-50: scale-color($success, $lightness: -50%);
-$high-contrast-success-25: scale-color($success, $lightness: -75%);
-$high-contrast-warning-75: scale-color($warning, $lightness: -25%);
-$high-contrast-warning-50: scale-color($warning, $lightness: -50%);
-$high-contrast-warning-25: scale-color($warning, $lightness: -75%);
-$high-contrast-danger-75: scale-color($danger, $lightness: -25%);
-$high-contrast-danger-50: scale-color($danger, $lightness: -50%);
-$high-contrast-danger-25: scale-color($danger, $lightness: -75%);

scm-ui/ui-webapp/public/images/blibSmallLightBackground.svg

@@ -0,0 +1,67 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 337.33 291.79">
+  <defs>
+    <style>
+      .cls-1{fill:none;}.cls-2{fill:#c7c7c7;}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:url(#uv5);}.cls-5{clip-path:url(#clip-path-2);}.cls-6{fill:url(#uv5-2);}.cls-7{clip-path:url(#clip-path-3);}.cls-8{fill:url(#uv5-3);}.cls-9{clip-path:url(#clip-path-4);}.cls-10{fill:url(#uv5-4);}.cls-11{clip-path:url(#clip-path-5);}.cls-12{fill:url(#uv5-5);}.cls-13{fill:#f5f4f5;}.cls-14{clip-path:url(#clip-path-6);}.cls-15{fill:url(#uv5-6);}.cls-16{clip-path:url(#clip-path-7);}.cls-17{fill:url(#uv5-7);}.cls-18{clip-path:url(#clip-path-8);}.cls-19{fill:url(#uv5-8);}.cls-20{clip-path:url(#clip-path-9);}.cls-21{fill:url(#uv5-9);}.cls-22{clip-path:url(#clip-path-10);}.cls-23{fill:url(#uv5-10);}.cls-24{clip-path:url(#clip-path-11);}.cls-25{fill:url(#uv5-11);}.cls-26{clip-path:url(#clip-path-12);}.cls-27{fill:url(#uv5-12);}.cls-28{clip-path:url(#clip-path-13);}.cls-29{fill:url(#uv5-13);}.cls-30{clip-path:url(#clip-path-14);}.cls-31{fill:url(#uv5-14);}.cls-32{clip-path:url(#clip-path-15);}.cls-33{fill:url(#uv5-15);}.cls-34{fill:url(#uv5-16);}.cls-35{fill:#48c0ec;}
+    </style>
+    <clipPath id="clip-path">
+      <path class="cls-1"
+            d="M123.75,284.91h0a37.64,37.64,0,0,1,5-11.66c37.45-93.06,145.64-135,203.65-145.07l0-.28a158.77,158.77,0,0,0-20.84-9.35C284.33,126,147.39,168.67,123.75,284.91"/>
+    </clipPath>
+    <linearGradient id="uv5" x1="-611.94" y1="244.82" x2="-607.72" y2="244.82"
+                    gradientTransform="translate(30388.6 -11906.59) scale(49.46)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#47c0eb"/>
+      <stop offset="0.5" stop-color="#34aae1"/>
+      <stop offset="1" stop-color="#2c94d1"/>
+    </linearGradient>
+    <clipPath id="clip-path-2">
+      <path class="cls-1"
+            d="M126.64,264.88c-.72,4.83-1.46,9.68-2.16,14.5C142.86,174.89,250,128.47,295.2,113.38a209.53,209.53,0,0,0-23.88-4.86c-48.19,20.91-131.07,69-144.68,156.36"/>
+    </clipPath>
+    <linearGradient id="uv5-2" x1="-612.5" y1="247.75" x2="-608.28" y2="247.75"
+                    gradientTransform="translate(24899.69 -9827.16) scale(40.45)" xlink:href="#uv5"/>
+    <clipPath id="clip-path-3">
+      <path class="cls-1"
+            d="M229.91,106.72C171,144.22,138.44,187.79,130.35,240l-2.17,14.52c4-22.83,16.25-92.3,125.74-147.71-4.18-.25-8.35-.37-12.48-.37q-5.82,0-11.53.32"/>
+    </clipPath>
+    <linearGradient id="uv5-3" x1="-613.54" y1="253.37" x2="-609.32" y2="253.37"
+                    gradientTransform="translate(18409.91 -7369.32) scale(29.8)" xlink:href="#uv5"/>
+    <clipPath id="clip-path-4">
+      <path class="cls-1"
+            d="M188.92,114.12c-23.63,23.33-46.59,51.46-54.54,98.83-.71,4.83-1.45,9.66-2.17,14.51,3.64-20.66,12.15-69,78-118.59a145.93,145.93,0,0,0-21.29,5.25"/>
+    </clipPath>
+    <linearGradient id="uv5-4" x1="-615.95" y1="266.54" x2="-611.73" y2="266.54"
+                    gradientTransform="translate(11517.07 -4758.34) scale(18.48)" xlink:href="#uv5"/>
+    <clipPath id="clip-path-5">
+      <path class="cls-1"
+            d="M169.44,122.74a72.54,72.54,0,0,0-10,6.87C148.85,148,142.32,162.81,138.11,188l-2.18,14.51c2.67-15.14,8.21-46.65,39.32-82.89-2,1-3.94,2-5.81,3.09"/>
+    </clipPath>
+    <linearGradient id="uv5-5" x1="-622.15" y1="300.88" x2="-617.93" y2="300.88"
+                    gradientTransform="translate(5932.63 -2642.25) scale(9.32)" xlink:href="#uv5"/>
+  </defs>
+  <path class="cls-2"
+        d="M5,6.88l-.14.23C44.09,53.81,101.7,159.19,69,257.93a39.06,39.06,0,0,1-4.39,13.59c60.23-108.11-20.1-234-36.82-258.13A161.47,161.47,0,0,0,5,6.88"/>
+  <path class="cls-2"
+        d="M68.32,265.66C123.78,170.59,70,62.34,44.3,20.22A214.65,214.65,0,0,1,66.46,32.31C90.64,81,124.08,174.43,76.33,252.72q-4,6.48-8,12.94"/>
+  <path class="cls-2"
+        d="M82.08,243.43c12.11-20.76,49-84-.65-200.91a215.33,215.33,0,0,1,19.06,16c21.56,69,18.14,125.27-10.41,172Z"/>
+  <path class="cls-2"
+        d="M97,219.34c11-18.8,36.64-62.8,17.68-146A151.39,151.39,0,0,1,128,91.69c3.07,34.26,2.43,71.87-23,114.7l-8,13"/>
+  <path class="cls-2"
+        d="M110.75,197.11c8-13.78,24.75-42.45,24.39-91.91.94,2.11,1.78,4.22,2.54,6.33A76.46,76.46,0,0,1,141,123.65c-4,21.65-8.7,37.72-22.26,60.52Z"/>
+  <g class="cls-3">
+    <rect class="cls-4" x="123.75" y="118.55" width="208.71" height="166.36"/>
+  </g>
+  <g class="cls-5">
+    <rect class="cls-6" x="124.48" y="108.52" width="170.72" height="170.86"/>
+  </g>
+  <g class="cls-7">
+    <rect class="cls-8" x="128.18" y="106.4" width="125.73" height="148.07"/>
+  </g>
+  <g class="cls-9">
+    <rect class="cls-10" x="132.21" y="108.87" width="78" height="118.59"/>
+  </g>
+  <g class="cls-11">
+    <rect class="cls-12" x="135.93" y="119.65" width="39.31" height="82.88"/>
+  </g>
+</svg>

scm-ui/ui-webapp/public/index.mustache

@@ -29,10 +29,18 @@
       linkElement.rel = 'stylesheet';
       linkElement.type = 'text/css';
       var theme = localStorage.getItem('scm.theme');
-      if (theme === 'highcontrast') {
+      if (theme === 'light') {
+        linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css"
+      } else if (theme === 'dark') {
+        linkElement.href = "{{ contextPath }}/assets/ui-theme-dark.css"
+      } else if (theme === 'highcontrast') {
         linkElement.href = "{{ contextPath }}/assets/ui-theme-highcontrast.css"
       } else {
-        linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css"
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          linkElement.href = "{{ contextPath }}/assets/ui-theme-dark.css"
+        } else {
+          linkElement.href = "{{ contextPath }}/assets/ui-theme-light.css"
+        }
       }
       document.head.appendChild(linkElement);
     </script>

scm-ui/ui-webapp/public/locales/de/commons.json

@@ -105,11 +105,19 @@
       "submit": "Anwenden",
       "light": {
         "displayName": "Hell",
-        "description": "'Hell' is das Standard-Design des SCM-Managers"
+        "description": "„Hell“ is das Standard-Design des SCM-Managers"
       },
       "highcontrast": {
         "displayName": "Hoher Kontrast",
-        "description": "'Hoher Kontrast' ist ein dunkles Design mit einem hohen Kontrast"
+        "description": "„Hoher Kontrast“ ist ein dunkles Design mit einem hohen Kontrast"
+      },
+      "dark": {
+        "displayName": "Dunkel",
+        "description": "„Dunkel“ ist ein entspannteres, dunkles Design"
+      },
+      "systemdefault": {
+        "displayName": "Systemstandard",
+        "description": "Verwendet die Standardeinstellung des Systems"
       }
     }
   },

scm-ui/ui-webapp/public/locales/en/commons.json

@@ -111,6 +111,14 @@
       "highcontrast": {
         "displayName": "High contrast",
         "description": "The high contrast mode is a dark theme with a high contrast between the colors"
+      },
+      "dark": {
+        "displayName": "Dark",
+        "description": "The dark mode is a more relaxed, dark theme"
+      },
+      "systemdefault": {
+        "displayName": "System default",
+        "description": "Use the default setting of the system"
       }
     }
   },

scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx

@@ -30,7 +30,7 @@ type Props = {
 };
 
 const ActionWrapper = styled.div`
-  border: 2px solid #e9f7fd;
+  border: 2px solid var(--scm-border-color);
 `;
 
 export default class PluginBottomActions extends React.Component<Props> {

scm-ui/ui-webapp/src/components/HeaderButton.tsx

@@ -26,9 +26,8 @@ import styled from "styled-components";
 import { devices } from "@scm-manager/ui-components";
 
 const HeaderButton = styled.div`
-  // TODO: ersetzen?
   @media screen and (max-width: ${devices.desktop.width - 1}px) {
-    border-top: 1px solid white;
+    border-top: 1px solid var(--scm-white-color);
     margin-top: 1rem;
     padding-top: 1rem;
     padding-bottom: 1rem;

scm-ui/ui-webapp/src/components/HeaderButtonContent.tsx

@@ -30,12 +30,13 @@ type Props = {
   icon: string;
 };
 
-export const headerButtonContentClassName = "is-flex is-align-items-center is-justify-content-flex-start";
+export const headerButtonContentClassName =
+  "is-flex is-align-items-center is-justify-content-flex-start has-text-inherit";
 
 const HeaderButtonContent: FC<Props> = ({ burgerMode, icon, label }) => (
   <>
-    <Icon title={label} name={icon} color="white" className={burgerMode ? "is-size-5" : "is-size-4"} />
+    <Icon title={label} name={icon} color="inherit" className={burgerMode ? "is-size-5" : "is-size-4"} />
-    <span className="has-text-white">{" " + label}</span>
+    <span>{" " + label}</span>
   </>
 );
 

scm-ui/ui-webapp/src/components/InfoBox.tsx

@@ -86,9 +86,9 @@ class InfoBox extends React.Component<Props> {
                 "is-align-items-center"
               )}
             >
-              <Icon className="has-text-blue-light mb-2 fa-2x" name={icon} color="inherit" alt="" />
+              <Icon className="mb-2 fa-2x" name={icon} color="white" alt="" />
-              <div className="is-size-4">{t("login." + type)}</div>
+              <div className="is-size-4 has-text-white">{t("login." + type)}</div>
-              <div className="is-size-4">{t("login.tip")}</div>
+              <div className="is-size-4 has-text-white">{t("login.tip")}</div>
             </FixedSizedIconWrapper>
           </figure>
           {this.renderBody()}

scm-ui/ui-webapp/src/components/LoginForm.tsx

@@ -42,17 +42,20 @@ const TopMarginBox = styled.div`
 `;
 
 const AvatarWrapper = styled.figure`
-  margin-top: -70px;
+  display: flex;
-  padding-bottom: 20px;
+  justify-content: center;
+  margin: -70px auto 20px;
+  width: 128px;
+  height: 128px;
+  background: var(--scm-white-color);
+  border: 1px solid lightgray;
+  border-radius: 50%;
 `;
 
 const AvatarImage = styled(Image)`
-  width: 128px;
+  width: 75%;
-  height: 128px;
+  margin-left: 0.25rem;
   padding: 5px;
-  background: white;
-  border: 1px solid lightgray;
-  border-radius: 50%;
 `;
 
 class LoginForm extends React.Component<Props, State> {
@@ -104,7 +107,7 @@ class LoginForm extends React.Component<Props, State> {
         <p className="subtitle">{t("login.subtitle")}</p>
         <TopMarginBox className="box">
           <AvatarWrapper>
-            <AvatarImage src="/images/blib.jpg" alt={t("login.logo-alt")} />
+            <AvatarImage src="/images/blibSmallLightBackground.svg" alt={t("login.logo-alt")} />
           </AvatarWrapper>
           <ErrorNotification error={this.areCredentialsInvalid()} />
           <form onSubmit={this.handleSubmit}>

scm-ui/ui-webapp/src/containers/Alerts.tsx

@@ -86,7 +86,7 @@ const AlertsList: FC<Props> = ({ data }) => (
 
 const ShieldNotificationIcon: FC = () => {
   const [t] = useTranslation("commons");
-  return <Icon className="is-size-4" name="shield-alt" color="white" alt={t("alerts.shieldTitle")} />;
+  return <Icon className="is-size-4" name="shield-alt" color="inherit" alt={t("alerts.shieldTitle")} />;
 };
 
 type ComponentAlert = Alert & {

scm-ui/ui-webapp/src/containers/NavigationBar.tsx

@@ -87,31 +87,15 @@ const StyledNavBar = styled.nav`
     padding: 0;
   }
 
-  //TODO Ersetzen?
   .navbar-brand {
     @media screen and (max-width: ${devices.desktop.width - 1}px) {
-      border-bottom: 1px solid white;
+      border-bottom: 1px solid var(--scm-white-color);
     }
   }
 
   .navbar-menu.is-active .navbar-end .navbar-item {
     border-left: solid 5px transparent;
   }
-
-  .navbar-burger {
-    color: #fff !important;
-  }
-
-  .navbar-item {
-    :hover:not(.logo) {
-      background-color: rgba(10, 10, 10, 0.1) !important;
-      color: #fff;
-    }
-    color: #fff !important;
-    background-color: transparent !important;
-  }
-  color: #fff;
-  background-color: transparent !important;
 `;
 
 type Props = {

scm-ui/ui-webapp/src/containers/Notifications.tsx

@@ -222,7 +222,7 @@ const BellNotificationIcon: FC<BellNotificationIconProps> = ({ data }) => {
       className="is-size-4"
       iconStyle={counter === 0 ? "far" : "fas"}
       name="bell"
-      color="white"
+      color="inherit"
       alt={t("notifications.bellTitle")}
     />
   );

scm-ui/ui-webapp/src/containers/Theme.tsx

@@ -23,15 +23,16 @@
  */
 
 import React, { FC, useState } from "react";
-import { createA11yId, Radio, SubmitButton, Subtitle } from "@scm-manager/ui-components";
+import { ButtonGroup, createA11yId, Radio, SubmitButton, Subtitle } from "@scm-manager/ui-components";
 import { useForm } from "react-hook-form";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
 const LS_KEY = "scm.theme";
 
 const useThemeState = () => {
-  const [theme] = useState(localStorage.getItem(LS_KEY) || "light");
+  const [theme] = useState(localStorage.getItem(LS_KEY) || "systemdefault");
   const [isLoading, setLoading] = useState(false);
 
   const setTheme = (name: string) => {
@@ -47,7 +48,7 @@ type ThemeForm = {
   theme: string;
 };
 
-const themes = ["light", "highcontrast"];
+const themes = ["light", "dark", "highcontrast", "systemdefault"];
 
 const RadioColumn = styled.div`
   flex: none;
@@ -60,7 +61,8 @@ const Theme: FC = () => {
     register,
     setValue,
     handleSubmit,
-    formState: { isDirty }
+    formState: { isDirty },
+    watch
   } = useForm<ThemeForm>({
     mode: "onChange",
     defaultValues: {
@@ -76,14 +78,23 @@ const Theme: FC = () => {
   return (
     <>
       <Subtitle>{t("profile.theme.subtitle")}</Subtitle>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form className="is-flex is-flex-direction-column" onSubmit={handleSubmit(onSubmit)}>
         {themes.map(theme => {
           const a11yId = createA11yId("theme");
           return (
             <div
               key={theme}
               onClick={() => setValue("theme", theme, { shouldDirty: true })}
-              className="card ml-1 mb-5 control columns is-vcentered has-cursor-pointer"
+              className={classNames(
+                "card",
+                "ml-1",
+                "mb-5",
+                "control",
+                "columns",
+                "is-vcentered",
+                "has-cursor-pointer",
+                { "has-background-secondary-less": theme === watch().theme }
+              )}
             >
               <RadioColumn className="column">
                 <Radio {...register("theme")} value={theme} disabled={isLoading} ariaLabelledby={a11yId} />
@@ -95,7 +106,9 @@ const Theme: FC = () => {
             </div>
           );
         })}
-        <SubmitButton label={t("profile.theme.submit")} loading={isLoading} disabled={!isDirty} />
+        <ButtonGroup className="is-justify-content-flex-end">
+          <SubmitButton label={t("profile.theme.submit")} loading={isLoading} disabled={!isDirty} />
+        </ButtonGroup>
       </form>
     </>
   );

scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx

@@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next";
 import { Branch } from "@scm-manager/ui-types";
 
 const ActionBar = styled.div`
-  border: 1px solid #dbdbdb;
+  border: 1px solid var(--scm-border-color);
   border-radius: 4px;
   font-size: 1.25em;
   font-weight: 300;

scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx

@@ -45,7 +45,7 @@ const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
       color={isSelected ? "link is-selected" : undefined}
       link={!isSelected ? href : undefined}
     >
-      <Icon className="pr-2" name={icon} color={isSelected ? "secondary-least" : "inherit"} alt="" />
+      <Icon className="pr-2" name={icon} color="inherit" alt="" />
       <p className={classNames("is-hidden-mobile", "is-hidden-tablet-only")}>{t(`plugins:${label}`, label)}</p>
     </Button>
   );

scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx

@@ -43,7 +43,7 @@ const InfoBox = styled.div`
   white-space: pre-line;
   border-radius: 2px;
   border-left: 0.2rem solid;
-  border-color: #33b2e8;
+  border-color: var(--scm-info-color);
 `;
 
 type Props = {

scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx

@@ -42,7 +42,7 @@ type Props = {
 };
 
 const HeaderWrapper = styled.div`
-  border-bottom: solid 1px #dbdbdb;
+  border-bottom: 1px solid var(--scm-border-color);
   font-size: 1.25em;
   font-weight: 300;
   line-height: 1.25;
@@ -50,7 +50,7 @@ const HeaderWrapper = styled.div`
 `;
 
 const BorderBottom = styled.div`
-  border-bottom: solid 1px #dbdbdb;
+  border-bottom: 1px solid var(--scm-border-color);
 `;
 
 const FullWidthTitleHeader = styled.div`

scm-ui/ui-webapp/src/search/Syntax.tsx

@@ -184,6 +184,7 @@ const TimestampConverter: FC = () => {
     <div className="is-flex">
       <span className="is-flex mr-5">
         <InputField
+          className="m-0"
           value={datetime}
           onChange={setDatetime}
           placeholder={t("search.syntax.utilities.datetime.format")}
@@ -194,27 +195,26 @@ const TimestampConverter: FC = () => {
       </span>
       <span className="is-flex">
         <InputField
-          className="mr-4"
+          className="m-0 mr-4"
           value={timestamp}
           readOnly={true}
           placeholder={t("search.syntax.utilities.timestampPlaceholder")}
         />
-        <StyledTooltip
+        <div className="is-flex is-align-items-center">
-          message={t("search.syntax.utilities.copyTimestampTooltip")}
+          <StyledTooltip message={t("search.syntax.utilities.copyTimestampTooltip")}>
-          className="is-flex is-align-items-center"
+            {copying ? (
-        >
+              <span className="small-loading-spinner" />
-          {copying ? (
+            ) : (
-            <span className="small-loading-spinner" />
+              <Icon
-          ) : (
+                name="clipboard"
-            <Icon
+                color="inherit"
-              name="clipboard"
+                className="is-size-4 fa-fw is-clickable"
-              color="inherit"
+                onClick={copyTimestamp}
-              className="is-size-4 fa-fw is-clickable"
+                alt={t("search.syntax.utilities.copyTimestampTooltip")}
-              onClick={copyTimestamp}
+              />
-              alt={t("search.syntax.utilities.copyTimestampTooltip")}
+            )}
-            />
+          </StyledTooltip>
-          )}
+        </div>
-        </StyledTooltip>
       </span>
     </div>
   );