13 ms·
Show HN: Vue Dark Mode – A Minimalist Dark Design System for Vue.js
- fredley 8y agoThe orange colour is too bright, and the white text on the orange buttons is unreadable. Other than tweaking this colour it looks fantastic!
- LeCoupa 8y agoThank you! I'll fix this :)
- tomcam 8y agoDark patterns!
- tpetry 8y agoIt would be more interesting if there was styling for light and dark mode, so you would be able to switch between depending on user preference.
- LeCoupa 8y agoYes, I'll build this next week. That's why I added a toggle "Dark Mode Activated" on the bottom bar. You will be able to switch between both. :)
- osrec 8y agoLooks nice! One observation: your select options are unreadable in Chrome on Linux. You probably need a colour other than white for the option text.
- flixic 8y agoThe name makes this seem a little bit more official than it really is. And I agree with another comment that a light mode would be nice. Then, the name makes less sense. I’d suggest to consider a different name, that would identify the design system (like Blueprint or Material), not a feature of an existing framework.
- dplgk 8y agoHow does a theme for a framework make it to the front page?
- corobo 8y agoPeople upvote it and the algorithm does the rest
- dplgk 8y agoThere is something else going on. People submit things that go into oblivion that are much more compelling.
- ggregoire 8y agoBecause the flag algorithm works quite well too. You should flag this one if you think it's not newsworthy.
- ithilglin909 8y agoI assume "Show HN" items aren't necessarily news, but just someone showing the community something new that may be of interest. There already appears to be too much flagging around here just because someone doesn't particularly like something. Let's not encourage more.
- joeblau 8y agoExploit the HN ranking algorithm[1]: (= gravity* 1.8 timebase* 120 front-threshold* 1 nourl-factor* .4 lightweight-factor* .17 gag-factor* .1) (def frontpage-rank (s (o scorefn realscore) (o gravity gravity*)) (* (/ (let base (- (scorefn s) 1) (if (> base 0) (expt base .8) base)) (expt (/ (+ (item-age s) timebase*) 60) gravity)) (if (no (in s!type 'story 'poll)) .8 (blank s!url) nourl-factor* (mem 'bury s!keys) .001 (* (contro-factor s) (if (mem 'gag s!keys) gag-factor* (lightweight s) lightweight-factor* 1))))) [1] - https://news.ycombinator.com/item?id=1781417 https://news.ycombinator.com/item?id=1781417
- pkinchla 8y agoGood stuff. The native UI for selects is bleeding through in Firefox to note.
- MastroF 8y agoIs there a reason why it is "Made by Nada Rifki" and it's her profile that shows up on the footer while she did 0 commits on the project?
- onemoresoop 8y agoIt looks great. Great work!! Also, is there a reason why we can't toggle on and off dark mode to compare it to a non dark mode?
- KaoruAoiShiho 8y agoDesigner vs developer maybe?
- ukyrgf 8y agoIt's odd they're marketing themselves as a Vue freelancer when their GitHub just has 1 intro project from 3 months ago. https://github.com/nrifki?tab=repositories https://github.com/nrifki?tab=repositories
- snazz 8y agoThe toggles have a visible dark border around them. Not too noticible on an LCD but fairly visible on OLED.
- bshimmin 8y agoThis looks pretty nice and there's loads of good stuff here - well done! Two comments: 1) I am really not sure about the resizing hover animation on the buttons (it feels too slow and looks like it goes a bit blurry as it resizes, at least on my non-retina external display); 2) I don't think the checkbox having the tick in it in the unchecked hover state is the right behaviour and will probably confuse some users.
- GhostVII 8y agoI have the same issue with button resizing on my 4k monitor, I think it would work better if just the button resized, not the text, since the spacing between the letters bounces around when the text resizes.
- tyleo 8y agoI agree with both of these issues. In addition to looking blurry, it is difficult to differentiate the hovered button by size alone. Consider adding a border or other effect to better indicate the hover state. A few of the other controls on the page do this. For example, the buttons you use below your section headings change their outline when hovered.
- ukyrgf 8y agoI see that blurry zoom transition effect all over the place. I suspect retina Macs don't do it, so designers keep doing it. Kinda reminds me that up until recently, Shopify used to only list Helvetica in their font-family, so Windows users saw Times New Roman. I see that stuff all the time coming from Mac-centric design firms. ^ I hesitated writing that, since it was all speculation, but then I clicked the link at the bottom saying "Hire me!" to see the designer's website and... html { font-family: "Avenir"; } No fallbacks whatsoever, so I'm seeing Times New Roman.
- LeCoupa 8y agoThank you for your feedback bshimmin. I removed the resize property and reworked the hover effect. :)
- deleted 8y ago[deleted]
- andrewthebold 8y agoSuper cool! :) Two notes: - The Nuxt.js code sample is the exact same as the Vue.js one — unless that's intentional - The button icons have `cursor: default;` on them which is kind of weird because the buttons are `cursor: pointer`. Perhaps keep it consistent?
- LeCoupa 8y agoYes I updated the cursor css property to "inherit". Thanks :)
- danpalmer 8y agoI might be a bit out of touch with frontend, but what's the reasoning for this theme being tied to a framework? I always learnt to keep markup and styles separate as much as possible, because that was beneficial for re-use, maintainability, etc. I would see the JS framework as providing the markup part, so surely the styles should be an orthogonal concern? Would this library not be better as a CSS library that apps can use regardless of the JS (or lack of JS) that they choose to have?
- bradstewart 8y agoThe current wave of component-based development is blurring these lines. A Link component can contain the markup, behavior, and styles--presenting a very simple API to the developer. I find myself taking a hybrid approach these days: common styles and variables (primarily variables) in global SCSS/Stylus stylesheets, and component-specific styles defined in the respective Vue components. As it turns out, I have very few truly common CSS classes. EDIT: To address the re-usability aspect as well: this approach absolutely makes it more difficult to re-use styles across other frameworks; but if I'm moving from Vue to some-new-framework, stylesheets are the least of my concerns.
- 5trokerac3 8y agoTo play devil's advocate, you can release both in a hierarchical structure. There's no reason that the component framework can't import a Sass project for it's styling. Then folks who don't want to use Vue can still make use of the styles.
- bradstewart 8y agoAbsolutely. And a number of projects do exactly that. Bulma -> Buefy Bootstrap -> VueBootstrap, et al. That said, if you're already using Vue, then a Vue-based framework is more convenient.
- TekMol 8y agoYes, it should be just a css file. But how cool is that? A css file. Not as cool and professional as a 'Design System for <frameworkname>'. Also, in my experience is that once a developer has mastered a framework, they are so proud of it the tie everything to the framework. To pledge their allegiance. And to signal to the pack "Hey, I'm part of the family!".
- craigharley 8y agoThe select boxes could do with fixing. When you open it up the options aren't visible, as though the text is white on white background. Image here: https://imgur.com/a/YDzZvsf https://imgur.com/a/YDzZvsf
- dmix 8y agoSome things I noticed missing from something like http://element.eleme.io/ http://element.eleme.io/: - clicking an input with placeholder text brings the cursor to the front of the input text and doesn't erase the existing text. This is very bad UX. - no example of a full form with validation errors - no file upload input - no HTML5 number input - no multi-select clearable/filterable selectboxes... select2 style selects are pretty standard these days - no date/time picker, another essential form component Not trying to be critical, I'm sure these will come with time. But this is far from a production usable framework in its current state.
- andyana 8y agoAs an aside, I don't why top-aligned infield form labels[0] aren't more popular. I implement the style whenever possible. [0]: http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/ http://uxmovement.com/forms/why-infield-top-aligned-form-lab...
- darekkay 8y agoPlease, please don't make your UI components unaccessible by removing the focus ring("outline: 0"). You're basically excluding all keyboard users from using your widgets, because I simply cannot tell which element is currently focussed. If you really find the default browser focus ring ugly, feel free to style it or provide another alternative (like a box shadow).
- sbr464 8y agoI agree also. Another method, albeit more advanced, is an option to not show on mouse clicks, and do show when using the keyboard or cycling through tab indexes etc.
- wulfmann 8y agoI don't understand what you mean. It's just using border instead of outline. It would still show as active if focus is from a keyboard. The changes are not tied to click events.
- detaro 8y agoMost of the elements do not change visually at all when tabbed to?
- wulfmann 8y agoThat's a browser implementation and an html issue. They're just displaying the items here, not putting them in a true form. If you put these components into a <form> tab would work fine. The :focus state would still happen, and that's what's styled. edit: I see what you're saying. I was only looking at form inputs, but i see no focus state on buttons as you said.
- LeCoupa 8y agoYou're right. I just fixed this. :-)
- deleted 8y ago[deleted]
- admay 8y agoThe orange is yellow. Great color pallet though, it's really easy on the eyes for the most part. I'm not that into frontend dev, I mostly stick with backend and devops so for me, when I need to make a front end without a ton of bells and whistles, this kind of stuff saves my no-css-skills-on-my-resume butt!
- LeCoupa 8y agoThank you for your feedback. I made it more orange. :)
- kylecordes 8y agoI think the bigger value is in decoupling the visual style choices from the framework used. This one seems to be going the other direction. Not only is the overall visual style "burned in", but it is permanently set to "dark mode". This seems like a safe choice only for small, short-lived applications. (By the way, the new stuff from Google in which they have made Material Design much more configurable, is a great shift in the right direction. Of course it would be even better if the whole material-ness of an application were a runtime switch, but there are significant obstacles to that.)
- ilovecaching 8y agoI would love to use this if it was in React. It looks really nice. It would also be cool if there was a light model that one could toggle between. Calling it dark mode implies their is a light mode no?
- LeCoupa 8y agoYes, I'm currently building the light mode. ;)
- oncebot 8y agoLove it! I had to make my own dark mode for my app, I wish I had this before.