Dracula Theme for Hacker News | Hacker News Reader

Dracula Theme for Hacker News

draculatheme.com

145 pointsindigodaddy64 comments

Dracula is a bit neon for my taste but I really do appreciate how the creator took the time to make a theme for damn near everything. The consistency makes for a great selling point.

Completely agree! I'm actually baffled why Dracula seems to be the only color scheme that is available for so many places.

I'm a big fan of JetBrains' Darcula color scheme myself. Imagine my frustration when searching for that, instead! Haha

Catppuccin is also very extensive: https://github.com/catppuccin/catppuccin

Oh that one's a lot more to my taste than Dracula is!

I'm partial to the muted tones of JetBrain's dark mode colours. I'd love it if there was a theme like that with such an active developer (community)!

I agree. I would love it if the creator took the time and made a less flashy version, would buy 100%.

Interesting what others find appealing. This reminds me of some Halloween themed flash game's menu that I played on cartoonnetwork.com back in 2000s [1][2]. But everyone is free to choose what they like, I'm not one to judge someone else's color scheme.

[1]: https://images3.wikia.nocookie.net/__cb20120701045312/knd/im... [2]: https://i.ytimg.com/vi/y1PF-2r9sv0/hqdefault.jpg

Dracula is one of the most popular IDE and text editor color schemes [1].

I'm partial to Molokai/Monokai/something-kai, though I'm not sure why different people call it by different names [2].

[1] https://en.wikipedia.org/wiki/Dracula_(color_scheme)

[2] https://github.com/sainnhe/sonokai

Monokai was the name of the blog where the colorscheme was originally posted to: https://web.archive.org/web/20161107090516/http://www.monoka...

At some point, the original author decided Monokai was a good name for both the website and the colorscheme: https://monokai.pro/

A different author ported the theme to Vim, and named this version Molokai to avoid confusion with the original author: https://github.com/tomasr/molokai

> and named this version Molokai to avoid confusion

That's likely to be pretty frustrating to people for whom N and L are the same sound.

What languages have n and l as allophones? Genuinely interested

Cantonese, and some other nearby languages. Likely others, but Cantonese is the big one.

The loss of the distinction in Cantonese is fairly recent; Chinese terms borrowed from English via Cantonese all obey the distinction, using characters that indicate the correct consonant when read in other varieties of Chinese, and you can find old English-Cantonese dictionaries that talk about how certain Cantonese accents don't make the distinction (implying that "correct" Cantonese of the time still does, which is not the case today).

Molokai is the name of a place.

Stamford is also the name of a place, but that doesn't mean you're not causing problems when you call your school "Stamford University". (I'm aware that the name is much older, but it's been displaced.)

And in this case, Molokai isn't the name of a place, it's been chosen solely for its phonetic similarity to "Monokai".

If I found a new Harverd University, I may be able to justify that, but I certainly can't do so on the stated grounds of "in order to avoid confusion".

> Dracula is one of the most popular IDE and text editor color schemes

For sure. I've definitely seen Dracula for many years on reddit/hn. Haven't seen anyone use it personally, but that's a small sample size. It's not a bad theme by any means, it's well designed based on the choice of colors and style they're going for. Not one I'd use, but I can why others may.

Gotta respect their whole ecosystem thing they've got. They offer it for a lot of different things, editors/browsers/terminals/probably OS themes too. Don't see that with other themes.

> I've definitely seen Dracula for many years on reddit/hn.

I wonder if that's just because they have great branding and have a scheme available for almost everything imaginable.

I, for one, really dislike the colour scheme itself, leaving me wondering why it's so popular. Now I'm just wondering if I'm growing old, or if it really is just different strokes for different folks.

Not to be confused with Darcula:

https://plugins.jetbrains.com/plugin/12692-darcula-darker-th...

Yup, I thought of that one too (actually of the original Darcula, which is built-in and I think the default theme if you use dark mode). Clever wordplay between "dark" and "Dracula", but some probably misread it. Anyway, that theme is actually completely different than Dracula and more to my taste...

I look at it as a lightly goofy take on the "dark" color scheme idea. I'm a Monokai person myself but I always have a sensible chuckle when I see people built stuff with Dracula.

wow, throwback. Used to play those games a ton!

> Interesting what others find appealing.

I love the Dracula color scheme; its appeal to me lies in the combination of a dark theme with a touch of playfulness without being childish.

I've recently migrated my HN dark theme to uBlock filters [1], as I try to lower the amount of browser extensions that I use.

[1] https://github.com/darekkay/config-files/blob/master/adblock...

I never thought of using ublock filters for inserting custom css. This is brilliant, thanks for the demo.

Okay, here goes a rough first edit for Dracula using uBlock orgin filters:

  ! Title: Dracula HN theme
  news.ycombinator.com##body, .c00:style(color: #CCCCCC !important; background-color: #282835 !important; )
  news.ycombinator.com##tr,td:style(background-color: #282835 !important; )
  news.ycombinator.com##tr#pagespace:style(display: none !important; )
  news.ycombinator.com###hnmain > tbody > tr:nth-child(1) table:style(background-color: #444757 !important; border-bottom: 10px solid #282835 !important; )
  news.ycombinator.com###hnmain > tbody > tr:nth-child(1) td:style(background-color: #444757 !important; )
  news.ycombinator.com##b.hnname > a:style(color: #a4fa90 !important; )
  news.ycombinator.com##a:style(color: #ad96e4 !important; )
  news.ycombinator.com##.subline:style(color: #ccc !important; )
  news.ycombinator.com##.subline a:style(color: #999 !important; )
  news.ycombinator.com##.score,#hnmain > tbody > tr:nth-child(1) td:last-child > span.pagetop:style(color: #e1772c !important; )
  news.ycombinator.com##.sitestr:style(color: #a7d3e6 !important; )

Enjoy

I've been using this since you posted it. Thank you; it is a clean look.

Updated, so it works for the days when there is the grieving bar at the top

  ! Title: Dracula HN theme
  news.ycombinator.com##body, .c00:style(color: #f8f8f2 !important; background-color: #21222c !important; )
  news.ycombinator.com##td[bgcolor="#ff6600"]:style(background-color: #444757 !important; )
  news.ycombinator.com##[bgcolor="#f6f6ef"]:style(background-color: #21222c !important; )
  news.ycombinator.com##[bgcolor="#000000"]:style(background-color: #ff5555 !important; )
  news.ycombinator.com##tr#pagespace:style(display: none !important; )
  news.ycombinator.com##b.hnname > a:style(color: #50fa7b !important; )
  news.ycombinator.com##a:style(color: #bd93f9 !important; )
  news.ycombinator.com##.subline:style(color: #f8f8f2 !important; )
  news.ycombinator.com##.subline a:style(color: #999 !important; )
  news.ycombinator.com##.score,#hnmain > tbody > tr td:last-child > span.pagetop:style(color: #ff79c6 !important; )
  news.ycombinator.com##.sitestr:style(color: #8be9fd !important; )

I use this minimal one (based on someone's comment a year or three ago that i tweaked):

    ! hacker news dark mode
    news.ycombinator.com##body:style(background: black)
    news.ycombinator.com##td:style(color: #dadada !important)
    news.ycombinator.com##table:style(background-color: #120F0D)
    news.ycombinator.com##div.toptext:style(color: #dadada)
    news.ycombinator.com##span.c00:style(color: #dadada !important)
    news.ycombinator.com##a:style(color: #ffa000 !important)
    news.ycombinator.com##span#karma:style(color: #faa000 !important)
    news.ycombinator.com##span.pagetop:style(color: #dadada !important)
    news.ycombinator.com##textarea:style(color: #404040 !important; background-color:black !important; )
    news.ycombinator.com###hnmain:style(background: #120F0D !important)

Here is an example of doing the same for reddit: https://gist.github.com/sammcj/92c071d534ada5bf9fa8cf995b81a...

Damn, I love Dracula, but the links are black [1], making it hard to read. Going to revert for now. Hey Zeno if you're reading this!

[1] https://p21.p4.n0.cdn.getcloudapp.com/items/nOuJkP65/01a9da6...

noticed the same.. must be easyish perhaps to fix in an a:link somewhere in the stylus options for it? Just installed stylus and this myself so not totally sure what/where to change the color within the theme code..

    a:link, .comment a:link{
        color: #bd93f9;
    }

this worked

I fixed by adding this to the theme:

    .c00 a:link {
        color: #bd93f9;
    }

A similar option is Dark Reader [0]. Also a plugin, also Recommended.

[0]: https://addons.mozilla.org/en-US/firefox/addon/darkreader/

+1 for Dark Reader. I use it to change the font on every website, darkmode _everything_, and even paid for the ios version. Fantastic plugin. Using it on brave, safari, firefox, chrome.

Dark reader crashes too much and too often for my liking. I still use it but I would love for an alternative to emerge.

I should assume if I install this it will siphon away the very essence of my being then?

Over and above what HN already sucks out from my life

No worries, HN can always defrost some more when needed.

The solarized dark one seems good: https://github.com/superjamie/hn-solarized-dark-nice

It makes me sad that the Wombat theme is never in the conversation for these things. I always really liked the way that one looked ever since I saw it in Emacs, but it appears that I'm in a vast minority, since a lot of people seem to prefer Dracula and Solarized.

Funny coincidence. I found Dracula for VSStudio two days ago. So far it is the only dark theme that provides overall readable texts combined with red-shift for me.

Single-line comments could be a bit brighter, though.

Personally I use https://github.com/pyxelr/hacker-news-bluish-gray

All these tweaks seem to lose their appeal to me pretty quickly and then I go back to the stock settings which just “feel right” somehow. Maybe it’s just habit. I also feel similarly about the 100 or more “HN but with a way slicker interface optimized for mobile,” which always seem way worse to me (not to mention they are always missing lots of features).

You can also do this with the Stylebot extension - https://github.com/ankit/stylebot .. I was already doing this :) (just copy paste the CSS)

Looks similar to the custom theme I built several years back for HN and still use to this day: https://imgur.com/a/ty2TNHJ

Speaking of theming Hacker News, not long ago I noticed that the Y icon in the topbar had been switched to match your custom topbar color. But it's now switched back to an invariant orange.

Dang said it was due to a single user sending lots of emails about the orange icon looking bad on the christmas theme HN uses for the top bar (orange on red).

I quite like this and am going to use it :D

One suggestion: links (including the "reply" button) in the comment section are black text, which is difficult to read against the background.

Between this and Catpuccin, is there an index of popular and widely supported themes?

Looks like old reddit in dark mode with res when you've clicked on all of the links.

A bit of an aside but are there any options like this for mobile?

Works on Firefox nightly (android)

Dracula's manor looks French in style.

Why HN still only comes in white without these extensions is crazy. Theming is a day of work unless you use Lisp I guess. This site barely changes.

Pretty sure dark mode is much easier on the eyes at night at least.

Not for everybody.

Dark themes make me dizzy and tired, be it either day or night, and I believe it's because I have high degree of astigmatism and myopia in both eyes.

> Pretty sure dark mode is much easier on the eyes at night at least.

This is very subjective. I personally find it much more difficult to focus on dark screens and they tire my eyes more. I'd rather turn the brightness down on a light theme than need to have it cranked up to full on a dark theme.

Then tell your web browser or OS to render it dark.

Seriously, why should web sites have to care about this? Your OS and browser know better what you display how and can match web page display to browser chrome and system UI.

I have set my OS to dark mode on windows and android.

It doesn't work without extensions like DarkReader etc if you don't provide the theme/CSS as the website. I uninstalled DarkReader because it just guesses how to map things over and some websites became unreadable or in subtle ways things don't display properly.

Maybe I will use whatever is suggested here but you really shouldn't have to for a site as big as HN.

No site should have to cater to dark users, is my point. That doesn‘t help you today, but complaints should be directed at browsers and OSes, not web site owners.

(I realize that HN does have color CSS rules, but this complaint comes up all the time even with web sites that don‘t specify colors)

As a developer, OS or Browser deciding the colors of my website would be a nightmare. The web is diverse, everyone doing their own weird colours in whatever weird way they can think of.

But we do get the "prefers-color-scheme"[0] and "color-scheme"[1] CSS media features, they make it easy for everyone, the visitor can just change the OS/Browser theme and the browser tells the website about what color the visitor prefers. It's up to the developer to ignore/accept their preference.

This is an accessibility thing, many hates dark theme, and some cannot look at a bright screen for long, all sites should provide either a way to change the theme or use these CSS features.

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...

> and the browser tells the website about what color the visitor prefers

1. dumping work on the web author.

2. no, it doesn‘t tell what color. It simply says dark or light. Who knows which color fits into the rest of the system? The web author certainly cannot know that.

For 1 - Yes, it is dumping the work on the web author -- And the web author must be the person who decides the styles. It is impossible for the browser to do it because of the diverse styling on the internet, even the existing extensions that try to apply colorschemes break for me all the time.

This situation is created by the web developers, doing whatever they can and however they can because even the existing standards are not really enforced, they don't even care about schematics and just use a framework that generates nested `<div>`. The texts are not readable due to the contrast difference, random styles being injected dynamically via JavaScript, etc.

For 2 - I would say that something is better than nothing. Why not provide a slightly better experience for the minority than providing nothing at all? I don't see the argument here, internet stranger.

If the theme preference needs to align with the entire system theme, feel free to make a proposal in W3C, with enough traction we can make it happen.

For my web sites I don‘t decide on color styles. It‘s all system style. If your system doesn‘t handle that to your liking, talk to your system implementer, not me. I won‘t do anything for you.

> feel free to make a proposal in W3C

Why would I? I have no need for ugly dark themes.

> For my web sites I don‘t decide on color styles. It‘s all system style.

This is false, I had a look, if you are talking about the sites you linked in your Keybase profile, I found that you are using prefers-color-scheme to decide what colors the visitor should see if they have dark mode. This is exactly I'm asking others to implement.

    @media(prefers-color-scheme:dark) {
      body {
        color:#fff;
        background:#000
      }
      a:link {
        color:#cdf
      }
      a:hover,
      a:visited:hover {
        color:#def
      }
      a:visited {
        color:#dcf
      }
    }

If you didn't know that you had this, then you might be using a CSS framework without actually understanding what it does.

No further comments by me will be added here.

> Pretty sure dark mode is much easier on the eyes at night at least.

Only while you have a good/perfect eyesight.

It's counterintuitive but black-on-white has less perceived contrast ratio than whatever-on-black. And while you can tone down brightness and contrast of the display device for the 'day' theme, if you do that for the dark theme it just makes the text dull and harder to read.

Reply on news.ycombinator.com