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

ani-per commented 6 months ago

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:

Dark mode result:

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.

netlify[bot] commented 6 months ago

Deploy Preview for hugo-lynx ready!

Name	Link
Latest commit	616684f5cf2c7ca1df759d3e251d78fc5b480da3
Latest deploy log	https://app.netlify.com/sites/hugo-lynx/deploys/660dd7816338f40008243bc5
Deploy Preview	https://deploy-preview-140--hugo-lynx.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

ani-per commented 6 months ago

This labeller failure is not due to my commits. The same occurred for this user in #126, so I think it's an issue with .github/labeller.yml.

github-actions[bot] commented 5 months ago

This pull request has been automatically marked as stale because it has not had any recent activity. Please review the PR history and add a reply with any requested information. If no information has been requested, it may be that this contribution does not fit with the project objectives, or does not adhere to the contributing guidelines. If this is in error, please add a reply with further details. This PR will automactically close in 14 days if no further activity occurs.

ani-per commented 5 months ago

I'd like to bump this to prevent it going stale. I think this would be a very helpful feature that would help a lot for customization.

github-actions[bot] commented 4 months ago

This pull request has been automatically marked as stale because it has not had any recent activity. Please review the PR history and add a reply with any requested information. If no information has been requested, it may be that this contribution does not fit with the project objectives, or does not adhere to the contributing guidelines. If this is in error, please add a reply with further details. This PR will automactically close in 14 days if no further activity occurs.

flowgunso commented 1 month ago

I am looking for that exact feature.

jpanther / lynx