
Show HN: Vue Dark Mode – A Minimalist Dark Design System for Vue.js - LeCoupa
https://www.vuedarkmode.com/
======
danpalmer
I 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
The 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
To 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
Absolutely. 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.

------
darekkay
Please, _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).

~~~
wulfmann
I 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
Most of the elements do not change visually at all when tabbed to?

~~~
wulfmann
That'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.

------
bshimmin
This 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.

~~~
tyleo
I 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.

------
dmix
Some 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
As 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-
lab...](http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-
quickest-to-scan/)

------
admay
The 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
Thank you for your feedback. I made it more orange. :)

------
flixic
The 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.

------
osrec
Looks nice!

One observation: your select options are unreadable in Chrome on Linux. You
probably need a colour other than white for the option text.

~~~
LeCoupa
Yes, I guess it looks like this?
[https://github.com/LeCoupa/vuedarkmode/issues/22](https://github.com/LeCoupa/vuedarkmode/issues/22)

~~~
osrec
Yup!

------
snazz
The toggles have a visible dark border around them. Not too noticible on an
LCD but fairly visible on OLED.

------
kylecordes
I 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.)

------
MastroF
Is 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?

~~~
ukyrgf
It'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)

------
tpetry
It 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
Yes, 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. :)

------
oncebot
Love it! I had to make my own dark mode for my app, I wish I had this before.

------
andrewthebold
Super 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
Yes I updated the cursor css property to "inherit". Thanks :)

------
pkinchla
Good stuff. The native UI for selects is bleeding through in Firefox to note.

------
ilovecaching
I 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
Yes, I'm currently building the light mode. ;)

------
fredley
The orange colour is too bright, and the white text on the orange buttons is
unreadable. Other than tweaking this colour it looks fantastic!

~~~
LeCoupa
Thank you! I'll fix this :)

------
tomcam
Dark patterns!

------
dplgk
How does a theme for a framework make it to the front page?

~~~
cooperadymas
I'm not sure why this would be questioned.

On the front page of Hacker News right now we have articles about
conservation, witchcraft, the death of an author, the Japanese language,
horror and WWI, and ketchup.

And this is a relatively tame day.

A theme for an extremely popular framework used by many "hackers", created by
a fellow HNer and presented as a "Show HN"... this seems exactly in line with
the spirit of Hacker News. This is the kind of thing I would expect to see on
the front page.

~~~
dplgk
A new theme is created for a framework at about the same rate that mosquitoes
reproduce.

