From 6350ba9c3f00ad93ed7e5db47d3db908246cc2ae Mon Sep 17 00:00:00 2001
From: Julie Thezenas <julie@lydra.fr>
Date: Tue, 7 Jun 2022 12:05:35 +0200
Subject: [PATCH] fix: place right colors variable on theme file
---
src/css/custom.css | 36 +++++++++++++++---------------------
src/css/dark-theme.css | 31 ++++++++++++++++++++++++++++++-
src/css/matomo.css | 19 +++++++++++++++++++
src/css/variables.css | 30 ++++++++++--------------------
4 files changed, 74 insertions(+), 42 deletions(-)
create mode 100644 src/css/matomo.css
diff --git a/src/css/custom.css b/src/css/custom.css
index 3262b89..c12cafc 100644
--- a/src/css/custom.css
+++ b/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;
-}
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index 4106b7d..3b287b3 100644
--- a/src/css/dark-theme.css
+++ b/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);
diff --git a/src/css/matomo.css b/src/css/matomo.css
new file mode 100644
index 0000000..e58feab
--- /dev/null
+++ b/src/css/matomo.css
@@ -0,0 +1,19 @@
+/******** 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;
+}
diff --git a/src/css/variables.css b/src/css/variables.css
index e3254fe..6e8317b 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -1,4 +1,4 @@
-/*
+/* 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);
--
GitLab