hugo-theme-hilfe/exampleSite/static/custom.css.example
Robert Kaussow 80ddd27307
fix: adjust default color scheme to fix some contrast issues (#610)
BREAKING CHANGE: This change has adjusted the default color scheme and brand icon. There is no real functional break, but since the look and feel has changed, you might consider this as such.
2023-04-19 16:28:08 +02:00

154 lines
3.4 KiB
Text

/* Global customization */
:root {
--code-max-height: 60rem;
}
/* Light mode theming */
:root,
:root[color-theme="light"] {
--header-background: #4ec58a;
--header-font-color: #ffffff;
--body-background: #ffffff;
--body-font-color: #343a40;
--mark-color: #ffab00;
--button-background: #62cb97;
--button-border-color: #4ec58a;
--link-color: #518169;
--link-color-visited: #c54e8a;
--code-background: #f8f9fa;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f8f9fa;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
--accent-color: #e9ecef;
--accent-color-lite: #f8f9fa;
--control-icons: #b2bac1;
--footer-background: #efefef;
--footer-font-color: #efefef;
--footer-link-color: #efefef;
--footer-link-color-visited: #efefef;
}
@media (prefers-color-scheme: light) {
:root {
--header-background: #4ec58a;
--header-font-color: #ffffff;
--body-background: #ffffff;
--body-font-color: #343a40;
--mark-color: #ffab00;
--button-background: #62cb97;
--button-border-color: #4ec58a;
--link-color: #518169;
--link-color-visited: #c54e8a;
--code-background: #f8f9fa;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f8f9fa;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
--accent-color: #e9ecef;
--accent-color-lite: #f8f9fa;
--control-icons: #b2bac1;
--footer-background: #112b3c;
--footer-font-color: #ffffff;
--footer-link-color: #f66b0e;
--footer-link-color-visited: #f66b0e;
}
}
/* Dark mode theming */
:root[color-theme="dark"] {
--header-background: #4ec58a;
--header-font-color: #ffffff;
--body-background: #343a40;
--body-font-color: #ced3d8;
--mark-color: #ffab00;
--button-background: #62cb97;
--button-border-color: #4ec58a;
--link-color: #7ac29e;
--link-color-visited: #c27a9e;
--code-background: #2f353a;
--code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035;
--code-font-color: #b9b9b9;
--code-copy-background: #343a40;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #6b7784;
--code-copy-success-color: #37905c;
--accent-color: #2b3035;
--accent-color-lite: #2f353a;
--control-icons: #b2bac1;
--footer-background: #112b3c;
--footer-font-color: #ffffff;
--footer-link-color: #f66b0e;
--footer-link-color-visited: #f66b0e;
}
@media (prefers-color-scheme: dark) {
:root {
--header-background: #4ec58a;
--header-font-color: #ffffff;
--body-background: #343a40;
--body-font-color: #ced3d8;
--mark-color: #ffab00;
--button-background: #62cb97;
--button-border-color: #4ec58a;
--link-color: #7ac29e;
--link-color-visited: #c27a9e;
--code-background: #2f353a;
--code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035;
--code-font-color: #b9b9b9;
--code-copy-background: #343a40;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #6b7784;
--code-copy-success-color: #37905c;
--accent-color: #2b3035;
--accent-color-lite: #2f353a;
--control-icons: #b2bac1;
--footer-background: #112b3c;
--footer-font-color: #ffffff;
--footer-link-color: #f66b0e;
--footer-link-color-visited: #f66b0e;
}
}