search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.87k stars 3.51k forks source link

Dark Themes #238

Closed gizocz closed 6 years ago

gizocz commented 7 years ago

It would be nice to have a dark theme version of the default themes. Thank You.

rstoenescu commented 7 years ago

Good idea. Will see about this.

smolinari commented 7 years ago

How hard would it be to create something like this?

https://jqueryui.com/themeroller

I am not asking for it. I'd just like your professional opinion on the amount of effort it would take to make something like it.

Scott

rstoenescu commented 7 years ago

@smolinari It's pretty hard. Would take a huge amount of effort and rethinking of the way themes work..

smolinari commented 7 years ago

Hmm.....ok. I guess I'll have to dig into the code to understand the difficulty. Thanks for the answer.

Scott

CookieJon commented 7 years ago

Weird, I just came here to raise an issue suggesting a theme roller, while I remembered. And it's not even one day after @smolinari had the same idea. (Some would say that supports Sheldrake's Theory of Morphogenesis and the 100th Monkey. But anyway...)

I was thinking about this last night... it could certainly be a big effort, but I reckon a short-term win would be simply a page like this one that auto-generates inputs for each variable, and then just update some sample controls on the page and finally spit out raw text for the user to paste into their project.

Doesn't sound so hard, and I think would be useful, or am I just deluded?! (Also, I suspect being able to fiddle around with a theme roller is a big selling point... a lot of bang for your buck, as they say)

My 2 cents only. :-)

smolinari commented 7 years ago

To be honest, my actual "dream" is a lot farther away. It would be to offer a special menu in the UI (needs a Quasar server of course 😉), and when you open it, you move into "administrative editing mode" (different from content editing). Basically, whatever page the admin is on, with this menu, she would be able to change her app in many different ways. The selections in the sidebar would be "Format", "Style", "Data","Translation", and "Behavior". When a selection is clicked, the page highlights what is editable (with very smalls button next to each component) I could go into more detail, but for this discussion, the "Style" selection would hold the design details. When you click on a component, you get to change it's style like colors, fonts, etc.. Of course, the changes also cascade, or you can define a new class for that component. The changes are then propagated back to the server and are stored.

This CMS is sort of heading in that direction (but not quite 😉).

http://demo.getrelax.io/admin/login

username: demo pass: demo

This CMS is using React. Just rambling, but you guys get an idea where my intentions are heading.

Scott

smolinari commented 7 years ago

This is a lot more like it! 😄

https://www.youtube.com/watch?v=O7yHCoyozVk

Scott

CookieJon commented 7 years ago

Oh that'd be a fun way to destroy time.

smolinari commented 7 years ago

😄 In what way? As a developer developing such a tool or as a user playing around with the style of a site? Or both?

Scott

CookieJon commented 7 years ago

well I was thinking the former, but in fact applies to both i guess.

CookieJon commented 7 years ago

FWIW, I;'ve dealt with tonnes of custom-themed jQuery UI sites, and I've never used the Theme Roller for anything other than mucking around with it to see what it does. It's never exactly what you want, so I think aimedf at novice, therefore should actually be an uncomplicated app for that reason.

smolinari commented 7 years ago

Right. A theming tool should be simple, but at the same time offer a "path" to the css. In fact, I believe any tool which allows a novice to alter stuff under the hood, should also lead the way to the actual code being altered and if at all possible, make is a learning experience. Because, no matter what, at some point that person (or someone for them) is going to have to code, to get exactly what he or she wants. 😄 Scott

llin55 commented 7 years ago

Is a dark theme somewhere on the roadmap?

rstoenescu commented 7 years ago

I can now say: "yes". Quasar will have equivalent dark themes for both Material and iOS themes.

rstoenescu commented 7 years ago

Part of the implementation is done in v0.14. There's still a lot to do left, but it's a good start. Check "dark" props in v0.14 beta under forms.

aldanor commented 7 years ago

Quasar will have equivalent dark themes

Wondering if that's still on the roadmap? :)

rstoenescu commented 6 years ago

Instead of full-blown themes, Quasar components support "dark" attribute. Cleaner and much more maintainable.

eminpala commented 6 years ago

How can we use different theme of Material icons? Such as outlined?

smolinari commented 6 years ago

@eminpala - check the docs. Material is one of two themes you can use and it is the standard theme. There is also the possibility of using different icon sets.

Scott

rstoenescu commented 6 years ago

@eminpala Google hasn't released the "outline" version in webfont format yet.