Skip to content
This repository has been archived by the owner on Aug 2, 2024. It is now read-only.

[Feature] Beta dark theme #36

Merged
merged 6 commits into from
Jul 11, 2019
Merged

[Feature] Beta dark theme #36

merged 6 commits into from
Jul 11, 2019

Conversation

James-N-M
Copy link
Collaborator

PR Naming convention

[FEATURE/FIX/REFACTOR/README] Your PR title

Issue or feature explanation

A short explanation as to why this is needed, or, would be a great addition to Prequel! Or a reference to an open issue.
this is a theme switcher, to switch between the default light theme and a dark theme

Proposed solution/change

Short explanation how this was done.
This was done by creating root css variables and dark theme css variables paired with custom tailwind classes. Calling this beta because certain things definitely need more work but I feel like its at a good place right now to let people start using it. but could use a designers take on it.

@cjfloss
Copy link

cjfloss commented Jul 11, 2019

Just a general comment.

In newer browsers you can use the CSS Media feature "prefers-color-scheme"
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

This way it automatically updates the theme depending on the OS's theme

@QuintenJustus
Copy link
Member

Got any screenshots? 😄

@James-N-M
Copy link
Collaborator Author

image
image
image

@QuintenJustus
Copy link
Member

QuintenJustus commented Jul 11, 2019

Not too sure about --page-background-color: #1c1c1c, too dark, I think #5b5266 would be better. I think you should keep a safe distance above #1c1c1c, don't you think?

@James-N-M
Copy link
Collaborator Author

@QuintenJustus I am open to everything, I was really unsure what colors to pick for everything. but I only have to change the variable in one place to update it all :)

@James-N-M
Copy link
Collaborator Author

page back-ground set to #5b5266
image

@James-N-M
Copy link
Collaborator Author

it might be a good idea to let people try it, see how they feel about what colors would look best. Then I can do another issues to update the colors :)

@James-N-M
Copy link
Collaborator Author

James-N-M commented Jul 11, 2019

Not too sure about --page-background-color: #1c1c1c, too dark, I think #5b5266 would be better. I think you should keep a safe distance above #1c1c1c, don't you think?

is what the page back ground is on laravel horizon
https://github.com/laravel/horizon/blob/3.0/resources/sass/app-dark.scss

image

image

@QuintenJustus
Copy link
Member

My suggestion wasn’t that good I see 😁
Just keep Laravel Horizon’s dark mode then, and like you said let users suggest any optimisations 👌 Great work!

@QuintenJustus QuintenJustus changed the base branch from master to Dev July 11, 2019 18:48
@QuintenJustus QuintenJustus merged commit 4f842fb into Protoqol:Dev Jul 11, 2019
@QuintenJustus
Copy link
Member

Merged!
Just a few things I noticed that could be patched

  • Table nth::even and nth:uneven aren't colored differently like the normal theme
  • TableStatus background is still light themed
  • Horizontal scroll bar still light

Could you fix these? Also it might be good to clone Prequel's Dev branch as I've added a few UI related things.

@James-N-M
Copy link
Collaborator Author

I figured since it was a dark theme id do that on purpose to the table. I also couldnt figure out how to style the scroll bar the w3 tutorial i found wasnt doing the trick, and ill fix the table status thing :) If you could create another issue for the patches that'd be great I'm going to take a day or two off working after work :))

@QuintenJustus
Copy link
Member

Sure thing! The even/uneven row coloring is more a UX/readability fix than it is a style fix. I'll fix the scroll bar style for you! Thanks for your contributions! Enjoy your time off 👍

@James-N-M
Copy link
Collaborator Author

Tag me in the fixes you do so I can see how you did them :)

@QuintenJustus
Copy link
Member

@James-N-M Fixed them, see b8256ff 😄

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants