Improve documentation (#349)

* Improve documentation content
* Improve documentation style

docs/src/theme/DocSidebarItem/Link/index.js

@@ -6,7 +6,7 @@ import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import styles from './styles.module.css';
-import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug } from "react-icons/tb";
+import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug, TbVocabulary } from "react-icons/tb";
 
 
 export default function DocSidebarItemLink({
@@ -29,6 +29,7 @@ export default function DocSidebarItemLink({
     'TbTopologyStar': TbTopologyStar,
     'TbChartDots': TbChartDots,
     'TbBug': TbBug,
+    'TbVocabulary': TbVocabulary
   };
 
   let IconComponent = customProps && customProps.icon ? icons[customProps.icon] : TbFaceIdError;

docs/src/theme/Icon/DarkMode/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TbMoon } from 'react-icons/tb';
+import {useColorMode} from '@docusaurus/theme-common';
+
+
+export default function IconDarkMode(props) {
+  const { colorMode } = useColorMode().colorMode;
+  return colorMode === 'dark' ? <TbMoon /> : <></>;
+}

docs/src/theme/Icon/Home/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TbHome } from 'react-icons/tb';
+export default function IconHome(props) {
+  return <TbHome size={14} />;
+}

docs/src/theme/Icon/LightMode/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TbSun } from 'react-icons/tb';
+import {useColorMode} from '@docusaurus/theme-common';
+
+
+export default function IconLightMode(props) {
+  const { colorMode } = useColorMode().colorMode;
+  return colorMode === 'dark' ? <></>: <TbSun /> ;
+}