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

[Feature]: Add Theme toggle in Header #20

Conversation

hrynevychroman
Copy link
Contributor

This PR fixes #8

Added Select for change All new Date() code variables to custom, default value is new Date() previously:

image

Added Theme DropDown so we can dynamically change theme on site:

image

Resolve issue with logical understanding of this comment #8 (comment):

image

All UI elements was added from https://github.com/radix-vue/shadcn-vue to ship it fast and with no errors 🙂

Copy link

vercel bot commented Feb 23, 2024

@romanhrynevych is attempting to deploy a commit to the Formkit Team on Vercel.

A member of the Team first needs to authorize it.

@justin-schroeder
Copy link
Member

Appreciate all the work here @romanhrynevych – for the most part this looks good — although im not sure we really want new Date() to resolve to a user selected value instead of the current active time — my intuition is that might be more confusing for users. I think #8 would be better resolved by using a few explicit values here:

image

This will also save a bunch on page weight since we wont need a datepicker. Also, FWIW, if we were going to use a datepicker, we’d use FormKit’s: https://formkit.com/inputs/datepicker which actually uses Tempo to power it.

So in summary, if you break this up into 2 small PRs I’ll gladly merged:

  1. Light mode/dark mode toggle.
  2. A few hard-coded times in the example.

Thanks!

@hrynevychroman hrynevychroman changed the title [Feature]: Update Examples date, added date select, theme toggle [Feature]: Add Theme toggle in Header Feb 23, 2024
@hrynevychroman
Copy link
Contributor Author

@justin-schroeder this PR will fix your first issue with

  1. Light mode/dark mode toggle.

@justin-schroeder
Copy link
Member

Sorry friend — haha — just don’t think I really want to add shadcn and all the related css and ~30 components to make that dropdown. Can we just do a little hand coding for that one?

@hrynevychroman
Copy link
Contributor Author

Sorry friend — haha — just don’t think I really want to add shadcn and all the related css and ~30 components to make that dropdown. Can we just do a little hand coding for that one?

ah, ok, I will remove shadcn and add native css select

@hrynevychroman
Copy link
Contributor Author

@justin-schroeder removed shadcn, add ToggleButton in SuperHeader

image image

Copy link

vercel bot commented Feb 23, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tempo-docs ❌ Failed (Inspect) Feb 23, 2024 8:04pm

@justin-schroeder
Copy link
Member

@romanhrynevych looks like it needs an pnpm install and commit of the lockfile

@justin-schroeder justin-schroeder changed the base branch from main to feature/dark-mode-toggle February 23, 2024 20:15
@justin-schroeder justin-schroeder merged commit 66c4cbe into formkit:feature/dark-mode-toggle Feb 23, 2024
1 check failed
@hrynevychroman hrynevychroman deleted the feat/update-examples branch February 23, 2024 20:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Your documentation examples should use a time of 13:00 or later to illustrate 12- versus 24-hour handling
2 participants