diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md index ce8872230..21ad83a40 100644 --- a/userguide/content/en/docs/adding-content/lookandfeel.md +++ b/userguide/content/en/docs/adding-content/lookandfeel.md @@ -245,24 +245,6 @@ If the included Prism configuration is not sufficient for your requirements, and ## Navbar -For pages containing a [blocks/cover][] shortcode, like most homepages, the -navbar is translucent as long as the hero image hasn't scrolled up past the -navbar. For an example, see the [About Docsy][] page. This initial translucent -setting ensures that the hero image is maximally visible. - -After the hero image has scrolled past the navbar, the navbar's (opaque) -background color is set -- usually to the site's [primary color][]. - -The text of navbar entries can be difficult to read with some hero images. In -these cases, you can disable navbar translucency by setting the -`params.ui.navbar_translucent_over_cover_disable` option to `true` in your -site's [configuration file][]. - -[About Docsy]: https://www.docsy.dev/about/ -[blocks/cover]: /docs/adding-content/shortcodes/#blockscover -[configuration file]: https://gohugo.io/getting-started/configuration/#configuration-file -[primary color]: #site-colors - ### Styling your project logo and name The default Docsy navbar (`.td-navbar`) displays your site identity, consisting @@ -292,6 +274,64 @@ of the following: [wordmark]: https://en.wikipedia.org/wiki/Wordmark [your logo]: /docs/adding-content/iconsimages/#add-your-logo +### Light/Dark mode menu + +If you enable this feature, Docsy adds a menu to your navbar that lets users +switch your site's documentation page display between a default "light" mode, +and a "dark" mode where the text is displayed in a light color on a dark +background. + +To enable the display of a Light/[Dark mode] menu in the navbar, set +`params.ui.showLightDarkModeMenu` to `true` in your project's configuration +file. The dropdown menu appears at the right, immediately before the [search +box], if present. + +{{< tabpane >}} +{{< tab header="Configuration file:" disabled=true />}} +{{< tab header="hugo.toml" lang="toml" >}} +[params] +[params.ui] +showLightDarkModeMenu = true +{{< /tab >}} +{{< tab header="hugo.yaml" lang="yaml" >}} +params: + ui: + showLightDarkModeMenu: true +{{< /tab >}} +{{< tab header="hugo.json" lang="json" >}} +{ + "params": { + "ui": { + "showLightDarkModeMenu": true + } + } +} +{{< /tab >}} +{{< /tabpane >}} + +[dark mode]: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode +[search box]: /docs/adding-content/search/ + +### Translucent over cover images + +For pages containing a [blocks/cover][] shortcode, like most homepages, the +navbar is translucent as long as the hero image hasn't scrolled up past the +navbar. For an example, see the [About Docsy][] page. This initial translucent +setting ensures that the hero image is maximally visible. + +After the hero image has scrolled past the navbar, the navbar's (opaque) +background color is set -- usually to the site's [primary color][]. + +The text of navbar entries can be difficult to read with some hero images. In +these cases, you can disable navbar translucency by setting the +`params.ui.navbar_translucent_over_cover_disable` option to `true` in your +site's [configuration file][]. + +[About Docsy]: https://www.docsy.dev/about/ +[blocks/cover]: /docs/adding-content/shortcodes/#blockscover +[configuration file]: https://gohugo.io/getting-started/configuration/#configuration-file +[primary color]: #site-colors + ## Tables Docsy applies the following styles to all tables, through the class `.td-table`: