Resolve "improve colors readability"

Closes #54 (closed)

src/css/custom.css

@@ -215,6 +215,28 @@ html[data-theme='dark'] .footer__copyright {
 }
 
 /********* Page Docs ***********/
+.menu__link--active {
+  color: var(--ifm-color-dark-green) !important;
+}
+
+.menu__link--active:hover {
+  color: var(--ifm-color-tonic-three);
+}
+
+.menu__link--active:not(.menu__link--sublist):hover {
+  background-color: var(--ifm-color-frame);
+}
+
+a {
+  text-decoration: none !important;
+}
+
+a:hover {
+  font-weight: bolder;
+  transition: 0.3s;
+}
+
+/******* Dark theme ********/
 /* html[data-theme='dark'] a {
   color: var(--ifm-color-frame);
 } */
@@ -225,4 +247,29 @@ html[data-theme='dark'] .footer__copyright {
 
 html[data-theme='dark'] .menu__link--active:hover {
   color: var(--ifm-color-frame);
-}
+  transition: 0.3s;
\ No newline at end of file
+}
+
+html[data-theme='dark'] .menu__link--active:not(.menu__link--sublist) {
+  color: var(--ifm-color-tonic-one) !important;
+  font-weight: bolder;
+}
+
+html[data-theme='dark'] .menu__link--active:not(.menu__link--sublist):hover {
+  background-color: var(--ifm-color-tonic-one);
+  color: var(--ifm-color-frame) !important;
+  font-weight: bolder;
+  transition: 0.3s;
+}
+
+html[data-theme='dark'] a:hover {
+  font-weight: bolder;
+  color: var(--ifm-color-frame);
+  text-decoration: none;
+  transition: 0.3s;
+}
+
+/*********** page FAQ ***********/
+html[data-theme='dark'] .table-of-contents__link:hover code, .table-of-contents__link--active, .table-of-contents__link--active code {
+  color: var(--ifm-color-frame);
+}