Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme via DarkReader #595

Merged
merged 32 commits into from
Jun 10, 2022
Merged

Conversation

donfiguerres
Copy link
Contributor

@donfiguerres donfiguerres commented Jun 3, 2022

Issue

Closes #59

Description

Use DarkReader as a darkmode provider.
I've added the option to use other theme color providers and hopefully toha's own dark theme in the future. This possible with the darkTheme.provider property. Below is an example on how to set-up the dark theme. I'm also planning to add this information to the toha documentation.

# Dark theme toggle
darkTheme:
  provider: darkreader
  enable: true
  default: dark

The drawback of this is that it is a lot slower than having your own dark theme because the theme is dynamically generated.

Test Evidence

It's already live in my website https://donfiguerres.com/
image
image

Copy link
Member

@hossainemruz hossainemruz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @donfiguerres, Thank you for the amazing work. I have added few comments. Can you please acknowledge them. Otherwise, looks good to me.

layouts/partials/scripts.html Outdated Show resolved Hide resolved
@donfiguerres
Copy link
Contributor Author

Hi @donfiguerres, Thank you for the amazing work. I have added few comments. Can you please acknowledge them. Otherwise, looks good to me.

Thanks for the feedback! I agree with your inputs. I'll work on these and push the changes to my branch.

static/js/darkreader.js Fixed Show fixed Hide fixed
static/js/darkreader.js Fixed Show fixed Hide fixed
static/js/darkreader.js Fixed Show fixed Hide fixed
@donfiguerres
Copy link
Contributor Author

Done with the changes and already live on my website at https://donfiguerres.com/ if you need to see how it looks.

I also did a quick test with the multilingual mode to make sure it doesn't conflict with the language dropdown menu.

image
image

@hossainemruz
Copy link
Member

Hi @donfiguerres, thanks again for the hard work. Looks good to me. I will test and merge soon.

@kodiakhq kodiakhq bot merged commit 65049cf into hugo-toha:main Jun 10, 2022
@donfiguerres donfiguerres deleted the dev-dark-theme branch June 13, 2022 03:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Add dark mode
2 participants