diff --git a/docs/week_1_fabacademy/customising_mkdocs.md b/docs/week_1_fabacademy/customising_mkdocs.md index 6ab1c95..77957da 100644 --- a/docs/week_1_fabacademy/customising_mkdocs.md +++ b/docs/week_1_fabacademy/customising_mkdocs.md @@ -1,4 +1,4 @@ -# Customising mkdocs +# Customising Mkdocs I wanna customise my mkdocs theme. So I can have a dark mode. Because it currently looks like this and having a nice looking documentation page is necessary too! @@ -29,15 +29,28 @@ extra_css: [extra.css] ### Attempt 2 After I read the documentation thoroughly i found out that the css file needs to be relative to the `docs` folder and not the `mkdocs.yml`. After that it showed the css and I could finaly customise the theme. - - ## Customising Material theme -I decided to switch to material theme because its easier to configure and you can add all sorts of modules onto it making it super customisable. - - - +### Palette customisation +I decided to switch to material theme because its easier to configure. There are premade color schemes and a lot of extensions that work out of the box. +Example changing colors. +```yaml +theme: + palette: + primary: indigo + accent: teal +``` +Of yourse you could also use the extra.css to style the website even more. +### Extensions +You can add lot's of extensions. For example code highlighting or a table of contents on the right side of your website. +This adds a table of contents. You can find all the extensions [here](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#table-of-contents). +```yaml +markdown_extensions: + - toc: + permalink: true +``` ### Links -* https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#table-of-contents +* [markdown extensions](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#table-of-contents) * https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#table-of-contents +* [mkdocs extra css](https://www.mkdocs.org/user-guide/customizing-your-theme/)