chore(release): 1.5.0

* ref(styles): updated dark colors

* updated snaps

.secrets-baseline

@@ -37,4 +37,4 @@
   ],
   "results": {},
   "version": "0.12.4"
-}
+}

CHANGELOG.md

@@ -2,6 +2,61 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.5.0](https://github.com/verdaccio/ui/compare/v1.4.0...v1.5.0) (2020-04-08)
+
+
+### Features
+
+* **flag:** Added Germany flag ([#454](https://github.com/verdaccio/ui/issues/454)) ([07620e5](https://github.com/verdaccio/ui/commit/07620e5d4b1ed54bae2266d936af5306bfbe2d8b))
+
+
+### Bug Fixes
+
+* **styles:** Updated dark colors ([#455](https://github.com/verdaccio/ui/issues/455)) ([d29aa05](https://github.com/verdaccio/ui/commit/d29aa05cc6ef31cb871e79de10c1b1ddd74f023e))
+
+## [1.4.0](https://github.com/verdaccio/ui/compare/v1.3.0...v1.4.0) (2020-04-02)
+
+
+### Features
+
+* added zh-CN translations to the UI ([#448](https://github.com/verdaccio/ui/issues/448)) ([03114a8](https://github.com/verdaccio/ui/commit/03114a842b88ae0f482f389e7ae91af62e00bca4))
+
+## [1.3.0](https://github.com/verdaccio/ui/compare/v1.0.4...v1.3.0) (2020-04-01)
+
+
+### Features
+
+* **style:** added dark mode ([#446](https://github.com/verdaccio/ui/issues/446)) ([cdad5cf](https://github.com/verdaccio/ui/commit/cdad5cf70d69b7bb045fce461a32108def81721d))
+
+
+### Bug Fixes
+
+* **chore:** droped release ([#449](https://github.com/verdaccio/ui/issues/449)) ([f321f7b](https://github.com/verdaccio/ui/commit/f321f7b6fe1ac44897753f0bfdbbaa6ca7eca515))
+
+## [1.2.0](https://github.com/verdaccio/ui/compare/v1.0.4...v1.2.0) (2020-04-01)
+
+
+### Features
+
+* **style:** added dark mode ([#446](https://github.com/verdaccio/ui/issues/446)) ([cdad5cf](https://github.com/verdaccio/ui/commit/cdad5cf70d69b7bb045fce461a32108def81721d))
+
+
+### Bug Fixes
+
+* **chore:** droped release ([#449](https://github.com/verdaccio/ui/issues/449)) ([f321f7b](https://github.com/verdaccio/ui/commit/f321f7b6fe1ac44897753f0bfdbbaa6ca7eca515))
+
+## [1.1.0](https://github.com/verdaccio/ui/compare/v1.0.4...v1.1.0) (2020-04-01)
+
+
+### Features
+
+* **style:** added dark mode ([#446](https://github.com/verdaccio/ui/issues/446)) ([cdad5cf](https://github.com/verdaccio/ui/commit/cdad5cf70d69b7bb045fce461a32108def81721d))
+
+
+### Bug Fixes
+
+* **chore:** droped release ([#449](https://github.com/verdaccio/ui/issues/449)) ([f321f7b](https://github.com/verdaccio/ui/commit/f321f7b6fe1ac44897753f0bfdbbaa6ca7eca515))
+
 ### [1.0.4](https://github.com/verdaccio/ui/compare/v1.0.0...v1.0.4) (2020-03-17)
 
 ## [1.0.0](https://github.com/verdaccio/ui/compare/v0.3.13...v1.0.0) (2020-03-13)
@@ -369,4 +424,4 @@ All notable changes to this project will be documented in this file. See [standa
 
 
 <a name="0.0.3"></a>
-## 0.0.3 (2019-04-04)
+## 0.0.3 (2019-04-04)

i18n/config.ts

@@ -5,6 +5,7 @@ import translationEN from './translations/en-US.json';
 import translationPT from './translations/pt-BR.json';
 import translationES from './translations/es-ES.json';
 import translationDE from './translations/de-DE.json';
+import translationCN from './translations/zh-CN.json';
 
 i18n
   // pass the i18n instance to react-i18next.
@@ -15,7 +16,7 @@ i18n
     // in case window.VEDACCIO_LANGUAGE is undefined,it will fall back to 'en-US'
     lng: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.language,
     fallbackLng: 'en-US',
-    whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE'],
+    whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE', 'zh-CN'],
     load: 'currentOnly',
     resources: {
       'en-US': {
@@ -30,6 +31,9 @@ i18n
       'de-DE': {
         translation: translationDE,
       },
+      'zh-CN': {
+        translation: translationCN,
+      },
     },
     debug: false,
     interpolation: {

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"
     }
 }

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"
     }
 }

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"
     }
 }

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"
     }
 }

i18n/translations/zh-CN.json

@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "复制到粘贴板",
+    "author-anonymous": "匿名",
+    "action-bar-action": {
+        "visit-home-page": "访问主页",
+        "open-an-issue": "提交问题",
+        "download-tarball": "下载 tarball"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "注册信息"
+        }
+    },
+    "header": {
+        "documentation": "文档",
+        "registry-info": "登记信息",
+        "greetings": "您好 "
+    },
+    "search": {
+        "packages": "查找Packages"
+    },
+    "auto-complete": {
+        "loading": "加载中...",
+        "no-results-found": "没有找到结果"
+    },
+    "tab": {
+        "uplinks": "Uplinks",
+        "versions": "版本",
+        "dependencies": "依赖",
+        "readme": "Readme"
+    },
+    "uplinks": {
+        "title": "Uplinks",
+        "no-items": "{{name}} has no uplinks."
+    },
+    "versions": {
+        "current-tags": "当前标签",
+        "version-history": "历史版本",
+        "not-available": "不可用"
+    },
+    "package": {
+        "published-on": "发表于 {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "访问主页",
+        "homepage": "主页",
+        "open-an-issue": "提交问题",
+        "bugs": "Bugs",
+        "download": "下载 {{what}}",
+        "the-tar-file": "tar 文件",
+        "tarball": "Tarball"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} 没有依赖包.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "用户名",
+        "password": "密码"
+    },
+    "form-placeholder": {
+        "username": "您的用户名",
+        "password": "您的密码"
+    },
+    "form-validation": {
+        "required-field": "必填项",
+        "required-min-length": "长度不能小于{{length}}",
+        "unable-to-sign-in": "登录失败",
+        "username-or-password-cant-be-empty": "用户名或密码不能为空!"
+    },
+    "help": {
+        "title": "还没有发布任何NPM包.",
+        "sub-title": "发布第一个NPM包:",
+        "first-step": "1. 登录",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. 发布",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. 刷新当前页面."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "最新版本 v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "安装",
+            "install-using-yarn": "使用yarn安装",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "使用npm安装",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "使用pnpm安装",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "库"
+        },
+        "author": {
+            "title": "作者"
+        },
+        "distribution": {
+            "title": "最后发布",
+            "license": "License",
+            "size": "大小",
+            "file-count": "文件数量"
+        },
+        "maintainers": {
+            "title": "维护人"
+        },
+        "contributors": {
+            "title": "贡献者"
+        },
+        "engines": {
+            "npm-version": "NPM Version",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Powered by",
+        "made-with-love-on": "Made with <0>♥</0> on"
+    },
+    "button": {
+        "close": "关闭",
+        "cancel": "取消",
+        "login": "登录",
+        "logout": "注销",
+        "go-to-the-home-page": "跳转到主页",
+        "learn-more": "了解更多",
+        "fund-this-package": "<0>Fund</0> this package"
+    },
+    "error": {
+        "unspecific": "发生错误.",
+        "404": {
+            "page-not-found": "404 - 页面不存在",
+            "sorry-we-could-not-find-it": "对不起, 我们没找到..."
+        },
+        "app-context-not-correct-used": "The app context was not correct used",
+        "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
+    }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-theme",
-  "version": "1.0.4",
+  "version": "1.5.0",
   "description": "Verdaccio User Interface",
   "author": {
     "name": "Verdaccio Core Team",
@@ -26,7 +26,7 @@
     "@testing-library/react": "9.4.0",
     "@types/autosuggest-highlight": "3.1.0",
     "@types/enzyme": "3.10.4",
-    "@types/jest": "24.0.24",
+    "@types/jest": "25.1.4",
     "@types/js-base64": "2.3.1",
     "@types/lodash": "4.14.149",
     "@types/node": "13.1.6",
@@ -73,7 +73,7 @@
     "husky": "3.1.0",
     "i18next": "19.1.0",
     "identity-obj-proxy": "3.0.0",
-    "in-publish": "2.0.0",
+    "in-publish": "2.0.1",
     "jest": "24.9.0",
     "jest-emotion": "10.0.27",
     "jest-environment-jsdom": "24.9.0",

scripts/trigger-release.js

@@ -17,7 +17,7 @@ getStdin()
       repo: repoName,
       tag_name: tag,
       body: changelog,
-      draft: true,
+      draft: false,
     })
   )
   .catch(err => {

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 }) => ({

src/App/__snapshots__/App.test.tsx.snap

@@ -1,12 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> should display the Header component  1`] = `
-.emotion-78 {
+.emotion-81 {
   background-color: #fff;
 }
 
 .emotion-24 {
   background-color: #4b5e40;
+  color: #fff;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -152,7 +153,7 @@ exports[`<App /> should display the Header component  1`] = `
   }
 }
 
-.emotion-76 {
+.emotion-79 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
   color: #999999;
@@ -160,7 +161,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 20px;
 }
 
-.emotion-74 {
+.emotion-77 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -177,7 +178,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-74 {
+  .emotion-77 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
@@ -189,12 +190,12 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:1024px) {
-  .emotion-74 {
+  .emotion-77 {
     max-width: 1240px;
   }
 }
 
-.emotion-65 {
+.emotion-68 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -203,7 +204,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-65 {
+  .emotion-68 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -216,12 +217,12 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 5px;
 }
 
-.emotion-63 {
+.emotion-66 {
   position: relative;
   height: 18px;
 }
 
-.emotion-63:hover .emotion-62 {
+.emotion-66:hover .emotion-65 {
   visibility: visible;
 }
 
@@ -234,7 +235,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 10px;
 }
 
-.emotion-61 {
+.emotion-64 {
   position: absolute;
   background: #d3dddd;
   padding: 1px 4px;
@@ -252,7 +253,7 @@ exports[`<App /> should display the Header component  1`] = `
   top: -2px;
 }
 
-.emotion-61:before {
+.emotion-64:before {
   content: '';
   position: absolute;
   top: 29%;
@@ -274,7 +275,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 5px;
 }
 
-.emotion-72 {
+.emotion-75 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -287,7 +288,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-72 {
+  .emotion-75 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -295,7 +296,7 @@ exports[`<App /> should display the Header component  1`] = `
   }
 }
 
-.emotion-70 {
+.emotion-73 {
   box-sizing: initial;
   display: inline-block;
   cursor: pointer;
@@ -304,7 +305,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 5px;
 }
 
-.emotion-67 {
+.emotion-70 {
   width: 100%;
   height: auto;
 }
@@ -357,7 +358,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 <div
-  class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
+  class="MuiBox-root MuiBox-root-219 emotion-81 emotion-82"
 >
   <header
     class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
@@ -522,6 +523,30 @@ 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="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>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"
@@ -585,13 +610,13 @@ exports[`<App /> should display the Header component  1`] = `
     </div>
   </div>
   <div
-    class="emotion-76 emotion-77"
+    class="emotion-79 emotion-80"
   >
     <div
-      class="emotion-74 emotion-75"
+      class="emotion-77 emotion-78"
     >
       <div
-        class="emotion-65 emotion-66"
+        class="emotion-68 emotion-69"
       >
         Made with 
         <span
@@ -601,7 +626,7 @@ exports[`<App /> should display the Header component  1`] = `
         </span>
          on
         <span
-          class="emotion-63 emotion-64"
+          class="emotion-66 emotion-67"
         >
           <svg
             class="emotion-40 emotion-41 emotion-42"
@@ -614,7 +639,7 @@ exports[`<App /> should display the Header component  1`] = `
             />
           </svg>
           <span
-            class="emotion-61 emotion-62"
+            class="emotion-64 emotion-65"
           >
             <svg
               class="emotion-43 emotion-44 emotion-42"
@@ -676,20 +701,30 @@ exports[`<App /> should display the Header component  1`] = `
                 xlink:href="[object Object]#austria"
               />
             </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Germany
+              </title>
+              <use
+                xlink:href="[object Object]#germany"
+              />
+            </svg>
           </span>
         </span>
       </div>
       <div
-        class="emotion-72 emotion-73"
+        class="emotion-75 emotion-76"
       >
         Powered by
         <span
-          class="emotion-43 emotion-70 emotion-71"
+          class="emotion-43 emotion-73 emotion-74"
           title="Verdaccio"
         >
           <img
             alt="Verdaccio"
-            class="emotion-67 emotion-68"
+            class="emotion-70 emotion-71"
             src="[object Object]"
           />
         </span>
@@ -701,12 +736,13 @@ exports[`<App /> should display the Header component  1`] = `
 `;
 
 exports[`<App /> should display the Loading component at the beginning  1`] = `
-.emotion-68 {
+.emotion-71 {
   background-color: #fff;
 }
 
 .emotion-24 {
   background-color: #4b5e40;
+  color: #fff;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -852,7 +888,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   }
 }
 
-.emotion-66 {
+.emotion-69 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
   color: #999999;
@@ -860,7 +896,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 20px;
 }
 
-.emotion-64 {
+.emotion-67 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -877,7 +913,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-64 {
+  .emotion-67 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
@@ -889,12 +925,12 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:1024px) {
-  .emotion-64 {
+  .emotion-67 {
     max-width: 1240px;
   }
 }
 
-.emotion-55 {
+.emotion-58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -903,7 +939,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-55 {
+  .emotion-58 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -916,12 +952,12 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-53 {
+.emotion-56 {
   position: relative;
   height: 18px;
 }
 
-.emotion-53:hover .emotion-52 {
+.emotion-56:hover .emotion-55 {
   visibility: visible;
 }
 
@@ -934,7 +970,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 10px;
 }
 
-.emotion-51 {
+.emotion-54 {
   position: absolute;
   background: #d3dddd;
   padding: 1px 4px;
@@ -952,7 +988,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   top: -2px;
 }
 
-.emotion-51:before {
+.emotion-54:before {
   content: '';
   position: absolute;
   top: 29%;
@@ -974,7 +1010,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-62 {
+.emotion-65 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -987,7 +1023,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-62 {
+  .emotion-65 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -995,7 +1031,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   }
 }
 
-.emotion-60 {
+.emotion-63 {
   box-sizing: initial;
   display: inline-block;
   cursor: pointer;
@@ -1004,13 +1040,13 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-57 {
+.emotion-60 {
   width: 100%;
   height: auto;
 }
 
 <div
-  class="MuiBox-root MuiBox-root-2 emotion-68 emotion-69"
+  class="MuiBox-root MuiBox-root-2 emotion-71 emotion-72"
   style="display: none;"
 >
   <header
@@ -1176,6 +1212,30 @@ 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="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>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
           data-testid="header--button-login"
@@ -1198,13 +1258,13 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
     class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
   />
   <div
-    class="emotion-66 emotion-67"
+    class="emotion-69 emotion-70"
   >
     <div
-      class="emotion-64 emotion-65"
+      class="emotion-67 emotion-68"
     >
       <div
-        class="emotion-55 emotion-56"
+        class="emotion-58 emotion-59"
       >
         Made with 
         <span
@@ -1214,7 +1274,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
         </span>
          on
         <span
-          class="emotion-53 emotion-54"
+          class="emotion-56 emotion-57"
         >
           <svg
             class="emotion-30 emotion-31 emotion-32"
@@ -1227,7 +1287,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
             />
           </svg>
           <span
-            class="emotion-51 emotion-52"
+            class="emotion-54 emotion-55"
           >
             <svg
               class="emotion-33 emotion-34 emotion-32"
@@ -1289,20 +1349,30 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
                 xlink:href="[object Object]#austria"
               />
             </svg>
+            <svg
+              class="emotion-33 emotion-34 emotion-32"
+            >
+              <title>
+                Germany
+              </title>
+              <use
+                xlink:href="[object Object]#germany"
+              />
+            </svg>
           </span>
         </span>
       </div>
       <div
-        class="emotion-62 emotion-63"
+        class="emotion-65 emotion-66"
       >
         Powered by
         <span
-          class="emotion-33 emotion-60 emotion-61"
+          class="emotion-33 emotion-63 emotion-64"
           title="Verdaccio"
         >
           <img
             alt="Verdaccio"
-            class="emotion-57 emotion-58"
+            class="emotion-60 emotion-61"
             src="[object Object]"
           />
         </span>

src/App/load-dayjs-locale.ts

@@ -44,6 +44,12 @@ function loadDayJSLocale() {
         dayjs.locale('es');
       }
       break;
+    case 'zh-cn':
+      {
+        require('dayjs/locale/zh-cn');
+        dayjs.locale('zh-cn');
+      }
+      break;
     default:
       break;
   }

src/components/ActionBar/ActionBarAction.tsx

@@ -12,10 +12,14 @@ import { Theme } from '../../design-tokens/theme';
 
 import downloadTarball from './download-tarball';
 
-export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
+export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: props.theme && props.theme.palette.primary.main,
+  backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-  color: props.theme && props.theme.palette.white,
+  color: theme?.palette.white,
   marginRight: 10,
+  ':hover': {
+    color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    background: theme?.palette.white,
+  },
 }));
 
 type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL';

src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap

@@ -7,6 +7,11 @@ exports[`<ActionBar /> component should render the component in default state 1`
   margin-right: 10px;
 }
 
+.emotion-0:hover {
+  color: #4b5e40;
+  background: #fff;
+}
+
 <div
   class="MuiBox-root MuiBox-root-2"
 >

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
+    <Tabs color={'primary'} indicatorColor={'primary'} onChange={onChange} value={tabPosition} variant={'fullWidth'}>
-      indicatorColor={'primary'}
-      onChange={onChange}
-      textColor={'primary'}
-      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,
 });

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"

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),
+}));

src/components/DetailSidebar/DetailSidebarFundButton.tsx

@@ -9,21 +9,6 @@ import { isURL } from '../../utils/url';
 import { Theme } from '../../design-tokens/theme';
 import { DetailContext } from '../../pages/Version';
 
-const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  marginTop: theme && theme.spacing(1),
-  marginBottom: theme && theme.spacing(1),
-  textDecoration: 'none',
-  display: 'block',
-}));
-
-const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme && theme.palette.orange,
-}));
-
-const StyledFundStrong = styled('strong')({
-  marginRight: 3,
-});
-
 /* eslint-disable react/jsx-no-bind */
 const DetailSidebarFundButton: React.FC = () => {
   const detailContext = useContext(DetailContext);
@@ -46,3 +31,18 @@ const DetailSidebarFundButton: React.FC = () => {
 };
 
 export default DetailSidebarFundButton;
+
+const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: theme?.spacing(1),
+  marginBottom: theme?.spacing(1),
+  textDecoration: 'none',
+  display: 'block',
+}));
+
+const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.orange,
+}));
+
+const StyledFundStrong = styled('strong')({
+  marginRight: 3,
+});

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,
+}));

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"

src/components/Footer/Footer.tsx

@@ -22,6 +22,7 @@ const Footer: React.FC = () => {
               <Flag name="brazil" size="md" />
               <Flag name="china" size="md" />
               <Flag name="austria" size="md" />
+              <Flag name="germany" size="md" />
             </Flags>
           </ToolTip>
         </Left>

src/components/Footer/__snapshots__/Footer.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Footer /> component should load the initial state of Footer component 1`] = `
-.emotion-38 {
+.emotion-41 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
   color: #999999;
@@ -9,7 +9,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 20px;
 }
 
-.emotion-36 {
+.emotion-39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26,7 +26,7 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:768px) {
-  .emotion-36 {
+  .emotion-39 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
@@ -38,12 +38,12 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:1024px) {
-  .emotion-36 {
+  .emotion-39 {
     max-width: 1240px;
   }
 }
 
-.emotion-27 {
+.emotion-30 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -52,7 +52,7 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:768px) {
-  .emotion-27 {
+  .emotion-30 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -65,12 +65,12 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 5px;
 }
 
-.emotion-25 {
+.emotion-28 {
   position: relative;
   height: 18px;
 }
 
-.emotion-25:hover .emotion-24 {
+.emotion-28:hover .emotion-27 {
   visibility: visible;
 }
 
@@ -83,7 +83,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 10px;
 }
 
-.emotion-23 {
+.emotion-26 {
   position: absolute;
   background: #d3dddd;
   padding: 1px 4px;
@@ -101,7 +101,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   top: -2px;
 }
 
-.emotion-23:before {
+.emotion-26:before {
   content: '';
   position: absolute;
   top: 29%;
@@ -123,7 +123,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 5px;
 }
 
-.emotion-34 {
+.emotion-37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -136,7 +136,7 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:768px) {
-  .emotion-34 {
+  .emotion-37 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -144,7 +144,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   }
 }
 
-.emotion-32 {
+.emotion-35 {
   box-sizing: initial;
   display: inline-block;
   cursor: pointer;
@@ -153,19 +153,19 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 5px;
 }
 
-.emotion-29 {
+.emotion-32 {
   width: 100%;
   height: auto;
 }
 
 <div
-  class="emotion-38 emotion-39"
+  class="emotion-41 emotion-42"
 >
   <div
-    class="emotion-36 emotion-37"
+    class="emotion-39 emotion-40"
   >
     <div
-      class="emotion-27 emotion-28"
+      class="emotion-30 emotion-31"
     >
       Made with 
       <span
@@ -175,7 +175,7 @@ exports[`<Footer /> component should load the initial state of Footer component
       </span>
        on
       <span
-        class="emotion-25 emotion-26"
+        class="emotion-28 emotion-29"
       >
         <svg
           class="emotion-2 emotion-3 emotion-4"
@@ -188,7 +188,7 @@ exports[`<Footer /> component should load the initial state of Footer component
           />
         </svg>
         <span
-          class="emotion-23 emotion-24"
+          class="emotion-26 emotion-27"
         >
           <svg
             class="emotion-5 emotion-6 emotion-4"
@@ -250,20 +250,30 @@ exports[`<Footer /> component should load the initial state of Footer component
               xlink:href="[object Object]#austria"
             />
           </svg>
+          <svg
+            class="emotion-5 emotion-6 emotion-4"
+          >
+            <title>
+              Germany
+            </title>
+            <use
+              xlink:href="[object Object]#germany"
+            />
+          </svg>
         </span>
       </span>
     </div>
     <div
-      class="emotion-34 emotion-35"
+      class="emotion-37 emotion-38"
     >
       Powered by
       <span
-        class="emotion-5 emotion-32 emotion-33"
+        class="emotion-5 emotion-35 emotion-36"
         title="Verdaccio"
       >
         <img
           alt="Verdaccio"
-          class="emotion-29 emotion-30"
+          class="emotion-32 emotion-33"
           src="[object Object]"
         />
       </span>

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 => ({
+export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: props.theme && props.theme.palette.snow,
+  background: theme?.palette.type === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
-  borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
+  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
-  color: props.theme && props.theme.palette.nobel01,
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
   fontSize: '14px',
   padding: '20px',
 }));
@@ -16,13 +16,13 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'flex-end',
   width: '100%',
-  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
     minWidth: 400,
     maxWidth: 800,
     margin: 'auto',
     justifyContent: 'space-between',
   },
-  [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
+  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
     maxWidth: 1240,
   },
 }));
@@ -30,7 +30,7 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
 export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   alignItems: 'center',
   display: 'none',
-  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
     display: 'flex',
   },
 }));
@@ -43,9 +43,9 @@ export const Earth = styled(Icon)({
   padding: '0 10px',
 });
 
-export const Flags = styled('span')<{ theme?: Theme }>(props => ({
+export const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   position: 'absolute',
-  background: props.theme && props.theme.palette.greyAthens,
+  background: theme?.palette.greyAthens,
   padding: '1px 4px',
   borderRadius: 3,
   height: 20,
@@ -60,7 +60,7 @@ export const Flags = styled('span')<{ theme?: Theme }>(props => ({
     left: -4,
     marginLeft: -5,
     border: '5px solid',
-    borderColor: `${props.theme && props.theme.palette.greyAthens} transparent transparent transparent`,
+    borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`,
     transform: 'rotate(90deg)',
   },
 }));
@@ -75,8 +75,8 @@ export const ToolTip = styled('span')({
   },
 });
 
-export const Love = styled('span')<{ theme?: Theme }>(props => ({
+export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: props.theme && props.theme.palette.love,
+  color: theme?.palette.love,
   padding: '0 5px',
 }));
 

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)}

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>

src/components/Header/HeaderLogo.tsx

@@ -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;

src/components/Header/HeaderMenu.tsx

@@ -47,7 +47,7 @@ const HeaderMenu: React.FC<Props> = ({
           vertical: 'top',
           horizontal: 'right',
         }}>
-        <MenuItem disabled={true}>
+        <MenuItem>
           <HeaderGreetings username={username} />
         </MenuItem>
         <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>

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('theme-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}

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;
   }

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
 .emotion-24 {
   background-color: #4b5e40;
+  color: #fff;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -302,6 +303,30 @@ 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="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>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
       <button
         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
         data-testid="header--menu-accountcircle"
@@ -336,6 +361,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;
+  color: #fff;
   min-height: 60px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -635,6 +661,30 @@ 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="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>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
         data-testid="header--button-login"

src/components/Header/styles.ts

@@ -54,11 +54,12 @@ export const SearchWrapper = styled('div')({
 });
 
 export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme && theme.palette.primary.main,
+  backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
   minHeight: 60,
   display: 'flex',
   justifyContent: 'center',
-  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: css`
     ${SearchWrapper} {
       display: flex;
     }
@@ -69,12 +70,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
       display: none;
     }
   `,
-  [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
+  [`@media (min-width: ${theme?.breakPoints.large}px)`]: css`
     ${InnerNavBar} {
       padding: 0 20px;
     }
   `,
-  [`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
+  [`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css`
     ${InnerNavBar} {
       max-width: 1240px;
       width: 100%;
@@ -83,6 +84,6 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
   `,
 }));
 
-export const StyledLink = styled(Link)<{ theme?: Theme }>(props => ({
+export const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: props.theme && props.theme.palette.white,
+  color: theme?.palette.white,
 }));

src/components/Icon/Icon.tsx

@@ -6,6 +6,7 @@ import { Svg, Img, ImgWrapper } from './styles';
 import brazil from './img/brazil.svg';
 import china from './img/china.svg';
 import india from './img/india.svg';
+import germany from './img/germany.svg';
 import nicaragua from './img/nicaragua.svg';
 import pakistan from './img/pakistan.svg';
 import austria from './img/austria.svg';
@@ -25,6 +26,7 @@ export interface IconsMap {
   nicaragua: string;
   pakistan: string;
   austria: string;
+  germany: string;
   india: string;
   earth: string;
   verdaccio: string;
@@ -51,6 +53,7 @@ export const Icons: IconsMap = {
   license,
   time,
   version,
+  germany,
 };
 
 export interface Props {

src/components/Icon/img/germany.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="germany"><path d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z" fill="#464655"/><path d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z" fill="#ffe15a"/><path fill="#ff4b55" d="M0 200.09h512V311.9H0z"/></svg>

src/components/Icon/styles.ts

@@ -20,6 +20,7 @@ interface CommonStyleProps {
   size: Breakpoint;
   pointer?: boolean;
 }
+
 const commonStyle = ({ size = 'sm', pointer }: CommonStyleProps): object => ({
   display: 'inline-block',
   cursor: pointer ? 'pointer' : 'default',

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',
-});
+}));

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 {

src/components/LoginDialog/LoginDialogHeader.tsx

@@ -9,19 +9,6 @@ import Avatar from '../../muiComponents/Avatar';
 import Box from '../../muiComponents/Box';
 import IconButton from '../../muiComponents/IconButton';
 import { Theme } from '../../design-tokens/theme';
-
-const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
-  margin: theme.spacing(1),
-  backgroundColor: theme.palette.primary.main,
-}));
-
-const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
-  position: 'absolute',
-  right: theme.spacing() / 2,
-  top: theme.spacing() / 2,
-  color: theme.palette.grey[500],
-}));
-
 interface Props {
   onClose?: () => void;
 }
@@ -45,3 +32,16 @@ const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
 };
 
 export default LoginDialogHeader;
+
+const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme?.spacing(1),
+  backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+}));
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme?.spacing() / 2,
+  top: theme?.spacing() / 2,
+  color: theme?.palette.grey[500],
+}));

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,
+  width: size,
-  height: props.size,
+  height: size,
 }));
-
-const Logo: React.FC<Props> = ({ size = Size.Small }) => {
-  return <StyledLogo size={size} />;
-};
-
-export default Logo;

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

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

src/components/NotFound/NotFound.tsx

@@ -10,16 +10,6 @@ import { Theme } from '../../design-tokens/theme';
 
 import PackageImg from './img/package.svg';
 
-const EmptyPackage = styled('img')({
-  width: '150px',
-  margin: '0 auto',
-});
-
-const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
-  color: props.theme && props.theme.palette.primary.main,
-  marginBottom: 16,
-}));
-
 const NotFound: React.FC = () => {
   const history = useHistory();
   const { t } = useTranslation();
@@ -49,3 +39,13 @@ const NotFound: React.FC = () => {
 };
 
 export default NotFound;
+
+const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});
+
+const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  marginBottom: 16,
+}));

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.white,
   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.white,
 }));
 
-export const Published = styled('span')<{ theme?: Theme }>(props => ({
+export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: props.theme && props.theme.palette.greyLight2,
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
   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,
+  fontWeight: theme?.fontWeight.semiBold,
-  color: props.theme && props.theme.palette.greyLight2,
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
 }));
 
 export const Details = styled('span')({
@@ -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.dodgerBlue : theme?.palette.eclipse,
   cursor: 'pointer',
-  ':hover': {
-    color: theme && theme.palette.black,
-  },
   [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
@@ -86,14 +83,15 @@ 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?.secondary.main : theme?.palette?.greyLight3,
   },
   '> :last-child': {
     paddingTop: 0,
   },
+  borderRadius: 4,
 }));
 
 export const IconButton = styled(MuiIconButton)({
@@ -106,7 +104,8 @@ export const IconButton = styled(MuiIconButton)({
 export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   marginTop: 8,
   marginBottom: 12,
-  display: 'block',
+  display: 'flex',
+  flexWrap: 'wrap',
   [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
     display: 'none',
   },
@@ -116,8 +115,8 @@ export const PackageListItemText = styled(ListItemText)({
   paddingRight: 0,
 });
 
-export const Description = styled(Typography)<{ theme?: Theme }>(props => ({
+export const Description = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({
-  color: props.theme && props.theme.palette.greyDark2,
+  color: theme?.palette.type === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
   fontSize: '14px',
   paddingRight: 0,
 }));

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();
   });
 });

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),
+}));

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>"`;

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
+        <Typography component="div">{children}</Typography>
-          // className={css`
-          //   padding: 0;
-          //   min-height: 170;
-          // `}
-          component="div">
-          {children}
-        </Typography>
       </CommandContainer>
     );
   };

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,
+}));

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 => ({
+const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: props.theme && props.theme.palette.primary.main,
+  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>

src/components/Spinner/styles.ts

@@ -19,6 +19,6 @@ export const Wrapper = styled('div')<WrapperProps>(props => ({
   }),
 }));
 
-export const Circular = styled(CircularProgress)<{ theme?: Theme }>(props => ({
+export const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
-  color: props.theme && props.theme.palette.primary.main,
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
 }));

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-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>"`;

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,
-});
+}));

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();

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',

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;

src/design-tokens/ThemeProvider.tsx

@@ -2,12 +2,23 @@ import React 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';
+import useLocalStorage from './useLocalStorage';
 
-const ThemeProvider: React.FC = ({ children }) => (
+const ThemeProvider: React.FC = ({ children }) => {
-  <EmotionThemeProvider theme={theme}>
+  const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode;
-    <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+  const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault);
-  </EmotionThemeProvider>
+
-);
+  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;

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,24 @@ const colors = {
   nobel02: '#9f9f9f',
   primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
   secondary: '#20232a',
+  background: '#fff',
+  dodgerBlue: '#1ba1f2',
+  cyanBlue: '#253341',
 };
 
-export type Colors = keyof typeof colors;
+const themeModes = {
+  light: {
+    ...colors,
+  },
+  dark: {
+    ...colors,
+    primary: '#fff',
+    secondary: '#424242',
+    background: '#1A202C',
+  },
+};
+
+export type ThemeMode = keyof typeof themeModes;
 
 const fontSize = {
   xxl: 26,
@@ -67,20 +80,27 @@ const customizedTheme = {
 
 type CustomizedTheme = typeof customizedTheme;
 
-export const theme = createMuiTheme({
+export const getTheme = (themeMode: ThemeMode) => {
-  typography: {
+  const palette = themeModes[themeMode];
-    fontFamily: 'inherit',
+  return createMuiTheme({
-  },
+    typography: {
-  palette: {
+      fontFamily: 'inherit',
-    ...colors,
+    },
-    primary: { main: colors.primary },
+    palette: {
-    secondary: { main: colors.secondary },
+      type: themeMode,
-    error: { main: colors.red },
+      ...palette,
-  },
+      primary: { main: palette.primary },
-  ...customizedTheme,
+      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 +131,9 @@ declare module '@material-ui/core/styles/createPalette' {
     love: string;
     nobel01: string;
     nobel02: string;
+    background: string;
+    dodgerBlue: string;
+    cyanBlue: string;
   }
 
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
@@ -118,5 +141,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 };

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;

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;

src/muiComponents/MenuItem/MenuItem.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import styled from '@emotion/styled';
 import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem';
 
 type HTMLElementTagName = keyof HTMLElementTagNameMap;
@@ -11,7 +12,7 @@ interface Props extends Omit<MenuItemProps, 'component'> {
 const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem({ button, ...props }, ref) {
   // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return <MaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
+  return <StyledMaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
 });
 
 MenuItem.defaultProps = {
@@ -19,3 +20,7 @@ MenuItem.defaultProps = {
 };
 
 export default MenuItem;
+
+const StyledMaterialUIMenuItem = styled(MaterialUIMenuItem)({
+  outline: 'none',
+});

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`,

types/index.ts

@@ -3,6 +3,7 @@ export interface VerdaccioOptions {
   url_prefix: string;
   base: string;
   language?: string;
+  darkMode?: boolean;
 }
 
 declare global {

yarn.lock

@@ -1976,6 +1976,16 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@jest/types@^25.2.3":
+  version "25.2.3"
+  resolved "https://registry.verdaccio.org/@jest%2ftypes/-/types-25.2.3.tgz#035c4fb94e2da472f359ff9a211915d59987f6b6"
+  integrity sha512-6oLQwO9mKif3Uph3RX5J1i3S7X7xtDHWBaaaoeKw8hOzV6YUd0qDcYcHZ6QXMHDIzSr7zzrEa51o2Ovlj6AtKQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
 "@marionebl/sander@^0.6.0":
   version "0.6.1"
   resolved "https://registry.verdaccio.org/@marionebl%2fsander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"
@@ -2321,12 +2331,13 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@24.0.24":
+"@types/jest@25.1.4":
-  version "24.0.24"
+  version "25.1.4"
-  resolved "https://registry.verdaccio.org/@types%2fjest/-/jest-24.0.24.tgz#0f2f523dc77cc1bc6bef34eaf287ede887a73f05"
+  resolved "https://registry.verdaccio.org/@types%2fjest/-/jest-25.1.4.tgz#9e9f1e59dda86d3fd56afce71d1ea1b331f6f760"
-  integrity sha512-vgaG968EDPSJPMunEDdZvZgvxYSmeH8wKqBlHSkBt1pV2XlLEVDzsj1ZhLuI4iG4Pv841tES61txSBF0obh4CQ==
+  integrity sha512-QDDY2uNAhCV7TMCITrxz+MRk1EizcsevzfeS6LykIlq2V1E5oO4wXG8V2ZEd9w7Snxeeagk46YbMgZ8ESHx3sw==
   dependencies:
-    jest-diff "^24.3.0"
+    jest-diff "^25.1.0"
+    pretty-format "^25.1.0"
 
 "@types/jest@^23.0.2":
   version "23.3.14"
@@ -5699,6 +5710,11 @@ diff-sequences@^24.9.0:
   resolved "https://registry.verdaccio.org/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
+diff-sequences@^25.2.1:
+  version "25.2.1"
+  resolved "https://registry.verdaccio.org/diff-sequences/-/diff-sequences-25.2.1.tgz#fcfe8aa07dd9b0c648396a478dabca8e76c6ab27"
+  integrity sha512-foe7dXnGlSh3jR1ovJmdv+77VQj98eKCHHwJPbZ2eEf0fHwKbkZicpPxEch9smZ+n2dnF6QFwkOQdLq9hpeJUg==
+
 diff@3.5.0:
   version "3.5.0"
   resolved "https://registry.verdaccio.org/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -8078,10 +8094,10 @@ imurmurhash@^0.1.4:
   resolved "https://registry.verdaccio.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
-in-publish@2.0.0:
+in-publish@2.0.1:
-  version "2.0.0"
+  version "2.0.1"
-  resolved "https://registry.verdaccio.org/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+  resolved "https://registry.verdaccio.org/in-publish/-/in-publish-2.0.1.tgz#948b1a535c8030561cea522f73f78f4be357e00c"
-  integrity sha1-4g/146KvwmkDILbcVSaCqcf631E=
+  integrity sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==
 
 indent-string@^2.1.0:
   version "2.1.0"
@@ -8779,7 +8795,7 @@ jest-config@^24.9.0:
     pretty-format "^24.9.0"
     realpath-native "^1.1.0"
 
-jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0:
+jest-diff@^24.0.0, jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.verdaccio.org/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -8789,6 +8805,16 @@ jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-diff@^25.1.0:
+  version "25.2.3"
+  resolved "https://registry.verdaccio.org/jest-diff/-/jest-diff-25.2.3.tgz#54d601a0a754ef26e808a8c8dbadd278c215aa3f"
+  integrity sha512-VtZ6LAQtaQpFsmEzps15dQc5ELbJxy4L2DOSo2Ev411TUEtnJPkAMD7JneVypeMJQ1y3hgxN9Ao13n15FAnavg==
+  dependencies:
+    chalk "^3.0.0"
+    diff-sequences "^25.2.1"
+    jest-get-type "^25.2.1"
+    pretty-format "^25.2.3"
+
 jest-docblock@^24.3.0:
   version "24.9.0"
   resolved "https://registry.verdaccio.org/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
@@ -8869,6 +8895,11 @@ jest-get-type@^24.9.0:
   resolved "https://registry.verdaccio.org/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
   integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
 
+jest-get-type@^25.2.1:
+  version "25.2.1"
+  resolved "https://registry.verdaccio.org/jest-get-type/-/jest-get-type-25.2.1.tgz#6c83de603c41b1627e6964da2f5454e6aa3c13a6"
+  integrity sha512-EYjTiqcDTCRJDcSNKbLTwn/LcDPEE7ITk8yRMNAOjEsN6yp+Uu+V1gx4djwnuj/DvWg0YGmqaBqPVGsPxlvE7w==
+
 jest-haste-map@^24.9.0:
   version "24.9.0"
   resolved "https://registry.verdaccio.org/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
@@ -12219,6 +12250,16 @@ pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty-format@^25.1.0, pretty-format@^25.2.3:
+  version "25.2.3"
+  resolved "https://registry.verdaccio.org/pretty-format/-/pretty-format-25.2.3.tgz#ba6e9603a0d80fa2e470b1fed55de1f9bfd81421"
+  integrity sha512-IP4+5UOAVGoyqC/DiomOeHBUKN6q00gfyT2qpAsRH64tgOKB2yF7FHJXC18OCiU0/YFierACup/zdCOWw0F/0w==
+  dependencies:
+    "@jest/types" "^25.2.3"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
 prettycli@^1.4.3:
   version "1.4.3"
   resolved "https://registry.verdaccio.org/prettycli/-/prettycli-1.4.3.tgz#b28ec2aad9de07ae1fd75ef294fb54cbdee07ed5"