fix: place right colors variable on theme file

src/css/custom.css

@@ -2,6 +2,7 @@
 @import url("fonts.css");
 @import url("dark-theme.css");
 @import url("../theme/Footer/footer.css");
+@import url("matomo.css");
 
 html, body {
   margin: 0;
@@ -26,11 +27,19 @@ p {
   font-weight: 500;
 }
 
+p a {
+  color: var(--ifm-color-warning);
+}
+
 /****** LINK a ******/
 a:hover {
   transition: 0.3s;
 }
 
+li a:hover {
+  color: var(--ifm-color-warning);
+}
+
 form > p {
   font-size: small;
   margin-top: 2em;
@@ -106,11 +115,11 @@ ul {
 
 /****** HERO TITLE ******/
 .hero__title {
-  color: var(--ifm-color-secondary);
+  color: var(--ifm-color-white);
 }
 
 .hero__subtitle {
-  color: var(--ifm-color-secondary);
+  color: var(--ifm-color-white);
 }
 
 /***** BUTTON *****/
@@ -174,6 +183,10 @@ ul {
 }
 
 /******* ADMONITIONS *******/
+.admonition a {
+  color: var(--ifm-color-white);
+}
+
 .alert--secondary {
   --ifm-alert-border-color: var(--ifm-color-gray-500);
   --ifm-alert-background-color: var(--ifm-color-gray-100);
@@ -228,22 +241,3 @@ ul {
       width: 330px;
   }
 }
-
-/******** MATOMO *********/
-.matomo_optout {
-  border: 0; 
-  height: 200px; 
-  width: 600px;
-}
-
-.notrack_container {
-  display: flex;
-  justify-content: center;
-}
-
-.no_track {
-  margin-left: 12px;
-  margin-right: 12px;
-  width: 10rem;
-  height: auto;
-}

src/css/dark-theme.css

@@ -28,12 +28,41 @@ html[data-theme='dark'] .button--beta:hover {
     border-style: none;
 }
 
-/* a:hover */
+/* a & text */
+html[data-theme='dark'] p a {
+    color: var(--ifm-color-warning);
+}
+
+html[data-theme='dark'] .admonition a {
+    color: var(--ifm-color-white);
+}  
+
 html[data-theme='dark'] a:hover {
     color: var(--ifm-color-frame);
     transition: 0.3s;
 }
   
+html[data-theme='dark'] li a {
+    color: var(--ifm-color-warning);
+}
+
+html[data-theme='dark'] a {
+    color: var(--ifm-color-white);
+}
+
+html[data-theme='dark'] li a:hover {
+    color: var(--ifm-color-warning);
+}
+
+/* table-of-contents */
+html[data-theme='dark'] .table-of-contents__link {
+    color: var(--ifm-color-white);
+}
+
+html[data-theme='dark'] .table-of-contents__link--active {
+    color: var(--ifm-color-warning);
+}
+
 /* lateral text menu */
 html[data-theme='dark'] .menu__link {
     color: var(--ifm-color-warning);

src/css/matomo.css

+/******** MATOMO *********/
+
+.matomo_optout {
+    border: 0; 
+    height: 200px; 
+    width: 600px;
+}
+  
+.notrack_container {
+    display: flex;
+    justify-content: center;
+}
+  
+.no_track {
+    margin-left: 12px;
+    margin-right: 12px;
+    width: 10rem;
+    height: auto;
+}

src/css/variables.css

-/*
+/* NOTE VALUE INFO to change color var
     --ifm-color-scheme: light;
 
     --ifm-dark-value: 10%;
@@ -13,26 +13,18 @@
     --ifm-contrast-foreground-value: 70%;
 
     --ifm-contrast-background-dark-value: 70%;
-    --ifm-contrast-foreground-dark-value: 90%;
-
-    */
-
+    --ifm-contrast-foreground-dark-value: 90%; */
 
 :root {
     /* Froggit colors*/
     --ifm-color-light-green:#8EA34E;
     --ifm-color-frame: #FFC729;
-    --ifm-color-gray-100: #f5f6f7;
-    --ifm-color-gray-700: #646960;
-    --ifm-code-background: #f1f1f1;
-    /* --ifm-link-color: #E07931; */
-    /* --ifm-button-color: var(--ifm-color-primary); */
-    --ifm-code-font-size: 95%; 
 
     /* Fonts var */
     --ifm-font-family-base: "comfortaa", cursive;
     --ifm-font-family: "montserrat", sans-serif;
     --ifm-font-family-monospace: "jetbrainsmono", monospace;
+    --ifm-code-font-size: 95%; 
 
     /* Container var */
     --ifm-container-width: 100%; 
@@ -68,7 +60,7 @@
     --ifm-color-secondary-darker: #d9d9d9;
     --ifm-color-secondary-darkest: #b3b3b3;
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray);
-    /* --ifm-color-secondary-contrast-foreground: ????; */
+    --ifm-color-secondary-contrast-foreground: #ffffff;
 
     /* Success */
     --ifm-color-success-lightest: #68861d;
@@ -110,13 +102,7 @@
     --ifm-color-danger-contrast-background: var(--ifm-color-danger);
     --ifm-color-danger-contrast-foreground: var(--ifm-color-secondary);
 
-    
-    /* Reste à faire ci-dessous : */
-    
-    /* --ifm-font-color-base: var(--ifm-color-content);
-    --ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
-    --ifm-font-color-secondary: var(--ifm-color-content-secondary); */
-
+    /* White - black - gray */
     --ifm-color-white: #fff;
     --ifm-color-black: #000;
     --ifm-color-gray-0: var(--ifm-color-white);
@@ -155,12 +141,16 @@
 }
   
 html[data-theme='dark'] {
+    --ifm-font-color-base: var(--ifm-color-white);
+    --ifm-font-color-base-inverse: var(--ifm-color-white);
+    --ifm-font-color-secondary: var(--ifm-color-white);
+    /* admonitions base */
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
     --ifm-color-success-contrast-background: var(--ifm-color-success);
     --ifm-color-info-contrast-background: var(--ifm-color-info);
     --ifm-color-warning-contrast-background: var(--ifm-color-warning);
     --ifm-color-danger-contrast-background: var(--ifm-color-danger);
-
+    /* admonitions border */
     --ifm-alert-border-color: var(--ifm-color-danger);
     --ifm-alert--success-border: var(--ifm-color-light-green);
     --ifm-alert--info-border-color: var(--ifm-color-info-lightest);