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

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