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;