feat(style): added dark mode (#446)

src/components/Logo/Logo.tsx

@@ -1,31 +1,52 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import logo from './img/logo.svg';
+import { Theme } from '../../design-tokens/theme';
+
+import defaultLogo from './img/logo.svg';
+import blackAndWithLogo from './img/logo-black-and-white.svg';
 
 export enum Size {
   Small = '40px',
   Big = '90px',
 }
 
+const logos = {
+  light: defaultLogo,
+  dark: blackAndWithLogo,
+};
+
+const logo = window.VERDACCIO_LOGO;
+
 interface Props {
   size?: Size;
 }
 
-const StyledLogo = styled('div')<Props>(props => ({
+const Logo: React.FC<Props> = ({ size = Size.Small }) => {
+  if (logo) {
+    return (
+      <ImageLogo>
+        <img alt="logo" height="40px" src={logo} />
+      </ImageLogo>
+    );
+  }
+  return <StyledLogo size={size} />;
+};
+
+export default Logo;
+
+const ImageLogo = styled('div')({
+  fontSize: 0,
+});
+
+const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size, theme }) => ({
   display: 'inline-block',
   verticalAlign: 'middle',
   boxSizing: 'border-box',
   backgroundPosition: 'center',
   backgroundSize: 'contain',
-  backgroundImage: `url(${logo})`,
+  backgroundImage: `url(${logos[theme?.palette.type]})`,
   backgroundRepeat: ' no-repeat',
-  width: props.size,
-  height: props.size,
+  width: size,
+  height: size,
 }));
-
-const Logo: React.FC<Props> = ({ size = Size.Small }) => {
-  return <StyledLogo size={size} />;
-};
-
-export default Logo;

src/components/Logo/img/logo-black-and-white.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-19.8%" y="-11.7%" width="139.6%" height="140.4%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><filter x="-33.9%" y="-50%" width="167.9%" height="272.7%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="b" d="M48 16.729L32.672 47h-8.874L0 0h15.328l12.907 25.492 4.437-8.763H48z"/><path d="M35.2 11H28V8.643h8.4l1.2-2.357H32V3.929h6.8l.8-1.572H36V0h20l-5.6 11H35.2z" id="d"/></defs><g fill="none" fill-rule="evenodd"><rect fill="#000" width="100" height="100" rx="37"/><g transform="translate(22 30)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill-opacity=".6" fill="#FFF" xlink:href="#b"/></g><g transform="translate(22 30)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g><path fill="#FFF" d="M54.785 77H45.88L22 30h15.38L58 70.718z"/></g></svg>