Package: mkdocs-risonia-theme
mkdocs-risonia-themeA simple theme forMkDocs. Based onthis demousing thew3.cssframework and configurable color schemes
(inspirationhere).DemoSee a demo and documentationhereDesign goalsBe a simple starting point for modifications.Be colorful and readable.Implement all features of the standard MkDocs theme (in progress).Integrate some useful plugins.Don't require translations.Don't be obfuscated.Add as little nonsense as possible.Ugly compromisesTo use w3css we need to add additional classes to the markdown output.The good part is, while we're at it, we are also able to mark externals links.The SVG icons need to be included in every page, because otherwise they can't be set to the text color.FeaturesLight and dark mode.Integration ofmkdocs-static-i18nplugin.Integration ofmkdocs-encryptcontent-plugin.Web app support.RatherlightweightShort (nav) and long (top panel)page titlesInstallationInstall the package with pip:pipinstallmkdocs-risonia-themeInstall the package from source with pip:cdmkdocs-risonia-theme/
pythonsetup.pysdistbdist_wheel
pipinstalldist/mkdocs_risonia_theme-0.1.12-py3-none-any.whlConfigurationEnable the theme and plugins in yourmkdocs.yml:theme:name:risonia#custom_dir: theme_override/ # add static files or overrides#logo: img/logo.svg # if undefined a burger symbol is displayed on mobile devices#favicon: img/logo.ico # if undefined img/favicon.ico is used#manifest: manifest.json # manifest for installable webapp#serviceworker: service-worker.js # for webapp an empty file is sufficient#extlink: true # mark external links with symbol#extblank: true # send external links to new browser tab#toc_sidebar: true # If display is wide enough, then display TOC on the right side#zoom_img: true # click on images to view them biggerplugins:-search:{}#- i18n: {...} # mkdocs-static-i18n-color-theme:# optionaltheme_color:'#ff6600'# primary colorsecondary_color:'complementary'# can be a color or schemelight_text_color:'#000'# blackdark_text_color:'#fff'# whiteextra_css_light:# list of extra CSS for light mode-'css/additional-light.css'extra_css_dark:# list of extra CSS for dark mode-'css/additional-dark.css'additional:# build these themes also-theme_color:'#44bb4f'secondary_color:'complementary'-w3css-classes:{}# mandatory#- encryptcontent: {...} # mkdocs-encryptcontent-pluginOverridesThe filemain.htmlincustom_dircan be used to further customize the template:{% extends "base.html" %}

{% block exec_script %}<script>varDOMContentLoaded_fired=false;</script><scriptid="theme">functionrunWhenDOMContentLoaded(){document.querySelectorAll('pre code').forEach((el)=>{hljs.highlightElement(el);});document.querySelectorAll('table').forEach(function(table){if(!table.hasAttribute('Tablesort')){newTablesort(table);table.setAttribute('Tablesort','');}});}if(DOMContentLoaded_fired){runWhenDOMContentLoaded();}</script><script>document.addEventListener('DOMContentLoaded',function(){DOMContentLoaded_fired=true;runWhenDOMContentLoaded();});</script>{% endblock %}

{%- block footer_ext %}<pclass="w3-right w3-tiny">{%- if i18n_config and i18n_page_file_locale %}<ahref="{{ (i18n_page_locale + '/imprint/') | url }}">Imprint</a>{%- else %}<ahref="{{ 'imprint/' | url }}">Impressum</a>{%- endif %}</p>{%- endblock %}

{%- block top_buttons %}<aclass="w3-button w3-theme-d1 w3-hover-theme w3-padding-small w3-right no-print"href="{{ config.repo_url }}"target="_blank">&lt;/&gt;</a>{%- endblock %}Page titlesNormallynavpage titles would override#heading ortitlemeta tag.
But in this theme thetitlemeta tag will always be used for the top panel if defined.For example define the navigation:nav:-Short title:'index.md'And withinindex.mdyou define the long title like this:title: Long long long title