Lucid theme can be configured with the config.toml of your Hugo project. Here are a few options you should be aware of.

Theme options

The following are the default options. You do not have to copy-paste this into the config unless you want to change something.

[Params.Lucid]
defaultDisplayMode = "auto"
displayModeSwitcher = false

# plausibleAnalytics = true
# plausibleDomain = "example.com"

defaultDisplayMode

  • auto (default value) - uses light or dark mode based on user’s display preferences
  • light - Uses light mode for site
  • dark - Uses dark mode for site

displayModeSwitcher

  • true (default value) - Allow users to toggle light or dark modes
  • false - Do not allow users to toggle light or dark mode

plausibleAnalytics

Enables Plausible Analytics for your site. For your convenience, this option is only applied when your site is built for deployment. Not when a local Hugo server is running.

The related option plausibleDomain allows you to set the domain for reporting analytics to Plausible. Read below on how this is useful.

  • If your blog is at “example.com” and your domain on Plausible is also “example.com”, then you have nothing to do
  • If your blog is at “www.example.com” and your domain on Plausible is “example.com”, then set the value of plausibleDomain option to www.example.com
  • To configure links for the site navigation, specify items using the [[Params.Lucid.NavLinks]] key in your config.yml.
  • Links show up in the same order they are specified in the config.yml file.
[[Params.Lucid.NavLinks]]
name = "About"
link = "/about"
[[Params.Lucid.NavLinks]]
name = "Podcast"
link = "https://example.com/podcast"

The them supports navigation links to social networks. These are displayed using icons of the social networks. Use one of the following keys:

  • twitter
  • github
  • instagram
  • youtube

Examples below

[[Params.Lucid.NavLinks]]
twitter = "https://twitter.com/example"

[[Params.Lucid.NavLinks]]
github = "https://github.com/example"

[[Params.Lucid.NavLinks]]
instagram = "https://instagram.com/example"

[[Params.Lucid.NavLinks]]
youtube = "https://youtube.com/example"

The following config will display 2 links for “About” and “Podcast” and then followed by Twitter and GitHub links.

[[Params.Lucid.NavLinks]]
name = "About"
link = "/about"

[[Params.Lucid.NavLinks]]
name = "Podcast"
link = "https://example.com/podcast"

[[Params.Lucid.NavLinks]]
twitter = "https://twitter.com/example"

[[Params.Lucid.NavLinks]]
github = "https://github.com/example"

Enabling any other analytics

To insert the snippets for any other analytics, checkout this page on how to include custom content into the head tag of pages on the site.