Resolve "improve colors readability"

Closes #54 (closed)

src/css/custom.css

@@ -67,10 +67,14 @@ p {
   border-color: var(--ifm-color-dark-green);
  }
 
+ .button--beta:hover {
+   background-color: var(--ifm-color-dark-green);
+ }
+
 /************ Navbar style ***********/
 .navbar {
   background-color: var(--ifm-color-light-green);
-  --ifm-navbar-link-hover-color: var(--ifm-color-dark-green);
+  --ifm-navbar-link-hover-color: var(--ifm-color-frame);
   font-family: var(--ifm-font-family-base);
   font-weight: 700; 
   font-size: 16px;
@@ -86,6 +90,65 @@ p {
   z-index: 1; 
  } 
 
+.hero__title {
+  color: var(--ifm-color-primary-light);
+}
+
+.hero__subtitle {
+  color: var(--ifm-color-primary-light);
+}
+
+.button--warning {
+  color: var(--ifm-color-dark-green);
+  border-style: none;
+}
+
+.button--beta {
+  color: var(--ifm-color-frame);
+  border-style: none;
+}
+
+
+.button--warning:hover {
+  /* color: var(--ifm-color-dark-green);
+  border-style: none; */
+  color: var(--ifm-color-primary-light);
+  background-color: var(--ifm-color-tonic-three);
+  border-style: none;
+}
+
+.button--beta:hover {
+  /* color: var(--ifm-color-frame); */
+  color: var(--ifm-color-primary-light);
+  background-color: var(--ifm-color-tonic-three);
+  border-style: none;
+}
+
+/***** dark theme button ******/
+/* html[data-theme='dark'] .button:hover {
+  color: var(--ifm-color-primary-light);
+} */
+
+html[data-theme='dark'] .button--warning:hover {
+  /* color: var(--ifm-color-primary-light); */
+  color: var(--ifm-color-primary-light);
+  background-color: var(--ifm-color-tonic-three);
+  border-style: none;
+}
+
+html[data-theme='dark'] .button--beta:hover {
+  color: var(--ifm-color-primary-light);
+  background-color: var(--ifm-color-tonic-three);
+  border-style: none;
+}
+
+/* 
+ --ifm-color-primary: #000000;  
+ --ifm-color-dark-green: #577018;
+ --ifm-color-light-green:#8EA34E;
+ --ifm-color-frame: #FFC729;
+ --ifm-color-tonic-one: #E07931; */
+
 /************ main elements style***********/
 .section-promises {
   padding: 4rem 0;
@@ -134,3 +197,79 @@ a.footer__link-item:hover {
   font-family: var(--ifm-font-family); 
   font-weight: 600;
 } 
+
+/*************** dark footer *************/
+html[data-theme='dark'] .footer__link-item {
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme='dark'] .footer {
+  background-color: var(--ifm-color-tonic-one);
+  color: var(--ifm-color-primary);
+  --ifm-footer-link-color: var(--ifm-color-primary-light);
+  --ifm-footer-title-color: var(--ifm-color-primary-light );
+}
+
+html[data-theme='dark'] .footer__copyright {
+  color: var(--ifm-color-primary-light);
+}
+
+/********* 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);
+} */
+
+.menu__link--active {
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme='dark'] .menu__link--active:hover {
+  color: var(--ifm-color-frame);
+  transition: 0.3s;
+}
+
+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);
+}