updated colors

This commit is contained in:
mik-tf 2024-11-20 11:56:53 -05:00
parent 5df74f127b
commit 808a93dea0
2 changed files with 46 additions and 13 deletions

View File

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

View File

@ -6,7 +6,7 @@
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
:root { :root {
--ifm-color-primary: #2e83ff; --ifm-color-primary: #265fb4a6;
--ifm-color-primary-dark: #29784c; --ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148; --ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b; --ifm-color-primary-darkest: #205d3b;
@ -14,29 +14,62 @@
--ifm-color-primary-lighter: #359962; --ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e; --ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%; --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); --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 */ /* Dark mode styles */
html[data-theme="dark"] { 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. */ /* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] { [data-theme='dark'] {
--ifm-color-primary: #2e83ff; --ifm-color-primary: #8da5c9c0;
--ifm-color-primary-dark: #21af90; --ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588; --ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870; --ifm-color-primary-darkest: #1dcfa9;
--ifm-color-primary-light: #29d5b0; --ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf; --ifm-color-primary-lightest: #4fddbf;
--svg-fill-color: #fff; /* White fill for dark mode */ --svg-fill-color: #fffff; /* White fill for dark mode */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --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 { img.svg-icon {
fill: var(--svg-fill-color); /* Apply the color variable */ 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;
}
}