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>

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-left-color: white;
+    border-bottom-color: var(--scm-popover-border-color);
+    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-left-color: white;
+    border-bottom-color: var(--scm-popover-border-color);
+    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>