uci-hugo-doc/exampleSite/content/usage/color-schemes.md

45 lines
2.0 KiB
Markdown
Raw Normal View History

2020-02-04 15:41:13 -08:00
If you want to customize the color scheme of the theme to give it your individual touch you are just a few lines CSS away. In general, you have to override the defaults, the easiest way to do so is to create a `static/custom.css` file right in your site root.
2020-09-27 13:21:29 -07:00
All necessary class names are listed below. If you miss some classes required for a color scheme you are very welcome to create an [Issue](https://github.com/thegeeklab/hugo-geekdoc/issues) or Pull Request. For some inspiration you can have a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). The following listing use the _HC-primary_ color palette as an example:
2020-02-04 15:41:13 -08:00
2020-06-01 15:01:49 -07:00
<!-- markdownlint-disable -->
<!-- spellchecker-disable -->
2020-09-10 13:23:24 -07:00
<!-- prettier-ignore-start -->
2020-02-04 15:41:13 -08:00
{{< highlight CSS "linenos=table" >}}
2020-05-31 09:17:32 -07:00
/* default link color */
2020-02-04 15:41:13 -08:00
a { color: #1c388e; }
a:visited { color: #73bfb8 }
/* site header */
.gdoc-header { background: #e66a4e; border-color: #404040; }
.gdoc-header__link, .gdoc-header__link:visited { color: #ffffff; }
/* page links */
.gdoc-page__footer a, .gdoc-page__footer a:visited { color: #1c388e; }
.gdoc-page__header a, .gdoc-page__header a:visited { color: #1c388e; }
/* site footer */
.gdoc-footer { background: #404040; color: #ffffff; }
.gdoc-footer__link{ color: #fecf50; }
.gdoc-footer__link:visited, .gdoc-footer__link:hover { color: #fecf50; }
/* custom shortcodes */
/* button */
.gdoc-button { color: #495057; }
.gdoc-button:hover { background-color: #eb8771; border-color: #e66a4e; color: #ffffff; }
/* hint */
.gdoc-hint.info { background: #d1d7e8; border-color: #324b99; color: black; }
.gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
.gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }
{{< /highlight >}}
2020-09-10 13:23:24 -07:00
<!-- prettier-ignore-end -->
<!-- spellchecker-enable -->
2020-06-01 15:01:49 -07:00
<!-- markdownlint-enable -->
2020-02-04 15:41:13 -08:00
2020-05-31 09:17:32 -07:00
And that is how the result will looks like. Happy customizing!
2020-02-04 15:41:13 -08:00
[![HC-primary Color Scheme](/media/color_scheme_example.png)](/media/color_scheme_example.png)