feat: enable dark mode

src/App/App.tsx

@@ -15,7 +15,7 @@ import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme && theme.palette.white,
+  backgroundColor: theme && theme.palette.backgroundBody,
 }));
 
 const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({

src/components/DetailContainer/DetailContainer.tsx

@@ -6,6 +6,7 @@ import Box from '../../muiComponents/Box';
 import DetailContainerTabs from './DetailContainerTabs';
 import DetailContainerContent from './DetailContainerContent';
 import { TabPosition } from './tabs';
+import { DetailTheme } from './styles';
 
 const DetailContainer: React.FC = () => {
   const [tabPosition, setTabPosition] = useState(TabPosition.README);
@@ -23,10 +24,12 @@ const DetailContainer: React.FC = () => {
   );
 
   return (
-    <Box component="div" display="flex" flexDirection="column" padding={2}>
-      <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
-      <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
-    </Box>
+      <Box component="div" display="flex" flexDirection="column">
+        <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
+        <DetailTheme>
+          <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
+        </DetailTheme>
+      </Box>
   );
 };
 

src/components/DetailContainer/DetailContainerContentReadme.tsx

@@ -2,15 +2,18 @@ import React from 'react';
 
 import { preventXSS } from '../../utils/sec-utils';
 import Readme from '../Readme';
+import { ReadmeSpacing } from './styles';
 
 interface Props {
   description?: string;
 }
 
 const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
-  if (!description) return null;
+  if (!description) {
+    return null;
+  }
   const encodedReadme = preventXSS(description);
-  return <Readme description={encodedReadme} />;
+  return <ReadmeSpacing><Readme description={encodedReadme} /></ReadmeSpacing>;
 };
 
 export default DetailContainerContentReadme;

src/components/DetailContainer/DetailContainerTabs.tsx

@@ -28,9 +28,9 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition
 
   return (
     <Tabs
-      indicatorColor={'primary'}
+      indicatorColor={'secondary'}
       onChange={onChangeTabPosition}
-      textColor={'primary'}
+      textColor={'secondary'}
       value={tabPositionIndex}
       variant={'fullWidth'}>
       <Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />

src/components/DetailContainer/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+import { Theme } from '../../design-tokens/theme';
+
+export const DetailTheme = styled('div')<{ theme?: Theme }>(props => ({
+  backgroundColor: props?.theme?.palette.readmeBackgroundColor,
+}));
+
+export const ReadmeSpacing = styled('div')<{ theme?: Theme }>(props => ({
+  padding: '20px',
+}));

src/components/Logo/Logo.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import logo from './img/logo.svg';
+import logo from './img/verdaccio-blackwhite.svg';
 
 export enum Size {
+  Tiny = '20px',
   Small = '40px',
   Big = '90px',
 }

src/components/Logo/img/logo.svg

@@ -1 +0,0 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" 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><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><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></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>

src/components/Logo/img/verdaccio-blackwhite.svg

@@ -0,0 +1,31 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="verdaccio">
+    <Title>Verdaccio</Title>
+    <rect width="100" height="100" rx="37" fill="black" />
+    <g filter="url(#filter0_d)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M70 46.7288L54.6723 77H45.7983L22 30L37.3277 30L50.2353 55.4915L54.6723 46.7288H70Z" fill="white" fill-opacity="0.6" />
+    </g>
+    <g filter="url(#filter1_d)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M67.621 41H72.4L78 30H75.621H62.8H58V32.3571H61.6L60.8 33.9286H54V36.2857H59.6L58.4 38.6429H50V41H57.2H67.621Z" fill="white" />
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.785 77H45.8804L22 30H37.3806L58 70.7175L54.785 77Z" fill="white" />
+    <defs>
+        <filter id="filter0_d" x="17" y="29" width="58" height="57" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2.5" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <filter id="filter1_d" x="45" y="29" width="38" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2.5" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+    </defs>
+</svg>

src/components/Logo/img/verdaccio.svg

@@ -0,0 +1,32 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio">
+    <Title>Verdaccio</Title>
+    <defs>
+        <path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z" />
+        <filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" 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>
+        <path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z" />
+        <filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c">
+            <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>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <rect fill="#F7F8F6" width="100" height="100" rx="37" />
+        <g transform="translate(22 29)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+            <path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236" />
+        </g>
+        <g transform="translate(22 29)">
+            <use fill="#000" filter="url(#c)" xlink:href="#d" />
+            <path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000" />
+        </g>
+        <path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F" />
+        <path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square" />
+    </g>
+</svg>

src/components/Package/styles.ts

@@ -71,7 +71,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: theme && theme.palette.eclipse,
+  color: theme?.palette?.eclipse,
   cursor: 'pointer',
   ':hover': {
     color: theme && theme.palette.black,
@@ -117,7 +117,7 @@ export const PackageListItemText = styled(ListItemText)({
 });
 
 export const Description = styled(Typography)<{ theme?: Theme }>(props => ({
-  color: props.theme && props.theme.palette.greyDark2,
+  color: props?.theme?.palette.greyDark2,
   fontSize: '14px',
   paddingRight: 0,
 }));

src/design-tokens/theme.ts

@@ -1,33 +1,24 @@
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 
-// Main colors
-// -------------------------
-const colors = {
-  black: '#000',
-  white: '#fff',
-  red: '#d32f2f',
-  orange: '#CD4000',
-  greySuperLight: '#f5f5f5',
-  greyLight: '#d3d3d3',
-  greyLight2: '#908ba1',
-  greyLight3: '#f3f4f240',
-  greyDark: '#a9a9a9',
-  greyDark2: '#586069',
-  greyChateau: '#95989a',
-  greyGainsboro: '#e3e3e3',
-  greyAthens: '#d3dddd',
-  eclipse: '#3c3c3c',
-  paleNavy: '#e4e8f1',
-  saltpan: '#f7f8f6',
-  snow: '#f9f9f9',
-  love: '#e25555',
-  nobel01: '#999999',
-  nobel02: '#9f9f9f',
-  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
-  secondary: '#20232a',
-};
+import defaultTheme from './themes/default';
+import darkTheme from './themes/dark';
+import { ColorsTheme } from './types';
 
-export type Colors = keyof typeof colors;
+function getThemeColors() {
+  // eslint-disable-next-line no-constant-condition
+  if (false) {
+    return defaultTheme;
+  } else {
+    return darkTheme;
+  }
+}
+
+export type Colors = ColorsTheme;
+
+const padding = {
+  light: '16px',
+  regular: '24px',
+};
 
 const fontSize = {
   xxl: 26,
@@ -72,10 +63,10 @@ export const theme = createMuiTheme({
     fontFamily: 'inherit',
   },
   palette: {
-    ...colors,
-    primary: { main: colors.primary },
-    secondary: { main: colors.secondary },
-    error: { main: colors.red },
+    ...getThemeColors(),
+    primary: { main: getThemeColors().primary },
+    secondary: { main: getThemeColors().secondary },
+    error: { main: getThemeColors().red },
   },
   ...customizedTheme,
 });

src/design-tokens/themes/dark.ts

@@ -0,0 +1,30 @@
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  orange: '#CD4000',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#fff',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#fff',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: '#000000',
+  secondary: '#ffffff',
+  // colors based on features
+  backgroundBody: '#000',
+  lightBackgroundColor: '#fff',
+  readmeBackgroundColor: '#fff',
+};
+
+export default colors;

src/design-tokens/themes/default.ts

@@ -0,0 +1,28 @@
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  orange: '#CD4000',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#586069',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#3c3c3c',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
+  secondary: '#20232a',
+  // colors based on features
+  backgroundBody: '#fff',
+};
+
+export default colors;

src/design-tokens/types.ts

@@ -0,0 +1,3 @@
+export interface ColorsTheme {
+  [key: string]: string;
+}

src/utils/url.ts

@@ -2,6 +2,8 @@ import isURLValidator from 'validator/lib/isURL';
 import isEmailValidator from 'validator/lib/isEmail';
 import '../../types';
 
+const OCTET_STREAM_TYPE = 'application/octet-stream';
+
 export function isURL(url: string): boolean {
   return isURLValidator(url || '', {
     protocols: ['http', 'https', 'git+https'],
@@ -37,9 +39,9 @@ export function downloadFile(fileStream: Blob, fileName: string): void {
   // @ts-ignore. Please see: https://github.com/microsoft/TypeScript/issues/33792
   if (navigator.msSaveBlob) {
     // Detect if Edge
-    file = blobToFile(new Blob([fileStream], { type: 'application/octet-stream' }), fileName);
+    file = blobToFile(new Blob([fileStream], { type: OCTET_STREAM_TYPE }), fileName);
   } else {
-    file = new File([fileStream], fileName, { type: 'application/octet-stream', lastModified: Date.now() });
+    file = new File([fileStream], fileName, { type: OCTET_STREAM_TYPE, lastModified: Date.now() });
   }
 
   const objectURL = URL.createObjectURL(file);