From 26b484e988b15eb478042c9c4d47e7704f94f98b Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Sun, 22 Mar 2020 12:26:06 +0100
Subject: [PATCH 1/8] feat(style): added dark mode

---
 .secrets-baseline                             |  9 ++-
 src/App/App.tsx                               |  2 +-
 src/App/__snapshots__/App.test.tsx.snap       | 74 ++++++++++++++++---
 .../__snapshots__/ActionBar.test.tsx.snap     |  2 +-
 .../DetailContainer/DetailContainerTabs.tsx   | 10 +--
 .../DetailContainer.test.tsx.snap             |  9 ++-
 .../DetailSidebar/DetailSidebar.tsx           |  8 +-
 .../DetailSidebar/DetailSidebarTitle.tsx      | 18 ++---
 .../__snapshots__/Developers.test.tsx.snap    |  2 +-
 .../Footer/__snapshots__/Footer.test.tsx.snap |  4 +-
 src/components/Footer/styles.ts               |  8 +-
 src/components/Header/Header.tsx              | 10 +--
 src/components/Header/HeaderLeft.tsx          |  7 +-
 src/components/Header/HeaderLogo.tsx          | 25 -------
 src/components/Header/HeaderRight.tsx         | 34 ++++++---
 src/components/Header/HeaderToolTipIcon.tsx   | 19 ++++-
 .../Header/__snapshots__/Header.test.tsx.snap | 58 ++++++++++++++-
 .../__snapshots__/Loading.test.tsx.snap       |  4 +-
 src/components/Loading/styles.ts              |  8 +-
 .../LoginDialog/LoginDialogFormError.tsx      |  5 +-
 .../LoginDialog/LoginDialogHeader.tsx         |  1 +
 src/components/Logo/Logo.tsx                  | 43 ++++++++---
 .../Logo/img/logo-black-and-white.svg         |  1 +
 .../__snapshots__/Notfound.test.tsx.snap      |  2 +-
 src/components/Package/styles.ts              |  9 +--
 src/components/Readme/Readme.spec.tsx         |  2 +-
 src/components/Readme/Readme.tsx              | 13 +++-
 .../Readme/__snapshots__/Readme.spec.tsx.snap |  4 +-
 .../RegistryInfoContent.tsx                   | 18 +----
 src/components/RegistryInfoDialog/styles.ts   |  5 +-
 .../__snapshots__/Spinner.test.tsx.snap       |  2 +-
 src/components/Spinner/styles.ts              |  4 +-
 .../__snapshots__/UpLinks.test.tsx.snap       |  2 +-
 src/components/UpLinks/styles.ts              | 12 +--
 src/components/Versions/Versions.tsx          |  1 +
 src/components/Versions/styles.ts             | 12 +--
 src/design-tokens/ThemeContext.ts             | 10 +++
 src/design-tokens/ThemeProvider.tsx           | 27 +++++--
 src/design-tokens/theme.ts                    | 53 ++++++++-----
 src/design-tokens/useTheme.ts                 |  7 ++
 tools/webpack.dev.config.babel.js             |  1 -
 41 files changed, 357 insertions(+), 188 deletions(-)
 delete mode 100644 src/components/Header/HeaderLogo.tsx
 create mode 100644 src/components/Logo/img/logo-black-and-white.svg
 create mode 100644 src/design-tokens/ThemeContext.ts
 create mode 100644 src/design-tokens/useTheme.ts

diff --git a/.secrets-baseline b/.secrets-baseline
index 992b28fe7..cd4918f33 100644
--- a/.secrets-baseline
+++ b/.secrets-baseline
@@ -3,7 +3,7 @@
     "files": null,
     "lines": null
   },
-  "generated_at": "2019-09-29T18:19:50Z",
+  "generated_at": "2020-03-22T16:15:24Z",
   "plugins_used": [
     {
       "name": "AWSKeyDetector"
@@ -23,6 +23,7 @@
       "name": "HexHighEntropyString"
     },
     {
+      "keyword_exclude": null,
       "name": "KeywordDetector"
     },
     {
@@ -36,5 +37,9 @@
     }
   ],
   "results": {},
-  "version": "0.12.4"
+  "version": "0.13.0",
+  "word_list": {
+    "file": null,
+    "hash": null
+  }
 }
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 2b21059e8..99aa2b0d7 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -19,7 +19,7 @@ import AppRoute, { history } from './AppRoute';
 import loadDayJSLocale from './load-dayjs-locale';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme && theme.palette.white,
+  backgroundColor: theme?.palette.background.default,
 }));
 
 const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
diff --git a/src/App/__snapshots__/App.test.tsx.snap b/src/App/__snapshots__/App.test.tsx.snap
index 057a7c373..daad90761 100644
--- a/src/App/__snapshots__/App.test.tsx.snap
+++ b/src/App/__snapshots__/App.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`<App /> should display the Header component  1`] = `
 .emotion-78 {
-  background-color: #fff;
+  background-color: #1A202C;
 }
 
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -153,9 +153,9 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 .emotion-76 {
-  background: #f9f9f9;
+  background: #253341;
   border-top: 1px solid #e3e3e3;
-  color: #999999;
+  color: #fff;
   font-size: 14px;
   padding: 20px;
 }
@@ -322,7 +322,7 @@ exports[`<App /> should display the Header component  1`] = `
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #f7f8f6;
+  background: #000;
 }
 
 .emotion-26 {
@@ -353,7 +353,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 .emotion-30 {
-  color: #4b5e40;
+  color: #fff;
 }
 
 <div
@@ -522,6 +522,33 @@ exports[`<App /> should display the Header component  1`] = `
             class="MuiTouchRipple-root"
           />
         </button>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+              />
+              <path
+                d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"
@@ -702,11 +729,11 @@ exports[`<App /> should display the Header component  1`] = `
 
 exports[`<App /> should display the Loading component at the beginning  1`] = `
 .emotion-68 {
-  background-color: #fff;
+  background-color: #1A202C;
 }
 
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -853,9 +880,9 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 .emotion-66 {
-  background: #f9f9f9;
+  background: #253341;
   border-top: 1px solid #e3e3e3;
-  color: #999999;
+  color: #fff;
   font-size: 14px;
   padding: 20px;
 }
@@ -1176,6 +1203,33 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
             class="MuiTouchRipple-root"
           />
         </button>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+              />
+              <path
+                d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"
diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
index d840e1083..a7255e86f 100644
--- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
+++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ActionBar /> component should render the component in default state 1`] = `
 .emotion-0 {
-  background-color: #4b5e40;
+  background-color: #253341;
   color: #fff;
   margin-right: 10px;
 }
diff --git a/src/components/DetailContainer/DetailContainerTabs.tsx b/src/components/DetailContainer/DetailContainerTabs.tsx
index 097136ca6..5c6eac8bf 100644
--- a/src/components/DetailContainer/DetailContainerTabs.tsx
+++ b/src/components/DetailContainer/DetailContainerTabs.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { default as MuiTabs } from '../../muiComponents/Tabs';
 import Tab from '../../muiComponents/Tab';
+import { Theme } from '../../design-tokens/theme';
 
 interface Props {
   onChange: (event, newValue) => void;
@@ -14,12 +15,7 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
   const { t } = useTranslation();
 
   return (
-    <Tabs
-      indicatorColor={'primary'}
-      onChange={onChange}
-      textColor={'primary'}
-      value={tabPosition}
-      variant={'fullWidth'}>
+    <Tabs color={'primary'} indicatorColor={'primary'} onChange={onChange} value={tabPosition} variant={'fullWidth'}>
       <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
       <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
       <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
@@ -30,6 +26,6 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
 
 export default DetailContainerTabs;
 
-const Tabs = styled(MuiTabs)({
+const Tabs = styled(MuiTabs)<{ theme?: Theme }>({
   marginBottom: 16,
 });
diff --git a/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap b/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap
index c75cf6443..845f6660b 100644
--- a/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap
+++ b/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`DetailContainer renders correctly 1`] = `
 >
   <div
     class="MuiTabs-root emotion-0 emotion-1"
+    color="primary"
   >
     <div
       class="MuiTabs-scroller MuiTabs-fixed"
@@ -21,7 +22,7 @@ exports[`DetailContainer renders correctly 1`] = `
       >
         <button
           aria-selected="true"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected MuiTab-fullWidth"
           data-testid="readme-tab"
           id="readme-tab"
           role="tab"
@@ -39,7 +40,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="dependencies-tab"
           id="dependencies-tab"
           role="tab"
@@ -57,7 +58,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="versions-tab"
           id="versions-tab"
           role="tab"
@@ -75,7 +76,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="uplinks-tab"
           id="uplinks-tab"
           role="tab"
diff --git a/src/components/DetailSidebar/DetailSidebar.tsx b/src/components/DetailSidebar/DetailSidebar.tsx
index 95a5ea533..833c359a8 100644
--- a/src/components/DetailSidebar/DetailSidebar.tsx
+++ b/src/components/DetailSidebar/DetailSidebar.tsx
@@ -15,10 +15,6 @@ import { Theme } from '../../design-tokens/theme';
 import DetailSidebarTitle from './DetailSidebarTitle';
 import DetailSidebarFundButton from './DetailSidebarFundButton';
 
-const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
-  padding: theme.spacing(3, 2),
-}));
-
 const DetailSidebar: React.FC = () => {
   const detailContext = useContext(DetailContext);
 
@@ -50,3 +46,7 @@ const DetailSidebar: React.FC = () => {
 };
 
 export default DetailSidebar;
+
+const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
+  padding: theme?.spacing(3, 2),
+}));
diff --git a/src/components/DetailSidebar/DetailSidebarTitle.tsx b/src/components/DetailSidebar/DetailSidebarTitle.tsx
index f04569a9e..1c1307f47 100644
--- a/src/components/DetailSidebar/DetailSidebarTitle.tsx
+++ b/src/components/DetailSidebar/DetailSidebarTitle.tsx
@@ -13,15 +13,6 @@ interface Props {
   isLatest: boolean;
 }
 
-const StyledHeading = styled(Heading)({
-  fontSize: '1rem',
-  fontWeight: 700,
-});
-
-const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme && theme.palette.text.secondary,
-}));
-
 const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
   const { t } = useTranslation();
   return (
@@ -36,3 +27,12 @@ const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version
 };
 
 export default DetailSidebarTitle;
+
+const StyledHeading = styled(Heading)({
+  fontSize: '1rem',
+  fontWeight: 700,
+});
+
+const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme && theme.palette.text.secondary,
+}));
diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
index 88f79766c..ab8f4d513 100644
--- a/src/components/Developers/__snapshots__/Developers.test.tsx.snap
+++ b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`test Developers should render the component for contributors with items
         margin="10px 0 10px 0"
       >
         <div
-          className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
+          className="MuiBox-root MuiBox-root-91 emotion-8 emotion-9"
         >
           <ForwardRef(ToolTip)
             key="dave.methvin@gmail.com"
diff --git a/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
index 101bbcd82..ac49cb92a 100644
--- a/src/components/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -2,9 +2,9 @@
 
 exports[`<Footer /> component should load the initial state of Footer component 1`] = `
 .emotion-38 {
-  background: #f9f9f9;
+  background: #253341;
   border-top: 1px solid #e3e3e3;
-  color: #999999;
+  color: #fff;
   font-size: 14px;
   padding: 20px;
 }
diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts
index 4559980d1..13c956f60 100644
--- a/src/components/Footer/styles.ts
+++ b/src/components/Footer/styles.ts
@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import Icon from '../Icon/Icon';
 import { Theme } from '../../design-tokens/theme';
 
-export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
-  background: props.theme && props.theme.palette.snow,
-  borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
-  color: props.theme && props.theme.palette.nobel01,
+export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.type === 'dark' ? theme?.palette.primary.main : theme?.palette.snow,
+  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
   fontSize: '14px',
   padding: '20px',
 }));
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5cab99ec4..a7656f5bb 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -30,7 +30,6 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
   }
 
   const { user, scope, setUser } = appContext;
-  const logo = window.VERDACCIO_LOGO;
 
   /**
    * Logouts user
@@ -46,7 +45,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
     <>
       <NavBar data-testid="header" position="static">
         <InnerNavBar>
-          <HeaderLeft logo={logo} />
+          <HeaderLeft />
           <HeaderRight
             onLogout={handleLogout}
             onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
@@ -56,12 +55,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
             withoutSearch={withoutSearch}
           />
         </InnerNavBar>
-        <HeaderInfoDialog
-          isOpen={isInfoDialogOpen}
-          onCloseDialog={() => setOpenInfoDialog(false)}
-          registryUrl={getRegistryURL()}
-          scope={scope}
-        />
+        <HeaderInfoDialog isOpen={isInfoDialogOpen} onCloseDialog={() => setOpenInfoDialog(false)} registryUrl={getRegistryURL()} scope={scope} />
       </NavBar>
       {showMobileNavBar && !withoutSearch && (
         <MobileNavBar>
diff --git a/src/components/Header/HeaderLeft.tsx b/src/components/Header/HeaderLeft.tsx
index d58a2b1b0..c46999070 100644
--- a/src/components/Header/HeaderLeft.tsx
+++ b/src/components/Header/HeaderLeft.tsx
@@ -3,23 +3,22 @@ import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
 import Search from '../Search/';
+import Logo from '../Logo';
 
-import HeaderLogo from './HeaderLogo';
 import { LeftSide, SearchWrapper } from './styles';
 
 interface Props {
   withoutSearch?: boolean;
-  logo?: string;
 }
 
 const StyledLink = styled(Link)({
   marginRight: '1em',
 });
 
-const HeaderLeft: React.FC<Props> = ({ withoutSearch = false, logo }) => (
+const HeaderLeft: React.FC<Props> = ({ withoutSearch = false }) => (
   <LeftSide>
     <StyledLink to={'/'}>
-      <HeaderLogo logo={logo} />
+      <Logo />
     </StyledLink>
     {!withoutSearch && (
       <SearchWrapper>
diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx
deleted file mode 100644
index 20031af96..000000000
--- a/src/components/Header/HeaderLogo.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-import Logo from '../Logo';
-
-interface Props {
-  logo?: string;
-}
-
-const HeaderLogo: React.FC<Props> = ({ logo }) => {
-  if (logo) {
-    const Wrapper = styled('div')({
-      fontSize: 0,
-    });
-    return (
-      <Wrapper>
-        <img alt="logo" height="40px" src={logo} />
-      </Wrapper>
-    );
-  }
-
-  return <Logo />;
-};
-
-export default HeaderLogo;
diff --git a/src/components/Header/HeaderRight.tsx b/src/components/Header/HeaderRight.tsx
index 64f3b230d..503faab61 100644
--- a/src/components/Header/HeaderRight.tsx
+++ b/src/components/Header/HeaderRight.tsx
@@ -1,7 +1,8 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
+import React, { useState, useEffect, useContext, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
+import ThemeContext from '../../design-tokens/ThemeContext';
 
 import { RightSide } from './styles';
 import HeaderToolTip from './HeaderToolTip';
@@ -16,18 +17,17 @@ interface Props {
   onLogout: () => void;
 }
 
-const HeaderRight: React.FC<Props> = ({
-  withoutSearch = false,
-  username,
-  onToggleLogin,
-  onLogout,
-  onToggleMobileNav,
-  onOpenRegistryInfoDialog,
-}) => {
+const HeaderRight: React.FC<Props> = ({ withoutSearch = false, username, onToggleLogin, onLogout, onToggleMobileNav, onOpenRegistryInfoDialog }) => {
+  const themeContext = useContext(ThemeContext);
   const [anchorEl, setAnchorEl] = useState();
   const [isMenuOpen, setIsMenuOpen] = useState();
+
   const { t } = useTranslation();
 
+  if (!themeContext) {
+    throw Error(t('app-context-not-correct-used'));
+  }
+
   useEffect(() => {
     setIsMenuOpen(Boolean(anchorEl));
   }, [anchorEl]);
@@ -54,13 +54,23 @@ const HeaderRight: React.FC<Props> = ({
     onToggleLogin();
   };
 
+  const handleToggleDarkLightMode = () => {
+    setTimeout(() => {
+      themeContext.setIsDarkMode(!themeContext.isDarkMode);
+    }, 300);
+  };
+
   return (
     <RightSide data-testid="header-right">
-      {!withoutSearch && (
-        <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
-      )}
+      {!withoutSearch && <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />}
       <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
       <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
+      <HeaderToolTip
+        onClick={handleToggleDarkLightMode}
+        title={t('header.documentation')}
+        tooltipIconType={themeContext.isDarkMode ? 'dark-mode' : 'light-mode'}
+      />
+
       {username ? (
         <HeaderMenu
           anchorEl={anchorEl}
diff --git a/src/components/Header/HeaderToolTipIcon.tsx b/src/components/Header/HeaderToolTipIcon.tsx
index 76e2ac636..9b124c9ae 100644
--- a/src/components/Header/HeaderToolTipIcon.tsx
+++ b/src/components/Header/HeaderToolTipIcon.tsx
@@ -2,12 +2,14 @@ import React, { forwardRef } from 'react';
 import Info from '@material-ui/icons/Info';
 import Help from '@material-ui/icons/Help';
 import Search from '@material-ui/icons/Search';
+import NightsStay from '@material-ui/icons/NightsStay';
+import WbSunny from '@material-ui/icons/WbSunny';
 
 import IconButton from '../../muiComponents/IconButton';
 
 import { IconSearchButton, StyledLink } from './styles';
 
-export type TooltipIconType = 'search' | 'help' | 'info';
+export type TooltipIconType = 'search' | 'help' | 'info' | 'dark-mode' | 'light-mode';
 interface Props {
   tooltipIconType: TooltipIconType;
   onClick?: () => void;
@@ -50,6 +52,21 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
           <Search />
         </IconSearchButton>
       );
+    case 'dark-mode':
+      // todo(Priscila): Add Zoom transition effect
+      return (
+        <IconButton color="inherit" onClick={onClick} ref={ref}>
+          <NightsStay />
+        </IconButton>
+      );
+
+    case 'light-mode':
+      // todo(Priscila): Add Zoom transition effect
+      return (
+        <IconButton color="inherit" onClick={onClick} ref={ref}>
+          <WbSunny />
+        </IconButton>
+      );
     default:
       return null;
   }
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index 6616c9fd6..9e42f8518 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -302,6 +302,33 @@ exports[`<Header /> component with logged in state should load the component in
           class="MuiTouchRipple-root"
         />
       </button>
+      <button
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+            />
+            <path
+              d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
       <button
         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
         data-testid="header--menu-accountcircle"
@@ -335,7 +362,7 @@ exports[`<Header /> component with logged in state should load the component in
 
 exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -635,6 +662,33 @@ exports[`<Header /> component with logged in state should load the component in
           class="MuiTouchRipple-root"
         />
       </button>
+      <button
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+            />
+            <path
+              d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
         data-testid="header--button-login"
diff --git a/src/components/Loading/__snapshots__/Loading.test.tsx.snap b/src/components/Loading/__snapshots__/Loading.test.tsx.snap
index 99f903b06..0c2be4dd3 100644
--- a/src/components/Loading/__snapshots__/Loading.test.tsx.snap
+++ b/src/components/Loading/__snapshots__/Loading.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<Loading /> component should render the component in default state 1`]
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #f7f8f6;
+  background: #000;
 }
 
 .emotion-0 {
@@ -45,7 +45,7 @@ exports[`<Loading /> component should render the component in default state 1`]
 }
 
 .emotion-4 {
-  color: #4b5e40;
+  color: #fff;
 }
 
 <div
diff --git a/src/components/Loading/styles.ts b/src/components/Loading/styles.ts
index 889bb733e..9028045f1 100644
--- a/src/components/Loading/styles.ts
+++ b/src/components/Loading/styles.ts
@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import { Theme } from '../../design-tokens/theme';
+
 export const Wrapper = styled('div')({
   transform: 'translate(-50%, -50%)',
   top: '50%',
@@ -7,9 +9,9 @@ export const Wrapper = styled('div')({
   position: 'absolute',
 });
 
-export const Badge = styled('div')({
+export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   margin: '0 0 30px 0',
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
-  background: '#f7f8f6',
-});
+  background: theme?.palette.type === 'dark' ? theme?.palette.black : '#f7f8f6',
+}));
diff --git a/src/components/LoginDialog/LoginDialogFormError.tsx b/src/components/LoginDialog/LoginDialogFormError.tsx
index 16f26e9c5..1efb01846 100644
--- a/src/components/LoginDialog/LoginDialogFormError.tsx
+++ b/src/components/LoginDialog/LoginDialogFormError.tsx
@@ -8,13 +8,14 @@ import { Theme } from '../../design-tokens/theme';
 import { LoginError } from '../../utils/login';
 
 const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme.palette.error.dark,
+  backgroundColor: theme?.palette.error.dark,
+  color: theme?.palette.white,
 }));
 
 const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   opacity: 0.9,
-  marginRight: theme.spacing(1),
+  marginRight: theme?.spacing(1),
 }));
 
 export interface FormValues {
diff --git a/src/components/LoginDialog/LoginDialogHeader.tsx b/src/components/LoginDialog/LoginDialogHeader.tsx
index 30272a05d..dcfd22eb3 100644
--- a/src/components/LoginDialog/LoginDialogHeader.tsx
+++ b/src/components/LoginDialog/LoginDialogHeader.tsx
@@ -13,6 +13,7 @@ import { Theme } from '../../design-tokens/theme';
 const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
   margin: theme.spacing(1),
   backgroundColor: theme.palette.primary.main,
+  color: theme.palette.white,
 }));
 
 const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 8716bf09e..7c4e96c01 100644
--- a/src/components/Logo/Logo.tsx
+++ b/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;
diff --git a/src/components/Logo/img/logo-black-and-white.svg b/src/components/Logo/img/logo-black-and-white.svg
new file mode 100644
index 000000000..4eca3c6ed
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
index 0020a0057..c80da3f16 100644
--- a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
+++ b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<NotFound /> component should load the component in default state 1`] =
 }
 
 .emotion-2 {
-  color: #4b5e40;
+  color: #253341;
   margin-bottom: 16px;
 }
 
diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts
index 33e60765d..39e7b125b 100644
--- a/src/components/Package/styles.ts
+++ b/src/components/Package/styles.ts
@@ -71,11 +71,8 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: theme && theme.palette.eclipse,
+  color: theme?.palette.type == 'dark' ? theme?.palette.white : theme?.palette.eclipse,
   cursor: 'pointer',
-  ':hover': {
-    color: theme && theme.palette.black,
-  },
   [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
@@ -86,10 +83,10 @@ export const GridRightAligned = styled(Grid)({
   textAlign: 'right',
 });
 
-export const PackageList = styled(List)<{ theme?: Theme }>(props => ({
+export const PackageList = styled(List)<{ theme?: Theme }>(({ theme }) => ({
   padding: '12px 0 12px 0',
   ':hover': {
-    backgroundColor: props.theme && props.theme.palette.greyLight3,
+    backgroundColor: theme?.palette?.type == 'dark' ? theme?.palette?.primary.main : theme?.palette?.greyLight3,
   },
   '> :last-child': {
     paddingTop: 0,
diff --git a/src/components/Readme/Readme.spec.tsx b/src/components/Readme/Readme.spec.tsx
index 22eb84646..80e2faf46 100644
--- a/src/components/Readme/Readme.spec.tsx
+++ b/src/components/Readme/Readme.spec.tsx
@@ -12,7 +12,7 @@ describe('<Readme /> component', () => {
 
   test('should dangerously set html', () => {
     const wrapper = mount(<Readme description="<h1>This is a test string</h1>" />);
-    expect(wrapper.html()).toEqual('<div class="markdown-body"><h1>This is a test string</h1></div>');
+    expect(wrapper.html()).toEqual('<div class="markdown-body css-beaqbv-Wrapper ecnabbe0"><h1>This is a test string</h1></div>');
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
diff --git a/src/components/Readme/Readme.tsx b/src/components/Readme/Readme.tsx
index 189497f94..c6eefe53d 100644
--- a/src/components/Readme/Readme.tsx
+++ b/src/components/Readme/Readme.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import 'github-markdown-css';
+import styled from '@emotion/styled';
+
+import { Theme } from '../../design-tokens/theme';
 
 import { Props } from './types';
 
-const Readme: React.FC<Props> = ({ description }) => (
-  <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
-);
+const Readme: React.FC<Props> = ({ description }) => <Wrapper className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />;
 
 export default Readme;
+
+const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.white,
+  color: theme?.palette.black,
+  padding: theme?.spacing(2, 3),
+}));
diff --git a/src/components/Readme/__snapshots__/Readme.spec.tsx.snap b/src/components/Readme/__snapshots__/Readme.spec.tsx.snap
index 81d7529d1..5ff3b0691 100644
--- a/src/components/Readme/__snapshots__/Readme.spec.tsx.snap
+++ b/src/components/Readme/__snapshots__/Readme.spec.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body\\"><h1>This is a test string</h1></div>"`;
+exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body css-beaqbv-Wrapper ecnabbe0\\"><h1>This is a test string</h1></div>"`;
 
-exports[`<Readme /> component should load the component in default state 1`] = `"<div class=\\"markdown-body\\">test</div>"`;
+exports[`<Readme /> component should load the component in default state 1`] = `"<div class=\\"markdown-body css-beaqbv-Wrapper ecnabbe0\\">test</div>"`;
diff --git a/src/components/RegistryInfoContent/RegistryInfoContent.tsx b/src/components/RegistryInfoContent/RegistryInfoContent.tsx
index ce6e9bb15..03fdae3d8 100644
--- a/src/components/RegistryInfoContent/RegistryInfoContent.tsx
+++ b/src/components/RegistryInfoContent/RegistryInfoContent.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { css } from '@emotion/core';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
@@ -47,13 +46,7 @@ const RegistryInfoContent: React.FC<Props> = props => {
 
     return (
       <>
-        <Tabs
-          data-testid={'tabs-el'}
-          indicatorColor="primary"
-          onChange={handleChange}
-          textColor="primary"
-          value={tabPosition}
-          variant="fullWidth">
+        <Tabs color={'primary'} data-testid={'tabs-el'} indicatorColor={'primary'} onChange={handleChange} value={tabPosition} variant="fullWidth">
           <Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} />
           <Tab data-testid={'pnpm-tab'} label={NODE_MANAGER.pnpm} />
           <Tab data-testid={'yarn-tab'} label={NODE_MANAGER.yarn} />
@@ -69,14 +62,7 @@ const RegistryInfoContent: React.FC<Props> = props => {
   const TabContainer = ({ children }): JSX.Element => {
     return (
       <CommandContainer>
-        <Typography
-          // className={css`
-          //   padding: 0;
-          //   min-height: 170;
-          // `}
-          component="div">
-          {children}
-        </Typography>
+        <Typography component="div">{children}</Typography>
       </CommandContainer>
     );
   };
diff --git a/src/components/RegistryInfoDialog/styles.ts b/src/components/RegistryInfoDialog/styles.ts
index 236bb0462..fe6b344d1 100644
--- a/src/components/RegistryInfoDialog/styles.ts
+++ b/src/components/RegistryInfoDialog/styles.ts
@@ -10,6 +10,7 @@ export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
   fontSize: props.theme && props.theme.fontSize.lg,
 }));
 
-export const Content = styled(DialogContent)({
+export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
   padding: '0 24px',
-});
+  backgroundColor: theme?.palette.background.default,
+}));
diff --git a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
index b8b75f1a1..7d62526b0 100644
--- a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
+++ b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-1ju0ex2-Wrapper e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-evyw70-Circular e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width: 10px; height: 10px;\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;
+exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-1ju0ex2-Wrapper e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-vztaxs-Circular e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width: 10px; height: 10px;\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;
diff --git a/src/components/Spinner/styles.ts b/src/components/Spinner/styles.ts
index 19dc75934..4cbf1eaa3 100644
--- a/src/components/Spinner/styles.ts
+++ b/src/components/Spinner/styles.ts
@@ -19,6 +19,6 @@ export const Wrapper = styled('div')<WrapperProps>(props => ({
   }),
 }));
 
-export const Circular = styled(CircularProgress)<{ theme?: Theme }>(props => ({
-  color: props.theme && props.theme.palette.primary.main,
+export const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
 }));
diff --git a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
index b20c22d21..bc428c37f 100644
--- a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
+++ b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
@@ -2,4 +2,4 @@
 
 exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;
 
-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-16ae84p-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-c0jbu0-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-16ae84p-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
diff --git a/src/components/UpLinks/styles.ts b/src/components/UpLinks/styles.ts
index 7758d4bf3..2e342d3ed 100644
--- a/src/components/UpLinks/styles.ts
+++ b/src/components/UpLinks/styles.ts
@@ -8,15 +8,15 @@ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
   fontWeight: props.theme && props.theme.fontWeight.bold,
 }));
 
-export const Spacer = styled('div')({
+export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
-  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
+  borderBottom: `1px dotted ${theme?.palette.type == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'} `,
   whiteSpace: 'nowrap',
   height: '0.5em',
-});
+}));
 
-export const ListItemText = styled(MuiListItemText)({
+export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
-  color: 'black',
+  color: theme?.palette.type == 'light' ? theme?.palette.black : theme?.palette.white,
   opacity: 0.6,
-});
+}));
diff --git a/src/components/Versions/Versions.tsx b/src/components/Versions/Versions.tsx
index d53c2e16d..fad20b01f 100644
--- a/src/components/Versions/Versions.tsx
+++ b/src/components/Versions/Versions.tsx
@@ -7,6 +7,7 @@ import { DIST_TAGS } from '../../../lib/constants';
 import { StyledText } from './styles';
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
+
 const Versions: React.FC = () => {
   const detailContext = useContext(DetailContext);
   const { t } = useTranslation();
diff --git a/src/components/Versions/styles.ts b/src/components/Versions/styles.ts
index d27255818..d3db877d8 100644
--- a/src/components/Versions/styles.ts
+++ b/src/components/Versions/styles.ts
@@ -9,19 +9,19 @@ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
   fontWeight: props.theme && props.theme.fontWeight.bold,
 }));
 
-export const Spacer = styled('div')({
+export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
-  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
+  borderBottom: `1px dotted ${theme?.palette.type == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'} `,
   whiteSpace: 'nowrap',
   height: '0.5em',
   margin: '0 16px',
-});
+}));
 
-export const ListItemText = styled(MuiListItemText)({
+export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
-  color: 'black',
   opacity: 0.6,
-});
+  color: theme?.palette.type == 'light' ? theme?.palette.black : theme?.palette.white,
+}));
 
 export const StyledLink = styled(Link)({
   textDecoration: 'none',
diff --git a/src/design-tokens/ThemeContext.ts b/src/design-tokens/ThemeContext.ts
new file mode 100644
index 000000000..c3d09bea1
--- /dev/null
+++ b/src/design-tokens/ThemeContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+interface Props {
+  isDarkMode: boolean;
+  setIsDarkMode: (isDarkMode: boolean) => void;
+}
+
+const ThemeContext = createContext<undefined | Props>(undefined);
+
+export default ThemeContext;
diff --git a/src/design-tokens/ThemeProvider.tsx b/src/design-tokens/ThemeProvider.tsx
index 82064d2aa..25639fbaa 100644
--- a/src/design-tokens/ThemeProvider.tsx
+++ b/src/design-tokens/ThemeProvider.tsx
@@ -1,13 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 
-import theme from './theme';
+import ThemeContext from './ThemeContext';
+import { getTheme, ThemeMode } from './theme';
 
-const ThemeProvider: React.FC = ({ children }) => (
-  <EmotionThemeProvider theme={theme}>
-    <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
-  </EmotionThemeProvider>
-);
+const ThemeProvider: React.FC = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState();
+
+  const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isDarkMode,
+        setIsDarkMode,
+      }}>
+      <EmotionThemeProvider theme={getTheme(themeMode)}>
+        <MuiThemeProvider theme={getTheme(themeMode)}>{children}</MuiThemeProvider>
+      </EmotionThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
 
 export default ThemeProvider;
diff --git a/src/design-tokens/theme.ts b/src/design-tokens/theme.ts
index 5f1d6cbfb..1cf0522b0 100644
--- a/src/design-tokens/theme.ts
+++ b/src/design-tokens/theme.ts
@@ -1,7 +1,5 @@
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 
-// Main colors
-// -------------------------
 const colors = {
   black: '#000',
   white: '#fff',
@@ -25,9 +23,22 @@ const colors = {
   nobel02: '#9f9f9f',
   primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
   secondary: '#20232a',
+  background: '#fff',
 };
 
-export type Colors = keyof typeof colors;
+const themeModes = {
+  light: {
+    ...colors,
+  },
+  dark: {
+    ...colors,
+    primary: '#253341',
+    secondary: '#20232a',
+    background: '#1A202C',
+  },
+};
+
+export type ThemeMode = keyof typeof themeModes;
 
 const fontSize = {
   xxl: 26,
@@ -67,20 +78,27 @@ const customizedTheme = {
 
 type CustomizedTheme = typeof customizedTheme;
 
-export const theme = createMuiTheme({
-  typography: {
-    fontFamily: 'inherit',
-  },
-  palette: {
-    ...colors,
-    primary: { main: colors.primary },
-    secondary: { main: colors.secondary },
-    error: { main: colors.red },
-  },
-  ...customizedTheme,
-});
+export const getTheme = (themeMode: ThemeMode) => {
+  const palette = themeModes[themeMode];
+  return createMuiTheme({
+    typography: {
+      fontFamily: 'inherit',
+    },
+    palette: {
+      type: themeMode,
+      ...palette,
+      primary: { main: palette.primary },
+      secondary: { main: palette.secondary },
+      error: { main: palette.red },
+      background: {
+        default: palette.background,
+      },
+    },
+    ...customizedTheme,
+  });
+};
 
-export type Theme = typeof theme;
+export type Theme = ReturnType<typeof getTheme>;
 
 declare module '@material-ui/core/styles/createMuiTheme' {
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
@@ -111,6 +129,7 @@ declare module '@material-ui/core/styles/createPalette' {
     love: string;
     nobel01: string;
     nobel02: string;
+    background: string;
   }
 
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
@@ -118,5 +137,3 @@ declare module '@material-ui/core/styles/createPalette' {
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
   interface PaletteOptions extends Partial<CustomPalette> {}
 }
-
-export default { ...theme };
diff --git a/src/design-tokens/useTheme.ts b/src/design-tokens/useTheme.ts
new file mode 100644
index 000000000..fd9ce7896
--- /dev/null
+++ b/src/design-tokens/useTheme.ts
@@ -0,0 +1,7 @@
+import { useTheme as muiUseTheme } from '@material-ui/styles';
+
+import { Theme } from './theme';
+
+const useTheme = () => muiUseTheme<Theme>();
+
+export default useTheme;
diff --git a/tools/webpack.dev.config.babel.js b/tools/webpack.dev.config.babel.js
index 726bb84dc..c0846de64 100644
--- a/tools/webpack.dev.config.babel.js
+++ b/tools/webpack.dev.config.babel.js
@@ -41,7 +41,6 @@ export default {
       }),
       title: 'Verdaccio Dev UI',
       scope: '',
-      logo: 'https://verdaccio.org/img/logo/symbol/svg/verdaccio-tiny.svg',
       filename: 'index.html',
       verdaccioURL: '//localhost:4872',
       template: `${env.SRC_ROOT}/template/index.html`,

From 76cda8f2f01851c0a4c2a49b28408422370df5a0 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Sun, 22 Mar 2020 17:39:33 +0100
Subject: [PATCH 2/8] Delete .secrets-baseline

---
 .secrets-baseline | 45 ---------------------------------------------
 1 file changed, 45 deletions(-)
 delete mode 100644 .secrets-baseline

diff --git a/.secrets-baseline b/.secrets-baseline
deleted file mode 100644
index cd4918f33..000000000
--- a/.secrets-baseline
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "exclude": {
-    "files": null,
-    "lines": null
-  },
-  "generated_at": "2020-03-22T16:15:24Z",
-  "plugins_used": [
-    {
-      "name": "AWSKeyDetector"
-    },
-    {
-      "name": "ArtifactoryDetector"
-    },
-    {
-      "base64_limit": 4.5,
-      "name": "Base64HighEntropyString"
-    },
-    {
-      "name": "BasicAuthDetector"
-    },
-    {
-      "hex_limit": 3,
-      "name": "HexHighEntropyString"
-    },
-    {
-      "keyword_exclude": null,
-      "name": "KeywordDetector"
-    },
-    {
-      "name": "PrivateKeyDetector"
-    },
-    {
-      "name": "SlackDetector"
-    },
-    {
-      "name": "StripeDetector"
-    }
-  ],
-  "results": {},
-  "version": "0.13.0",
-  "word_list": {
-    "file": null,
-    "hash": null
-  }
-}

From f2565a0421fa06988a679602a11894f9238ac019 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Sun, 22 Mar 2020 12:26:06 +0100
Subject: [PATCH 3/8] feat(style): added dark mode

---
 .secrets-baseline                             | 76 +++++++++----------
 src/App/App.tsx                               |  2 +-
 src/App/__snapshots__/App.test.tsx.snap       | 74 +++++++++++++++---
 .../__snapshots__/ActionBar.test.tsx.snap     |  2 +-
 .../DetailContainer/DetailContainerTabs.tsx   | 10 +--
 .../DetailContainer.test.tsx.snap             |  9 ++-
 .../DetailSidebar/DetailSidebar.tsx           |  8 +-
 .../DetailSidebar/DetailSidebarTitle.tsx      | 18 ++---
 .../__snapshots__/Developers.test.tsx.snap    |  2 +-
 .../Footer/__snapshots__/Footer.test.tsx.snap |  4 +-
 src/components/Footer/styles.ts               |  8 +-
 src/components/Header/Header.tsx              |  3 +-
 src/components/Header/HeaderLeft.tsx          |  7 +-
 src/components/Header/HeaderLogo.tsx          | 25 ------
 src/components/Header/HeaderRight.tsx         | 21 ++++-
 src/components/Header/HeaderToolTipIcon.tsx   | 19 ++++-
 .../Header/__snapshots__/Header.test.tsx.snap | 58 +++++++++++++-
 .../__snapshots__/Loading.test.tsx.snap       |  4 +-
 src/components/Loading/styles.ts              |  8 +-
 .../LoginDialog/LoginDialogFormError.tsx      |  5 +-
 .../LoginDialog/LoginDialogHeader.tsx         |  1 +
 src/components/Logo/Logo.tsx                  | 43 ++++++++---
 .../Logo/img/logo-black-and-white.svg         |  1 +
 .../__snapshots__/Notfound.test.tsx.snap      |  2 +-
 src/components/Package/styles.ts              |  9 +--
 src/components/Readme/Readme.spec.tsx         |  4 +-
 src/components/Readme/Readme.tsx              | 11 ++-
 .../Readme/__snapshots__/Readme.spec.tsx.snap |  4 +-
 .../RegistryInfoContent.tsx                   | 14 +---
 src/components/RegistryInfoDialog/styles.ts   |  5 +-
 .../__snapshots__/Spinner.test.tsx.snap       |  2 +-
 src/components/Spinner/styles.ts              |  4 +-
 .../__snapshots__/UpLinks.test.tsx.snap       |  2 +-
 src/components/UpLinks/styles.ts              | 12 +--
 src/components/Versions/Versions.tsx          |  1 +
 src/components/Versions/styles.ts             | 12 +--
 src/design-tokens/ThemeContext.ts             | 10 +++
 src/design-tokens/ThemeProvider.tsx           | 27 +++++--
 src/design-tokens/theme.ts                    | 53 ++++++++-----
 src/design-tokens/useTheme.ts                 |  7 ++
 tools/webpack.dev.config.babel.js             |  1 -
 41 files changed, 388 insertions(+), 200 deletions(-)
 delete mode 100644 src/components/Header/HeaderLogo.tsx
 create mode 100644 src/components/Logo/img/logo-black-and-white.svg
 create mode 100644 src/design-tokens/ThemeContext.ts
 create mode 100644 src/design-tokens/useTheme.ts

diff --git a/.secrets-baseline b/.secrets-baseline
index 992b28fe7..4dfeead97 100644
--- a/.secrets-baseline
+++ b/.secrets-baseline
@@ -1,40 +1,40 @@
 {
-  "exclude": {
-    "files": null,
-    "lines": null
-  },
-  "generated_at": "2019-09-29T18:19:50Z",
-  "plugins_used": [
-    {
-      "name": "AWSKeyDetector"
-    },
-    {
-      "name": "ArtifactoryDetector"
-    },
-    {
-      "base64_limit": 4.5,
-      "name": "Base64HighEntropyString"
-    },
-    {
-      "name": "BasicAuthDetector"
-    },
-    {
-      "hex_limit": 3,
-      "name": "HexHighEntropyString"
-    },
-    {
-      "name": "KeywordDetector"
-    },
-    {
-      "name": "PrivateKeyDetector"
-    },
-    {
-      "name": "SlackDetector"
-    },
-    {
-      "name": "StripeDetector"
-    }
-  ],
-  "results": {},
-  "version": "0.12.4"
+"exclude": {
+"files": null,
+"lines": null
+},
+"generated_at": "2019-09-29T18:19:50Z",
+"plugins_used": [
+{
+"name": "AWSKeyDetector"
+},
+{
+"name": "ArtifactoryDetector"
+},
+{
+"base64_limit": 4.5,
+"name": "Base64HighEntropyString"
+},
+{
+"name": "BasicAuthDetector"
+},
+{
+"hex_limit": 3,
+"name": "HexHighEntropyString"
+},
+{
+"name": "KeywordDetector"
+},
+{
+"name": "PrivateKeyDetector"
+},
+{
+"name": "SlackDetector"
+},
+{
+"name": "StripeDetector"
 }
+],
+"results": {},
+"version": "0.12.4"
+}
\ No newline at end of file
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 2b21059e8..99aa2b0d7 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -19,7 +19,7 @@ import AppRoute, { history } from './AppRoute';
 import loadDayJSLocale from './load-dayjs-locale';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme && theme.palette.white,
+  backgroundColor: theme?.palette.background.default,
 }));
 
 const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
diff --git a/src/App/__snapshots__/App.test.tsx.snap b/src/App/__snapshots__/App.test.tsx.snap
index 057a7c373..daad90761 100644
--- a/src/App/__snapshots__/App.test.tsx.snap
+++ b/src/App/__snapshots__/App.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`<App /> should display the Header component  1`] = `
 .emotion-78 {
-  background-color: #fff;
+  background-color: #1A202C;
 }
 
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -153,9 +153,9 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 .emotion-76 {
-  background: #f9f9f9;
+  background: #253341;
   border-top: 1px solid #e3e3e3;
-  color: #999999;
+  color: #fff;
   font-size: 14px;
   padding: 20px;
 }
@@ -322,7 +322,7 @@ exports[`<App /> should display the Header component  1`] = `
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #f7f8f6;
+  background: #000;
 }
 
 .emotion-26 {
@@ -353,7 +353,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 .emotion-30 {
-  color: #4b5e40;
+  color: #fff;
 }
 
 <div
@@ -522,6 +522,33 @@ exports[`<App /> should display the Header component  1`] = `
             class="MuiTouchRipple-root"
           />
         </button>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+              />
+              <path
+                d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"
@@ -702,11 +729,11 @@ exports[`<App /> should display the Header component  1`] = `
 
 exports[`<App /> should display the Loading component at the beginning  1`] = `
 .emotion-68 {
-  background-color: #fff;
+  background-color: #1A202C;
 }
 
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -853,9 +880,9 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 .emotion-66 {
-  background: #f9f9f9;
+  background: #253341;
   border-top: 1px solid #e3e3e3;
-  color: #999999;
+  color: #fff;
   font-size: 14px;
   padding: 20px;
 }
@@ -1176,6 +1203,33 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
             class="MuiTouchRipple-root"
           />
         </button>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+              />
+              <path
+                d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"
diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
index d840e1083..a7255e86f 100644
--- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
+++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ActionBar /> component should render the component in default state 1`] = `
 .emotion-0 {
-  background-color: #4b5e40;
+  background-color: #253341;
   color: #fff;
   margin-right: 10px;
 }
diff --git a/src/components/DetailContainer/DetailContainerTabs.tsx b/src/components/DetailContainer/DetailContainerTabs.tsx
index 097136ca6..5c6eac8bf 100644
--- a/src/components/DetailContainer/DetailContainerTabs.tsx
+++ b/src/components/DetailContainer/DetailContainerTabs.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { default as MuiTabs } from '../../muiComponents/Tabs';
 import Tab from '../../muiComponents/Tab';
+import { Theme } from '../../design-tokens/theme';
 
 interface Props {
   onChange: (event, newValue) => void;
@@ -14,12 +15,7 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
   const { t } = useTranslation();
 
   return (
-    <Tabs
-      indicatorColor={'primary'}
-      onChange={onChange}
-      textColor={'primary'}
-      value={tabPosition}
-      variant={'fullWidth'}>
+    <Tabs color={'primary'} indicatorColor={'primary'} onChange={onChange} value={tabPosition} variant={'fullWidth'}>
       <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
       <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
       <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
@@ -30,6 +26,6 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
 
 export default DetailContainerTabs;
 
-const Tabs = styled(MuiTabs)({
+const Tabs = styled(MuiTabs)<{ theme?: Theme }>({
   marginBottom: 16,
 });
diff --git a/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap b/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap
index c75cf6443..845f6660b 100644
--- a/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap
+++ b/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`DetailContainer renders correctly 1`] = `
 >
   <div
     class="MuiTabs-root emotion-0 emotion-1"
+    color="primary"
   >
     <div
       class="MuiTabs-scroller MuiTabs-fixed"
@@ -21,7 +22,7 @@ exports[`DetailContainer renders correctly 1`] = `
       >
         <button
           aria-selected="true"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected MuiTab-fullWidth"
           data-testid="readme-tab"
           id="readme-tab"
           role="tab"
@@ -39,7 +40,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="dependencies-tab"
           id="dependencies-tab"
           role="tab"
@@ -57,7 +58,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="versions-tab"
           id="versions-tab"
           role="tab"
@@ -75,7 +76,7 @@ exports[`DetailContainer renders correctly 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
           data-testid="uplinks-tab"
           id="uplinks-tab"
           role="tab"
diff --git a/src/components/DetailSidebar/DetailSidebar.tsx b/src/components/DetailSidebar/DetailSidebar.tsx
index 95a5ea533..833c359a8 100644
--- a/src/components/DetailSidebar/DetailSidebar.tsx
+++ b/src/components/DetailSidebar/DetailSidebar.tsx
@@ -15,10 +15,6 @@ import { Theme } from '../../design-tokens/theme';
 import DetailSidebarTitle from './DetailSidebarTitle';
 import DetailSidebarFundButton from './DetailSidebarFundButton';
 
-const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
-  padding: theme.spacing(3, 2),
-}));
-
 const DetailSidebar: React.FC = () => {
   const detailContext = useContext(DetailContext);
 
@@ -50,3 +46,7 @@ const DetailSidebar: React.FC = () => {
 };
 
 export default DetailSidebar;
+
+const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
+  padding: theme?.spacing(3, 2),
+}));
diff --git a/src/components/DetailSidebar/DetailSidebarTitle.tsx b/src/components/DetailSidebar/DetailSidebarTitle.tsx
index f04569a9e..1c1307f47 100644
--- a/src/components/DetailSidebar/DetailSidebarTitle.tsx
+++ b/src/components/DetailSidebar/DetailSidebarTitle.tsx
@@ -13,15 +13,6 @@ interface Props {
   isLatest: boolean;
 }
 
-const StyledHeading = styled(Heading)({
-  fontSize: '1rem',
-  fontWeight: 700,
-});
-
-const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme && theme.palette.text.secondary,
-}));
-
 const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
   const { t } = useTranslation();
   return (
@@ -36,3 +27,12 @@ const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version
 };
 
 export default DetailSidebarTitle;
+
+const StyledHeading = styled(Heading)({
+  fontSize: '1rem',
+  fontWeight: 700,
+});
+
+const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme && theme.palette.text.secondary,
+}));
diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
index 88f79766c..ab8f4d513 100644
--- a/src/components/Developers/__snapshots__/Developers.test.tsx.snap
+++ b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`test Developers should render the component for contributors with items
         margin="10px 0 10px 0"
       >
         <div
-          className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
+          className="MuiBox-root MuiBox-root-91 emotion-8 emotion-9"
         >
           <ForwardRef(ToolTip)
             key="dave.methvin@gmail.com"
diff --git a/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
index 101bbcd82..ac49cb92a 100644
--- a/src/components/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -2,9 +2,9 @@
 
 exports[`<Footer /> component should load the initial state of Footer component 1`] = `
 .emotion-38 {
-  background: #f9f9f9;
+  background: #253341;
   border-top: 1px solid #e3e3e3;
-  color: #999999;
+  color: #fff;
   font-size: 14px;
   padding: 20px;
 }
diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts
index 4559980d1..13c956f60 100644
--- a/src/components/Footer/styles.ts
+++ b/src/components/Footer/styles.ts
@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import Icon from '../Icon/Icon';
 import { Theme } from '../../design-tokens/theme';
 
-export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
-  background: props.theme && props.theme.palette.snow,
-  borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
-  color: props.theme && props.theme.palette.nobel01,
+export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.type === 'dark' ? theme?.palette.primary.main : theme?.palette.snow,
+  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
   fontSize: '14px',
   padding: '20px',
 }));
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5cab99ec4..e5411237f 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -30,7 +30,6 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
   }
 
   const { user, scope, setUser } = appContext;
-  const logo = window.VERDACCIO_LOGO;
 
   /**
    * Logouts user
@@ -46,7 +45,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
     <>
       <NavBar data-testid="header" position="static">
         <InnerNavBar>
-          <HeaderLeft logo={logo} />
+          <HeaderLeft />
           <HeaderRight
             onLogout={handleLogout}
             onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
diff --git a/src/components/Header/HeaderLeft.tsx b/src/components/Header/HeaderLeft.tsx
index d58a2b1b0..c46999070 100644
--- a/src/components/Header/HeaderLeft.tsx
+++ b/src/components/Header/HeaderLeft.tsx
@@ -3,23 +3,22 @@ import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
 import Search from '../Search/';
+import Logo from '../Logo';
 
-import HeaderLogo from './HeaderLogo';
 import { LeftSide, SearchWrapper } from './styles';
 
 interface Props {
   withoutSearch?: boolean;
-  logo?: string;
 }
 
 const StyledLink = styled(Link)({
   marginRight: '1em',
 });
 
-const HeaderLeft: React.FC<Props> = ({ withoutSearch = false, logo }) => (
+const HeaderLeft: React.FC<Props> = ({ withoutSearch = false }) => (
   <LeftSide>
     <StyledLink to={'/'}>
-      <HeaderLogo logo={logo} />
+      <Logo />
     </StyledLink>
     {!withoutSearch && (
       <SearchWrapper>
diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx
deleted file mode 100644
index 20031af96..000000000
--- a/src/components/Header/HeaderLogo.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-import Logo from '../Logo';
-
-interface Props {
-  logo?: string;
-}
-
-const HeaderLogo: React.FC<Props> = ({ logo }) => {
-  if (logo) {
-    const Wrapper = styled('div')({
-      fontSize: 0,
-    });
-    return (
-      <Wrapper>
-        <img alt="logo" height="40px" src={logo} />
-      </Wrapper>
-    );
-  }
-
-  return <Logo />;
-};
-
-export default HeaderLogo;
diff --git a/src/components/Header/HeaderRight.tsx b/src/components/Header/HeaderRight.tsx
index 64f3b230d..22525dec2 100644
--- a/src/components/Header/HeaderRight.tsx
+++ b/src/components/Header/HeaderRight.tsx
@@ -1,7 +1,8 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
+import React, { useState, useEffect, useContext, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
+import ThemeContext from '../../design-tokens/ThemeContext';
 
 import { RightSide } from './styles';
 import HeaderToolTip from './HeaderToolTip';
@@ -24,10 +25,16 @@ const HeaderRight: React.FC<Props> = ({
   onToggleMobileNav,
   onOpenRegistryInfoDialog,
 }) => {
+  const themeContext = useContext(ThemeContext);
   const [anchorEl, setAnchorEl] = useState();
   const [isMenuOpen, setIsMenuOpen] = useState();
+
   const { t } = useTranslation();
 
+  if (!themeContext) {
+    throw Error(t('app-context-not-correct-used'));
+  }
+
   useEffect(() => {
     setIsMenuOpen(Boolean(anchorEl));
   }, [anchorEl]);
@@ -54,6 +61,12 @@ const HeaderRight: React.FC<Props> = ({
     onToggleLogin();
   };
 
+  const handleToggleDarkLightMode = () => {
+    setTimeout(() => {
+      themeContext.setIsDarkMode(!themeContext.isDarkMode);
+    }, 300);
+  };
+
   return (
     <RightSide data-testid="header-right">
       {!withoutSearch && (
@@ -61,6 +74,12 @@ const HeaderRight: React.FC<Props> = ({
       )}
       <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
       <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
+      <HeaderToolTip
+        onClick={handleToggleDarkLightMode}
+        title={t('header.documentation')}
+        tooltipIconType={themeContext.isDarkMode ? 'dark-mode' : 'light-mode'}
+      />
+
       {username ? (
         <HeaderMenu
           anchorEl={anchorEl}
diff --git a/src/components/Header/HeaderToolTipIcon.tsx b/src/components/Header/HeaderToolTipIcon.tsx
index 76e2ac636..9b124c9ae 100644
--- a/src/components/Header/HeaderToolTipIcon.tsx
+++ b/src/components/Header/HeaderToolTipIcon.tsx
@@ -2,12 +2,14 @@ import React, { forwardRef } from 'react';
 import Info from '@material-ui/icons/Info';
 import Help from '@material-ui/icons/Help';
 import Search from '@material-ui/icons/Search';
+import NightsStay from '@material-ui/icons/NightsStay';
+import WbSunny from '@material-ui/icons/WbSunny';
 
 import IconButton from '../../muiComponents/IconButton';
 
 import { IconSearchButton, StyledLink } from './styles';
 
-export type TooltipIconType = 'search' | 'help' | 'info';
+export type TooltipIconType = 'search' | 'help' | 'info' | 'dark-mode' | 'light-mode';
 interface Props {
   tooltipIconType: TooltipIconType;
   onClick?: () => void;
@@ -50,6 +52,21 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
           <Search />
         </IconSearchButton>
       );
+    case 'dark-mode':
+      // todo(Priscila): Add Zoom transition effect
+      return (
+        <IconButton color="inherit" onClick={onClick} ref={ref}>
+          <NightsStay />
+        </IconButton>
+      );
+
+    case 'light-mode':
+      // todo(Priscila): Add Zoom transition effect
+      return (
+        <IconButton color="inherit" onClick={onClick} ref={ref}>
+          <WbSunny />
+        </IconButton>
+      );
     default:
       return null;
   }
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index 6616c9fd6..9e42f8518 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -302,6 +302,33 @@ exports[`<Header /> component with logged in state should load the component in
           class="MuiTouchRipple-root"
         />
       </button>
+      <button
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+            />
+            <path
+              d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
       <button
         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
         data-testid="header--menu-accountcircle"
@@ -335,7 +362,7 @@ exports[`<Header /> component with logged in state should load the component in
 
 exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
 .emotion-24 {
-  background-color: #4b5e40;
+  background-color: #253341;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -635,6 +662,33 @@ exports[`<Header /> component with logged in state should load the component in
           class="MuiTouchRipple-root"
         />
       </button>
+      <button
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
+            />
+            <path
+              d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
         data-testid="header--button-login"
diff --git a/src/components/Loading/__snapshots__/Loading.test.tsx.snap b/src/components/Loading/__snapshots__/Loading.test.tsx.snap
index 99f903b06..0c2be4dd3 100644
--- a/src/components/Loading/__snapshots__/Loading.test.tsx.snap
+++ b/src/components/Loading/__snapshots__/Loading.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<Loading /> component should render the component in default state 1`]
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #f7f8f6;
+  background: #000;
 }
 
 .emotion-0 {
@@ -45,7 +45,7 @@ exports[`<Loading /> component should render the component in default state 1`]
 }
 
 .emotion-4 {
-  color: #4b5e40;
+  color: #fff;
 }
 
 <div
diff --git a/src/components/Loading/styles.ts b/src/components/Loading/styles.ts
index 889bb733e..9028045f1 100644
--- a/src/components/Loading/styles.ts
+++ b/src/components/Loading/styles.ts
@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import { Theme } from '../../design-tokens/theme';
+
 export const Wrapper = styled('div')({
   transform: 'translate(-50%, -50%)',
   top: '50%',
@@ -7,9 +9,9 @@ export const Wrapper = styled('div')({
   position: 'absolute',
 });
 
-export const Badge = styled('div')({
+export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   margin: '0 0 30px 0',
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
-  background: '#f7f8f6',
-});
+  background: theme?.palette.type === 'dark' ? theme?.palette.black : '#f7f8f6',
+}));
diff --git a/src/components/LoginDialog/LoginDialogFormError.tsx b/src/components/LoginDialog/LoginDialogFormError.tsx
index 16f26e9c5..1efb01846 100644
--- a/src/components/LoginDialog/LoginDialogFormError.tsx
+++ b/src/components/LoginDialog/LoginDialogFormError.tsx
@@ -8,13 +8,14 @@ import { Theme } from '../../design-tokens/theme';
 import { LoginError } from '../../utils/login';
 
 const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme.palette.error.dark,
+  backgroundColor: theme?.palette.error.dark,
+  color: theme?.palette.white,
 }));
 
 const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   opacity: 0.9,
-  marginRight: theme.spacing(1),
+  marginRight: theme?.spacing(1),
 }));
 
 export interface FormValues {
diff --git a/src/components/LoginDialog/LoginDialogHeader.tsx b/src/components/LoginDialog/LoginDialogHeader.tsx
index 30272a05d..dcfd22eb3 100644
--- a/src/components/LoginDialog/LoginDialogHeader.tsx
+++ b/src/components/LoginDialog/LoginDialogHeader.tsx
@@ -13,6 +13,7 @@ import { Theme } from '../../design-tokens/theme';
 const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
   margin: theme.spacing(1),
   backgroundColor: theme.palette.primary.main,
+  color: theme.palette.white,
 }));
 
 const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 8716bf09e..7c4e96c01 100644
--- a/src/components/Logo/Logo.tsx
+++ b/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;
diff --git a/src/components/Logo/img/logo-black-and-white.svg b/src/components/Logo/img/logo-black-and-white.svg
new file mode 100644
index 000000000..4eca3c6ed
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
index 0020a0057..c80da3f16 100644
--- a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
+++ b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<NotFound /> component should load the component in default state 1`] =
 }
 
 .emotion-2 {
-  color: #4b5e40;
+  color: #253341;
   margin-bottom: 16px;
 }
 
diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts
index 33e60765d..39e7b125b 100644
--- a/src/components/Package/styles.ts
+++ b/src/components/Package/styles.ts
@@ -71,11 +71,8 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: theme && theme.palette.eclipse,
+  color: theme?.palette.type == 'dark' ? theme?.palette.white : theme?.palette.eclipse,
   cursor: 'pointer',
-  ':hover': {
-    color: theme && theme.palette.black,
-  },
   [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
@@ -86,10 +83,10 @@ export const GridRightAligned = styled(Grid)({
   textAlign: 'right',
 });
 
-export const PackageList = styled(List)<{ theme?: Theme }>(props => ({
+export const PackageList = styled(List)<{ theme?: Theme }>(({ theme }) => ({
   padding: '12px 0 12px 0',
   ':hover': {
-    backgroundColor: props.theme && props.theme.palette.greyLight3,
+    backgroundColor: theme?.palette?.type == 'dark' ? theme?.palette?.primary.main : theme?.palette?.greyLight3,
   },
   '> :last-child': {
     paddingTop: 0,
diff --git a/src/components/Readme/Readme.spec.tsx b/src/components/Readme/Readme.spec.tsx
index 22eb84646..e4e11cf2b 100644
--- a/src/components/Readme/Readme.spec.tsx
+++ b/src/components/Readme/Readme.spec.tsx
@@ -12,7 +12,9 @@ describe('<Readme /> component', () => {
 
   test('should dangerously set html', () => {
     const wrapper = mount(<Readme description="<h1>This is a test string</h1>" />);
-    expect(wrapper.html()).toEqual('<div class="markdown-body"><h1>This is a test string</h1></div>');
+    expect(wrapper.html()).toEqual(
+      '<div class="markdown-body css-beaqbv-Wrapper ecnabbe0"><h1>This is a test string</h1></div>'
+    );
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
diff --git a/src/components/Readme/Readme.tsx b/src/components/Readme/Readme.tsx
index 189497f94..5c1939c2c 100644
--- a/src/components/Readme/Readme.tsx
+++ b/src/components/Readme/Readme.tsx
@@ -1,10 +1,19 @@
 import React from 'react';
 import 'github-markdown-css';
+import styled from '@emotion/styled';
+
+import { Theme } from '../../design-tokens/theme';
 
 import { Props } from './types';
 
 const Readme: React.FC<Props> = ({ description }) => (
-  <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
+  <Wrapper className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
 );
 
 export default Readme;
+
+const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.white,
+  color: theme?.palette.black,
+  padding: theme?.spacing(2, 3),
+}));
diff --git a/src/components/Readme/__snapshots__/Readme.spec.tsx.snap b/src/components/Readme/__snapshots__/Readme.spec.tsx.snap
index 81d7529d1..5ff3b0691 100644
--- a/src/components/Readme/__snapshots__/Readme.spec.tsx.snap
+++ b/src/components/Readme/__snapshots__/Readme.spec.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body\\"><h1>This is a test string</h1></div>"`;
+exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body css-beaqbv-Wrapper ecnabbe0\\"><h1>This is a test string</h1></div>"`;
 
-exports[`<Readme /> component should load the component in default state 1`] = `"<div class=\\"markdown-body\\">test</div>"`;
+exports[`<Readme /> component should load the component in default state 1`] = `"<div class=\\"markdown-body css-beaqbv-Wrapper ecnabbe0\\">test</div>"`;
diff --git a/src/components/RegistryInfoContent/RegistryInfoContent.tsx b/src/components/RegistryInfoContent/RegistryInfoContent.tsx
index ce6e9bb15..a401c965e 100644
--- a/src/components/RegistryInfoContent/RegistryInfoContent.tsx
+++ b/src/components/RegistryInfoContent/RegistryInfoContent.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { css } from '@emotion/core';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
@@ -48,10 +47,10 @@ const RegistryInfoContent: React.FC<Props> = props => {
     return (
       <>
         <Tabs
+          color={'primary'}
           data-testid={'tabs-el'}
-          indicatorColor="primary"
+          indicatorColor={'primary'}
           onChange={handleChange}
-          textColor="primary"
           value={tabPosition}
           variant="fullWidth">
           <Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} />
@@ -69,14 +68,7 @@ const RegistryInfoContent: React.FC<Props> = props => {
   const TabContainer = ({ children }): JSX.Element => {
     return (
       <CommandContainer>
-        <Typography
-          // className={css`
-          //   padding: 0;
-          //   min-height: 170;
-          // `}
-          component="div">
-          {children}
-        </Typography>
+        <Typography component="div">{children}</Typography>
       </CommandContainer>
     );
   };
diff --git a/src/components/RegistryInfoDialog/styles.ts b/src/components/RegistryInfoDialog/styles.ts
index 236bb0462..fe6b344d1 100644
--- a/src/components/RegistryInfoDialog/styles.ts
+++ b/src/components/RegistryInfoDialog/styles.ts
@@ -10,6 +10,7 @@ export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
   fontSize: props.theme && props.theme.fontSize.lg,
 }));
 
-export const Content = styled(DialogContent)({
+export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
   padding: '0 24px',
-});
+  backgroundColor: theme?.palette.background.default,
+}));
diff --git a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
index b8b75f1a1..7d62526b0 100644
--- a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
+++ b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-1ju0ex2-Wrapper e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-evyw70-Circular e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width: 10px; height: 10px;\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;
+exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-1ju0ex2-Wrapper e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-vztaxs-Circular e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width: 10px; height: 10px;\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;
diff --git a/src/components/Spinner/styles.ts b/src/components/Spinner/styles.ts
index 19dc75934..4cbf1eaa3 100644
--- a/src/components/Spinner/styles.ts
+++ b/src/components/Spinner/styles.ts
@@ -19,6 +19,6 @@ export const Wrapper = styled('div')<WrapperProps>(props => ({
   }),
 }));
 
-export const Circular = styled(CircularProgress)<{ theme?: Theme }>(props => ({
-  color: props.theme && props.theme.palette.primary.main,
+export const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
 }));
diff --git a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
index b20c22d21..bc428c37f 100644
--- a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
+++ b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
@@ -2,4 +2,4 @@
 
 exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;
 
-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-16ae84p-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-c0jbu0-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-16ae84p-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
diff --git a/src/components/UpLinks/styles.ts b/src/components/UpLinks/styles.ts
index 7758d4bf3..2e342d3ed 100644
--- a/src/components/UpLinks/styles.ts
+++ b/src/components/UpLinks/styles.ts
@@ -8,15 +8,15 @@ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
   fontWeight: props.theme && props.theme.fontWeight.bold,
 }));
 
-export const Spacer = styled('div')({
+export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
-  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
+  borderBottom: `1px dotted ${theme?.palette.type == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'} `,
   whiteSpace: 'nowrap',
   height: '0.5em',
-});
+}));
 
-export const ListItemText = styled(MuiListItemText)({
+export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
-  color: 'black',
+  color: theme?.palette.type == 'light' ? theme?.palette.black : theme?.palette.white,
   opacity: 0.6,
-});
+}));
diff --git a/src/components/Versions/Versions.tsx b/src/components/Versions/Versions.tsx
index d53c2e16d..fad20b01f 100644
--- a/src/components/Versions/Versions.tsx
+++ b/src/components/Versions/Versions.tsx
@@ -7,6 +7,7 @@ import { DIST_TAGS } from '../../../lib/constants';
 import { StyledText } from './styles';
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
+
 const Versions: React.FC = () => {
   const detailContext = useContext(DetailContext);
   const { t } = useTranslation();
diff --git a/src/components/Versions/styles.ts b/src/components/Versions/styles.ts
index d27255818..d3db877d8 100644
--- a/src/components/Versions/styles.ts
+++ b/src/components/Versions/styles.ts
@@ -9,19 +9,19 @@ export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
   fontWeight: props.theme && props.theme.fontWeight.bold,
 }));
 
-export const Spacer = styled('div')({
+export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
-  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
+  borderBottom: `1px dotted ${theme?.palette.type == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'} `,
   whiteSpace: 'nowrap',
   height: '0.5em',
   margin: '0 16px',
-});
+}));
 
-export const ListItemText = styled(MuiListItemText)({
+export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
-  color: 'black',
   opacity: 0.6,
-});
+  color: theme?.palette.type == 'light' ? theme?.palette.black : theme?.palette.white,
+}));
 
 export const StyledLink = styled(Link)({
   textDecoration: 'none',
diff --git a/src/design-tokens/ThemeContext.ts b/src/design-tokens/ThemeContext.ts
new file mode 100644
index 000000000..c3d09bea1
--- /dev/null
+++ b/src/design-tokens/ThemeContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+interface Props {
+  isDarkMode: boolean;
+  setIsDarkMode: (isDarkMode: boolean) => void;
+}
+
+const ThemeContext = createContext<undefined | Props>(undefined);
+
+export default ThemeContext;
diff --git a/src/design-tokens/ThemeProvider.tsx b/src/design-tokens/ThemeProvider.tsx
index 82064d2aa..25639fbaa 100644
--- a/src/design-tokens/ThemeProvider.tsx
+++ b/src/design-tokens/ThemeProvider.tsx
@@ -1,13 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 
-import theme from './theme';
+import ThemeContext from './ThemeContext';
+import { getTheme, ThemeMode } from './theme';
 
-const ThemeProvider: React.FC = ({ children }) => (
-  <EmotionThemeProvider theme={theme}>
-    <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
-  </EmotionThemeProvider>
-);
+const ThemeProvider: React.FC = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState();
+
+  const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isDarkMode,
+        setIsDarkMode,
+      }}>
+      <EmotionThemeProvider theme={getTheme(themeMode)}>
+        <MuiThemeProvider theme={getTheme(themeMode)}>{children}</MuiThemeProvider>
+      </EmotionThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
 
 export default ThemeProvider;
diff --git a/src/design-tokens/theme.ts b/src/design-tokens/theme.ts
index 5f1d6cbfb..1cf0522b0 100644
--- a/src/design-tokens/theme.ts
+++ b/src/design-tokens/theme.ts
@@ -1,7 +1,5 @@
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 
-// Main colors
-// -------------------------
 const colors = {
   black: '#000',
   white: '#fff',
@@ -25,9 +23,22 @@ const colors = {
   nobel02: '#9f9f9f',
   primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
   secondary: '#20232a',
+  background: '#fff',
 };
 
-export type Colors = keyof typeof colors;
+const themeModes = {
+  light: {
+    ...colors,
+  },
+  dark: {
+    ...colors,
+    primary: '#253341',
+    secondary: '#20232a',
+    background: '#1A202C',
+  },
+};
+
+export type ThemeMode = keyof typeof themeModes;
 
 const fontSize = {
   xxl: 26,
@@ -67,20 +78,27 @@ const customizedTheme = {
 
 type CustomizedTheme = typeof customizedTheme;
 
-export const theme = createMuiTheme({
-  typography: {
-    fontFamily: 'inherit',
-  },
-  palette: {
-    ...colors,
-    primary: { main: colors.primary },
-    secondary: { main: colors.secondary },
-    error: { main: colors.red },
-  },
-  ...customizedTheme,
-});
+export const getTheme = (themeMode: ThemeMode) => {
+  const palette = themeModes[themeMode];
+  return createMuiTheme({
+    typography: {
+      fontFamily: 'inherit',
+    },
+    palette: {
+      type: themeMode,
+      ...palette,
+      primary: { main: palette.primary },
+      secondary: { main: palette.secondary },
+      error: { main: palette.red },
+      background: {
+        default: palette.background,
+      },
+    },
+    ...customizedTheme,
+  });
+};
 
-export type Theme = typeof theme;
+export type Theme = ReturnType<typeof getTheme>;
 
 declare module '@material-ui/core/styles/createMuiTheme' {
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
@@ -111,6 +129,7 @@ declare module '@material-ui/core/styles/createPalette' {
     love: string;
     nobel01: string;
     nobel02: string;
+    background: string;
   }
 
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
@@ -118,5 +137,3 @@ declare module '@material-ui/core/styles/createPalette' {
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
   interface PaletteOptions extends Partial<CustomPalette> {}
 }
-
-export default { ...theme };
diff --git a/src/design-tokens/useTheme.ts b/src/design-tokens/useTheme.ts
new file mode 100644
index 000000000..fd9ce7896
--- /dev/null
+++ b/src/design-tokens/useTheme.ts
@@ -0,0 +1,7 @@
+import { useTheme as muiUseTheme } from '@material-ui/styles';
+
+import { Theme } from './theme';
+
+const useTheme = () => muiUseTheme<Theme>();
+
+export default useTheme;
diff --git a/tools/webpack.dev.config.babel.js b/tools/webpack.dev.config.babel.js
index 726bb84dc..c0846de64 100644
--- a/tools/webpack.dev.config.babel.js
+++ b/tools/webpack.dev.config.babel.js
@@ -41,7 +41,6 @@ export default {
       }),
       title: 'Verdaccio Dev UI',
       scope: '',
-      logo: 'https://verdaccio.org/img/logo/symbol/svg/verdaccio-tiny.svg',
       filename: 'index.html',
       verdaccioURL: '//localhost:4872',
       template: `${env.SRC_ROOT}/template/index.html`,

From 4daa9497851328b877da16777bf1ac6f88824de3 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Sun, 22 Mar 2020 17:49:33 +0100
Subject: [PATCH 4/8] added one translation

---
 i18n/translations/de-DE.json          | 1 +
 i18n/translations/en-US.json          | 1 +
 i18n/translations/es-ES.json          | 1 +
 i18n/translations/pt-BR.json          | 1 +
 src/components/Header/HeaderRight.tsx | 2 +-
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/i18n/translations/de-DE.json b/i18n/translations/de-DE.json
index 040ac6780..8598dbea3 100644
--- a/i18n/translations/de-DE.json
+++ b/i18n/translations/de-DE.json
@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Entschuldigung, wir konnten es nicht finden..."
         },
         "app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
+        "theme-context-not-correct-used": "Der Theme-Kontext wurde nicht korrekt verwendet",
         "package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
     }
 }
diff --git a/i18n/translations/en-US.json b/i18n/translations/en-US.json
index d3f8df759..b0f3ca82d 100644
--- a/i18n/translations/en-US.json
+++ b/i18n/translations/en-US.json
@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
         },
         "app-context-not-correct-used": "The app context was not correct used",
+        "theme-context-not-correct-used": "The theme context was not correct used",
         "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
     }
 }
\ No newline at end of file
diff --git a/i18n/translations/es-ES.json b/i18n/translations/es-ES.json
index 825878941..204664dac 100644
--- a/i18n/translations/es-ES.json
+++ b/i18n/translations/es-ES.json
@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Lo siento, no hemos podido encontrarlo..."
         },
         "app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
+        "theme-context-not-correct-used": "El contexto del tema no fue correctamente usado",
         "package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
     }
 }
diff --git a/i18n/translations/pt-BR.json b/i18n/translations/pt-BR.json
index 2b1c3a036..f3a8cf9a7 100644
--- a/i18n/translations/pt-BR.json
+++ b/i18n/translations/pt-BR.json
@@ -133,6 +133,7 @@
             "sorry-we-could-not-find-it": "Desculpe, não conseguimos encontrar..."
         },
         "app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
+        "theme-context-not-correct-used": "O contexto do tema não foi usado corretamente",
         "package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
     }
 }
\ No newline at end of file
diff --git a/src/components/Header/HeaderRight.tsx b/src/components/Header/HeaderRight.tsx
index 22525dec2..02f98a831 100644
--- a/src/components/Header/HeaderRight.tsx
+++ b/src/components/Header/HeaderRight.tsx
@@ -32,7 +32,7 @@ const HeaderRight: React.FC<Props> = ({
   const { t } = useTranslation();
 
   if (!themeContext) {
-    throw Error(t('app-context-not-correct-used'));
+    throw Error(t('theme-context-not-correct-used'));
   }
 
   useEffect(() => {

From 18b8dd80bc158e63eacb0ebe67266c6b8384cca4 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Sun, 22 Mar 2020 17:53:32 +0100
Subject: [PATCH 5/8] updated snaps

---
 src/App/__snapshots__/App.test.tsx.snap       | 30 ++++++++-----------
 .../__snapshots__/ActionBar.test.tsx.snap     |  2 +-
 .../Footer/__snapshots__/Footer.test.tsx.snap |  4 +--
 .../Header/__snapshots__/Header.test.tsx.snap | 14 +++------
 .../__snapshots__/Loading.test.tsx.snap       |  4 +--
 .../__snapshots__/Notfound.test.tsx.snap      |  2 +-
 .../__snapshots__/Spinner.test.tsx.snap       |  2 +-
 .../__snapshots__/UpLinks.test.tsx.snap       |  2 +-
 8 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/App/__snapshots__/App.test.tsx.snap b/src/App/__snapshots__/App.test.tsx.snap
index daad90761..b76b1c4fb 100644
--- a/src/App/__snapshots__/App.test.tsx.snap
+++ b/src/App/__snapshots__/App.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`<App /> should display the Header component  1`] = `
 .emotion-78 {
-  background-color: #1A202C;
+  background-color: #fff;
 }
 
 .emotion-24 {
-  background-color: #253341;
+  background-color: #4b5e40;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -153,9 +153,9 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 .emotion-76 {
-  background: #253341;
+  background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
-  color: #fff;
+  color: #999999;
   font-size: 14px;
   padding: 20px;
 }
@@ -322,7 +322,7 @@ exports[`<App /> should display the Header component  1`] = `
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #000;
+  background: #f7f8f6;
 }
 
 .emotion-26 {
@@ -353,7 +353,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 .emotion-30 {
-  color: #fff;
+  color: #4b5e40;
 }
 
 <div
@@ -538,10 +538,7 @@ exports[`<App /> should display the Header component  1`] = `
               viewBox="0 0 24 24"
             >
               <path
-                d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
-              />
-              <path
-                d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+                d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
               />
             </svg>
           </span>
@@ -729,11 +726,11 @@ exports[`<App /> should display the Header component  1`] = `
 
 exports[`<App /> should display the Loading component at the beginning  1`] = `
 .emotion-68 {
-  background-color: #1A202C;
+  background-color: #fff;
 }
 
 .emotion-24 {
-  background-color: #253341;
+  background-color: #4b5e40;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -880,9 +877,9 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 .emotion-66 {
-  background: #253341;
+  background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
-  color: #fff;
+  color: #999999;
   font-size: 14px;
   padding: 20px;
 }
@@ -1219,10 +1216,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
               viewBox="0 0 24 24"
             >
               <path
-                d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
-              />
-              <path
-                d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+                d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
               />
             </svg>
           </span>
diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
index a7255e86f..d840e1083 100644
--- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
+++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ActionBar /> component should render the component in default state 1`] = `
 .emotion-0 {
-  background-color: #253341;
+  background-color: #4b5e40;
   color: #fff;
   margin-right: 10px;
 }
diff --git a/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
index ac49cb92a..101bbcd82 100644
--- a/src/components/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -2,9 +2,9 @@
 
 exports[`<Footer /> component should load the initial state of Footer component 1`] = `
 .emotion-38 {
-  background: #253341;
+  background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
-  color: #fff;
+  color: #999999;
   font-size: 14px;
   padding: 20px;
 }
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index 9e42f8518..6ee010459 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
 .emotion-24 {
-  background-color: #253341;
+  background-color: #4b5e40;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -318,10 +318,7 @@ exports[`<Header /> component with logged in state should load the component in
             viewBox="0 0 24 24"
           >
             <path
-              d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
-            />
-            <path
-              d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+              d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
             />
           </svg>
         </span>
@@ -362,7 +359,7 @@ exports[`<Header /> component with logged in state should load the component in
 
 exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
 .emotion-24 {
-  background-color: #253341;
+  background-color: #4b5e40;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -678,10 +675,7 @@ exports[`<Header /> component with logged in state should load the component in
             viewBox="0 0 24 24"
           >
             <path
-              d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
-            />
-            <path
-              d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
+              d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
             />
           </svg>
         </span>
diff --git a/src/components/Loading/__snapshots__/Loading.test.tsx.snap b/src/components/Loading/__snapshots__/Loading.test.tsx.snap
index 0c2be4dd3..99f903b06 100644
--- a/src/components/Loading/__snapshots__/Loading.test.tsx.snap
+++ b/src/components/Loading/__snapshots__/Loading.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<Loading /> component should render the component in default state 1`]
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #000;
+  background: #f7f8f6;
 }
 
 .emotion-0 {
@@ -45,7 +45,7 @@ exports[`<Loading /> component should render the component in default state 1`]
 }
 
 .emotion-4 {
-  color: #fff;
+  color: #4b5e40;
 }
 
 <div
diff --git a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
index c80da3f16..0020a0057 100644
--- a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
+++ b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<NotFound /> component should load the component in default state 1`] =
 }
 
 .emotion-2 {
-  color: #253341;
+  color: #4b5e40;
   margin-bottom: 16px;
 }
 
diff --git a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
index 7d62526b0..b8b75f1a1 100644
--- a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
+++ b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-1ju0ex2-Wrapper e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-vztaxs-Circular e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width: 10px; height: 10px;\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;
+exports[`<Spinner /> component should render the component in custom state 1`] = `"<div class=\\"css-1ju0ex2-Wrapper e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root css-evyw70-Circular e1ag4h8b1 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate\\" style=\\"width: 10px; height: 10px;\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div>"`;
diff --git a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
index bc428c37f..373c2a3ff 100644
--- a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
+++ b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
@@ -2,4 +2,4 @@
 
 exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;
 
-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-16ae84p-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-c0jbu0-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-16ae84p-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1ork7s0-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-4lqckn-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1ork7s0-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;

From 467072e52ea5b4cfd3339f4c3b684631b1104ba8 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Wed, 25 Mar 2020 20:58:43 +0100
Subject: [PATCH 6/8] added env var dark_mode

---
 src/design-tokens/ThemeProvider.tsx | 3 ++-
 types/index.ts                      | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/design-tokens/ThemeProvider.tsx b/src/design-tokens/ThemeProvider.tsx
index 25639fbaa..2b2d12a64 100644
--- a/src/design-tokens/ThemeProvider.tsx
+++ b/src/design-tokens/ThemeProvider.tsx
@@ -6,7 +6,8 @@ import ThemeContext from './ThemeContext';
 import { getTheme, ThemeMode } from './theme';
 
 const ThemeProvider: React.FC = ({ children }) => {
-  const [isDarkMode, setIsDarkMode] = useState();
+  const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.dark_mode;
+  const [isDarkMode, setIsDarkMode] = useState(!!isDarkModeDefault);
 
   const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
 
diff --git a/types/index.ts b/types/index.ts
index 52b0a239c..0275c5e88 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -3,6 +3,7 @@ export interface VerdaccioOptions {
   url_prefix: string;
   base: string;
   language?: string;
+  darkMode?: boolean;
 }
 
 declare global {

From abb67bdf2f8ce7a88fcecda97999597ab07298e5 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Thu, 26 Mar 2020 11:03:00 +0100
Subject: [PATCH 7/8] fixed var

---
 types/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/index.ts b/types/index.ts
index 0275c5e88..48a6415cd 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -3,7 +3,7 @@ export interface VerdaccioOptions {
   url_prefix: string;
   base: string;
   language?: string;
-  darkMode?: boolean;
+  dark_mode?: boolean;
 }
 
 declare global {

From cab2984988504f6e60db3e7e555bd0d30663bdcd Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Sun, 29 Mar 2020 23:26:30 +0200
Subject: [PATCH 8/8] added useLocalStorage

---
 src/components/Package/styles.ts         | 17 ++++++-----
 src/components/Repository/Repository.tsx | 10 +++++--
 src/design-tokens/ThemeProvider.tsx      | 13 ++++----
 src/design-tokens/theme.ts               |  2 ++
 src/design-tokens/useLocalStorage.ts     | 38 ++++++++++++++++++++++++
 types/index.ts                           |  2 +-
 6 files changed, 62 insertions(+), 20 deletions(-)
 create mode 100644 src/design-tokens/useLocalStorage.ts

diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts
index 39e7b125b..aec0a713b 100644
--- a/src/components/Package/styles.ts
+++ b/src/components/Package/styles.ts
@@ -15,7 +15,7 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   margin: '0 0 0 16px',
-  color: theme && theme.palette.greyLight2,
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue,
   fontSize: 12,
   [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
@@ -29,20 +29,20 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   },
 }));
 
-export const Icon = styled(Ico)<{ theme?: Theme }>(props => ({
+export const Icon = styled(Ico)<{ theme?: Theme }>(({ theme }) => ({
   margin: '2px 10px 0 0',
-  fill: props.theme && props.theme.palette.greyLight2,
+  fill: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue,
 }));
 
-export const Published = styled('span')<{ theme?: Theme }>(props => ({
-  color: props.theme && props.theme.palette.greyLight2,
+export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue,
   margin: '0 5px 0 0',
 }));
 
-export const Text = styled(Label)<{ theme?: Theme }>(props => ({
+export const Text = styled(Label)<{ theme?: Theme }>(({ theme }) => ({
   fontSize: '12px',
-  fontWeight: props.theme && props.theme.fontWeight.semiBold,
-  color: props.theme && props.theme.palette.greyLight2,
+  fontWeight: theme?.fontWeight.semiBold,
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.dodgerBlue,
 }));
 
 export const Details = styled('span')({
@@ -91,6 +91,7 @@ export const PackageList = styled(List)<{ theme?: Theme }>(({ theme }) => ({
   '> :last-child': {
     paddingTop: 0,
   },
+  borderRadius: 4,
 }));
 
 export const IconButton = styled(MuiIconButton)({
diff --git a/src/components/Repository/Repository.tsx b/src/components/Repository/Repository.tsx
index 30e810898..e60d0daaf 100644
--- a/src/components/Repository/Repository.tsx
+++ b/src/components/Repository/Repository.tsx
@@ -6,6 +6,7 @@ import Avatar from '../../muiComponents/Avatar';
 import Text from '../../muiComponents/Text';
 import ListItem from '../../muiComponents/ListItem';
 import ListItemText from '../../muiComponents/ListItemText';
+import Link from '../Link';
 import { isURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
 import List from '../../muiComponents/List';
@@ -19,8 +20,11 @@ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
   textTransform: 'capitalize',
 }));
 
-const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
-  color: props.theme && props.theme.palette.primary.main,
+const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  ':hover': {
+    color: theme?.palette.dodgerBlue,
+  },
 }));
 
 const RepositoryListItem = styled(ListItem)({
@@ -72,7 +76,7 @@ const Repository: React.FC = () => {
         <RepositoryListItemText
           primary={
             <CopyToClipBoard text={repositoryURL}>
-              <GithubLink href={repositoryURL} target="_blank">
+              <GithubLink external={true} to={repositoryURL}>
                 {repositoryURL}
               </GithubLink>
             </CopyToClipBoard>
diff --git a/src/design-tokens/ThemeProvider.tsx b/src/design-tokens/ThemeProvider.tsx
index 2b2d12a64..55bec953c 100644
--- a/src/design-tokens/ThemeProvider.tsx
+++ b/src/design-tokens/ThemeProvider.tsx
@@ -1,22 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 
 import ThemeContext from './ThemeContext';
 import { getTheme, ThemeMode } from './theme';
+import useLocalStorage from './useLocalStorage';
 
 const ThemeProvider: React.FC = ({ children }) => {
-  const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.dark_mode;
-  const [isDarkMode, setIsDarkMode] = useState(!!isDarkModeDefault);
+  const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode;
+  const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault);
 
   const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
 
   return (
-    <ThemeContext.Provider
-      value={{
-        isDarkMode,
-        setIsDarkMode,
-      }}>
+    <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode }}>
       <EmotionThemeProvider theme={getTheme(themeMode)}>
         <MuiThemeProvider theme={getTheme(themeMode)}>{children}</MuiThemeProvider>
       </EmotionThemeProvider>
diff --git a/src/design-tokens/theme.ts b/src/design-tokens/theme.ts
index 1cf0522b0..b9d73e5e8 100644
--- a/src/design-tokens/theme.ts
+++ b/src/design-tokens/theme.ts
@@ -24,6 +24,7 @@ const colors = {
   primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
   secondary: '#20232a',
   background: '#fff',
+  dodgerBlue: '#1ba1f2',
 };
 
 const themeModes = {
@@ -130,6 +131,7 @@ declare module '@material-ui/core/styles/createPalette' {
     nobel01: string;
     nobel02: string;
     background: string;
+    dodgerBlue: string;
   }
 
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
diff --git a/src/design-tokens/useLocalStorage.ts b/src/design-tokens/useLocalStorage.ts
new file mode 100644
index 000000000..a094a2391
--- /dev/null
+++ b/src/design-tokens/useLocalStorage.ts
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+// based on https://usehooks.com/useLocalStorage/
+const useLocalStorage = <V>(key: string, initialValue: V) => {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      console.error('An error occurred getting a sessionStorage key', error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: V) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error('An error occurred writing to sessionStorage', error);
+    }
+  };
+
+  return [storedValue, setValue];
+};
+
+export default useLocalStorage;
diff --git a/types/index.ts b/types/index.ts
index 48a6415cd..0275c5e88 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -3,7 +3,7 @@ export interface VerdaccioOptions {
   url_prefix: string;
   base: string;
   language?: string;
-  dark_mode?: boolean;
+  darkMode?: boolean;
 }
 
 declare global {