Merge pull request 'development_colors' (!42) from development_colors into main

Reviewed-on: tfgrid/www_docs_threefold_io#42
This commit is contained in:
mik-tf 2024-11-20 16:58:50 +00:00
commit ce5baac764
2 changed files with 46 additions and 13 deletions

View File

@ -87,7 +87,7 @@ const config: Config = {
},
colorMode: {
defaultMode: 'light',
defaultMode: 'dark',
disableSwitch: false,
respectPrefersColorScheme: false,
},
@ -202,7 +202,7 @@ const config: Config = {
},
{
label: 'Gitea',
href: 'https://git.ourworld.tf/',
href: 'https://git.ourworld.tf',
},
],
},

View File

@ -6,7 +6,7 @@
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #2e83ff;
--ifm-color-primary: #265fb4a6;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
@ -14,29 +14,62 @@
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--svg-fill-color: #2a2021; /* Black fill for light mode */
--svg-fill-color: #141515; /* Black fill for light mode */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
.footer {
background-color: #ffffff;
}
.footer a,
.footer p,
.footer span,
.footer div {
color: #131213; /* Example: Light gray text for dark mode */
}
img.svg-icon {
fill: var(--svg-fill-color); /* Apply the color variable */
}
.navbar { /* or .navbar--fixedTop if it has that class */
background-color: #ffffff;
}
.navbar__link { /* Example: for navbar links */
color: #131213;
}
}
/* Dark mode styles */
html[data-theme="dark"] {
--svg-fill-color: #fff; /* White fill for dark mode */
--svg-fill-color: #fffff; /* White fill for dark mode */
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #2e83ff;
--ifm-color-primary: #8da5c9c0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-darkest: #1dcfa9;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--svg-fill-color: #fff; /* White fill for dark mode */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
img.svg-icon {
fill: var(--svg-fill-color); /* Apply the color variable */
--svg-fill-color: #fffff; /* White fill for dark mode */
--docusaurus-highlighted-code-line-bg: #141515;
.footer {
background-color: #131213;
}
.footer a,
.footer p,
.footer span,
.footer div {
color: #ffffff; /* Example: Light gray text for dark mode */
}
img.svg-icon {
fill: var(--svg-fill-color); /* Apply the color variable */
}
.navbar { /* or .navbar--fixedTop if it has that class */
background-color: #131213;
}
.navbar__link { /* Example: for navbar links */
color: #ffffff;
}
}