Merge branch '19-fix-light-theme-and-colors' into 'main'

Resolve "fix: light theme and colors"

Closes #19

See merge request !18

src/components/HomepageWelcome/styles.module.css

@@ -14,7 +14,7 @@
   width: 152px;
   height: 152px;
   border-radius: 50%;
-  background-color: var(--ifm-color-secondary);
+  background-color: var(--ifm-button-primary-color);
   margin-bottom: 20px;
 }
 

src/css/custom.css

@@ -31,7 +31,7 @@ strong, b {
 
 .button--primary {
   font-size: large;
-  background-color: var(--ifm-color-secondary);
+  background-color: var(--ifm-button-primary-color);
   color: var(--text-contrast);
   margin: auto;
   padding: 10px 30px;
@@ -44,7 +44,7 @@ strong, b {
 }
 
 .button--primary:hover {
-  background-color: var(--ifm-color-secondary-light);
+  background-color: var(--ifm-button-primary-hover);
   color: var(--text-contrast);
   text-decoration: none;
 }
@@ -55,7 +55,7 @@ strong, b {
   text-align: center;
   position: relative;
   overflow: hidden;
-  background-color: var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-color-primary);
   clip-path: ellipse(70% 100% at 50% 0%);
 }
 
@@ -64,7 +64,7 @@ strong, b {
 }
 
 .card__header {
-  background-color: var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-color-primary);
   padding-bottom: 25px !important;
 }
 
@@ -72,14 +72,12 @@ strong, b {
   font-size: 0.8rem;
 }
 
-
-
 a, .table-of-contents__link--active {
-  color: var(--reversed-global);
+  color: #e8ac00;
 }
 
 .table-of-contents__link:hover {
-  color: var(--reversed-global-light);
+  color: #e8ac00;
 }
 
 .theme-code-block-highlighted-line {

src/css/variables.css

@@ -10,15 +10,15 @@
   --global-theme: var(--ifm-color-primary-darkest);
   --ifm-navbar-link-color: #fff ;
   --text-contrast: #ffffff;
-  --ifm-color-secondary: #380d5b;
   --ifm-color-secondary-light: #27093f;
-  --ifm-color-secondary-lightest: #8c31d6;
-  --ifm-navbar-link-hover-color: var(--reversed-global);
-  --ifm-footer-link-hover-color: var(--reversed-global);
-  --ifm-link-hover-color: var(--reversed-global-light);
-  --ifm-menu-color-active: var(--reversed-global);
-  --ifm-breadcrumb-color-active: var(--reversed-global);
   --ifm-card-background-color: #f8f8f8;
+  --global-theme: #380d5b;
+  --ifm-color-secondary-lightest: #fad264;
+  --ifm-color-secondary: #e8ac00;
+  --ifm-color-secondary-light: #ffbd00;
+  --ifm-button-primary-color: #380d5b;
+  --ifm-button-primary-hover: #582780;
+  --ifm-navbar-link-hover-color: #e8ac00;
 
   /* Fonts */ 
   --ifm-font-family-base: 'roboto', sans;
@@ -31,7 +31,7 @@
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
   --ifm-card-background-color: #242424;
-  --ifm-color-primary: #2b0a46;
+  --ifm-color-primary: #380d5b;
   --ifm-color-primary-dark: #27093f;
   --ifm-color-primary-darker: #25083c;
   --ifm-color-primary-darkest: #1e0731;
@@ -39,9 +39,9 @@
   --ifm-color-primary-lighter: #310c51;
   --ifm-color-primary-lightest: #380d5b;
   --ifm-color-primary-trans: #ffc92f70;
-  --ifm-color-secondary: #e8ac00;
-  --ifm-color-secondary-light: #ffbd00;
-  --ifm-color-secondary-lightest: #fad264;
+  --ifm-button-primary-color: #ffbd00;
+  --ifm-button-primary-hover: #ffd666;
+  --ifm-link-hover-color: var(--ifm-button-primary-hover);
+
   --text-contrast: #000;
-  --global-theme: var(--ifm-color-primary-lightest);
 }