lynx icon indicating copy to clipboard operation
lynx copied to clipboard

✨ New light/dark theme config feature: allow users to set and toggle theme colors

Open ani-per opened this issue 10 months ago • 2 comments

This PR includes the following features:

  • Parameters for the user to configure the light mode and dark mode colors of the background, main text, and alt text of the site.
    • The default light theme is black text on a white background.
    • The default dark theme is white text on a black background.
  • A button placed below all of the links for easy toggling between light and dark mode. (Default off)

Example configuration:

[params]
  toggle = true # Theme toggle button visibility
  [params.light]
    bgColor = "#fabe69"
    mainTextColor = "#0e2b47"
    altTextColor = "#3d2557"
  [params.dark]
    bgColor = "#302926"
    mainTextColor = "#b8e0de"
    altTextColor = "#dee036"

  [params.author]
    name = "Your name here"
    headline = "An awesome person"

    links = [
      { email = "mailto:hello@your_domain.com" },
      { link = "https://link-to-some-website.com/" },
      { github = "https://github.com/username" },
      { gitlab = "https://gitlab.com/username" },
      { spotify = "https://spotify.com/user/username" },
      { youtube = "https://youtube.com/username" },
    ]

Light mode result: image

Dark mode result: image

I successfully tested the toggling on Brave (essentially Chromium), Firefox, and Edge. The retention of toggled theme upon closing and reopening functions properly too.


I have also updated the README to reflect these new features.

ani-per avatar Apr 03 '24 22:04 ani-per