Stylus: [Feature Request] Darker Edit Style background

[Mottie]

The "Edit Style" page could use some lovin'... for me, the entire page is too bright. And the contrast between the white page & dark syntax theme I choose is hard on the eyes.

I don't know if you've seen the NeuDark style, but I really like it! It needs a little tweaking to work better with Stylus; mainly the popup window wrapper, icons and button text overflow. And of course it doesn't say "Stylus"!

Would you consider integrating something similar into the extension? Or even better, add a option to choose a light or dark background for those users who like everything bright.

[narcolepticinsomniac]

Yeah, we're familiar with the NeuDark author. Nice guy, and judging from pm's and comments here and us.o, I'm pretty sure he's switched to Stylus. He was planning further updates for compatibility, changing the "Stylish" to "Stylus" being one. I'm not exactly sure what his deal is, but he seems to go through long periods where he can't get online much.

As for a darker UI, yes there are editor styles available, and we've tried to highlight the capability with a "Find editor styles" button in the options. That said, I don't disagree that maybe we should incorporate our own dark UI theme, and that perhaps it should be the default with an easy option for returning it to light.

I wouldn't however, agree that it should be "something similar" to NeuDark, in terms of drastic changes to buttons, icons, effects, and the overall enlarged UI. It's pretty normal for modern UI's to go with a default dark gray, which a lot of people seem to prefer. If we decide to go that route, the only difference between the dark and light versions should be the colors. We shouldn't stray too far from the standard layout in either, but perhaps we could incorporate something similar to the cursive "logo" in both. Maybe dark scrollbars as well.

[JourneyOver]

Going by his changelog he has been doing a fair bit of updates to his style https://github.com/incace/NeuDark/blob/master/CHANGELOG.md but just hasn't uploaded anything to us.o yet (dunno if he has a git/github page for the style or not other than just that one but it doesn't seem like he has the actual .css stuff uploaded anywhere else other than us.o)

[tophf]

I also like dark themes for programming-related tools.

[narcolepticinsomniac]

Cool. I'll get started on this tonight. Once I've got something to show, I'll get some feedback from you guys, and we'll take it from there.

[narcolepticinsomniac]

Alright, I think I'm far enough along to get some feedback. I won't really know how we're gonna implement it until we figure out how we're gonna do the theme option switch, so I made it as a userstyle for now. I rarely make styles where I'm trying to make something everyone will like, but I really made an effort to emulate dark styles that are popular while not changing much but colors drastically.

Everything is still up for debate, so let your opinion be known. I suggest testing on this branch because you'll see how it looks with the new icons.

@tophf Check out the Codemirror search. I put my CSS hack in there for easier locating. I doubt you'll be cool with it, but I'd like your opinion of such a function in general.

Dark Theme.txt

[tophf]

3D buttons in 2017 look weird. Is it a bug on my end? Anyway, I don't like them. Do you like Chrome devtools in dark mode? I thought you were going to make something like that, flat and mainstream.

We'll need to fix the close-help click on Import: it seems svg don't have click() method so either a div wrapper should be used or the code in edit.js altered a bit:

@@ -1348,7 +1348,7 @@ function fromMozillaFormat() {

    function doImport() {
        var replaceOldStyle = this.name == "import-replace";
-       popup.querySelector(".close-icon").click();
+       popup.querySelector(".close-icon").onclick();
        var mozStyle = trimNewLines(popup.codebox.getValue());
        var parser = new parserlib.css.Parser(), lines = mozStyle.split("\n");
        var sectionStack = [{code: "", start: {line: 1, col: 1}}];
@@ -1582,7 +1582,7 @@ function showHelp(title, text) {
    return div;

    function closeHelp(e) {
-       if (e.type == "click" || (e.keyCode == 27 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
+       if (!e || e.type == "click" || (e.keyCode == 27 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
            div.style.display = "";
            document.querySelector(".contents").innerHTML = "";
            document.removeEventListener("keydown", closeHelp);

[Mottie]

@narcolepticinsomniac I'd have to agree with @tophf, the 3D buttons look weird, but otherwise it's looking pretty good. Thanks for your hard work!

@tophf svg's do have a click method, but sometimes it returns the target on an element inside the svg (e.g. path or g), so I always set pointer-events: none; on svg elements and target the wrapper.

And to be proactive, the keyboard event keyCode has been deprecated. We can use e.key === "Escape" instead.

[narcolepticinsomniac]

3D buttons in 2017 look weird. Is it a bug on my end?

Not a bug. I don't think I've ever left the inset/outset borders on inputs/buttons in dark themes, but I actually liked the texture in the editor. The buttons may be a bad call. Pretty simple fix if everyone hates them. Anyone wanna make some so I don't screw them up twice? Also, are we ok with the inputs? I liked the texture there as well, but it's similar.

Do you like Chrome devtools in dark mode?

No, I think it's pretty terrible actually. I use my own theme for devtolols.

I thought you were going to make something like that, flat and mainstream.

The only things that aren't "flat" are the buttons/inputs. Besides those, this is actually an attempt at mainstream for me. If you look at a lot of the most popular dark userstyles, it's that grey with black borders and box-shadows.

[Hippyjake]

Hey I have one suggestion for the dark style.
Remove the "!important" from every line, as it breaks other installed editor themes.

[narcolepticinsomniac]

This is just a test style. Whatever we decide on won't use any !important; declarations. Any opinions otherwise @Hippyjake ?

[Hippyjake]

@narcolepticinsomniac none at all. I think it would make a good built in theme!

[tophf]

Do you like Chrome devtools in dark mode?

No, I think it's pretty terrible actually. I use my own theme for devtolols.

This is very unfortunate. I happen to dislike all dark themes except those similar to devtools and other monokai-based ones.

[tophf]

@Mottie, thanks, ~I will swap out keyCode globally in my PR.~ Nah, switching to key requires raising "minimum_chrome_version" from 49 to 51 for no functionality gain. Using code will make it unportable to Edge. Polyfills suck compared to the native implementation which is very complicated. We'll do it next year, arguably.

[narcolepticinsomniac]

I happen to dislike all dark themes except those similar to devtools and other monokai-based ones.

That seems like an awfully specific preference not to mention beforehand.

There's a "monokai" option in the editor already:

Can't say I'm a fan of all the pink and purple, but to each his own.

Anyway, whatever theme we decide on will have its own default CodeMirror theme paired with it (whether styled by us, or one of the built-in themes), but once it's integrated correctly, the user will still be able to choose their own CodeMirror theme. I reused a lot of the CodeMirror colors from the theme I've been using forever, because they're pretty neutral and I spent quite a while previously picking out shades that worked best for legibility on dark backgrounds.

So since the CodeMirror theme will be optional, it mostly comes down to the surrounding UI theme. I get that the buttons were a big thumbs down. I almost expected that, but if you dislike everything in general, I don't know what to tell you. It's based on the most generic "mainstream" schemes of what types of dark themes appear to be popular, based on installs.

I'm definitely not looking to push my own personal preferences here. Although personal taste is unavoidable to a certain degree when designing anything, I specifically based the concept on what I've seen to be where "generic" meets "popular" in dark themes.

I'm also not gonna lobby for a theme if you hate it. I spent quite a while on this, but I won't feel like it's time and effort completely wasted if we go in another direction. I really like certain aspects of it enough to use personally as-is. The editor page specifically, I really like and will continue to use.

[tophf]

Eh, no, I meant to say I have nothing to contribute to the discussion for the reason I have a specific preference. I never used any dark themes except for the devtools' one and similar so my opinion doesn't count.

[tophf]

Actually, I just thought it'd be nice to have a darkness level slider control ranging from white to near black like in Adobe UI.

[Mottie]

I was originally thinking that the page background should match the CodeMirror theme background... but keeping them separate is probably a better idea.

@tophf I do like that idea too.

[narcolepticinsomniac]

a darkness level slider control ranging from white to near black

Why "near"? Some people like black. In theory, that sounds great. The more user control over customization, the better. I'm not all that familiar, but I imagine results may vary. That's something I would like to try out though.

Like anything here, the amount of feedback we can get in advance isn't exactly enough to get a definitive opinion poll. I'll take a step back from this issue unless anyone wants to suggest their tweaks, in terms of actual CSS, to what I came up with, or if the general consensus winds up being that it'd be good with some improvements.

Otherwise, I look forward to whatever other options are provided. A slider sounds promising.

[narcolepticinsomniac]

@tophf On a side-note, I'd still like to get your take on the CodeMirror "find" function CSS hack I incorporated. I doubt you'll approve of the method, but what do you think of the functionality in general? I know when searching condensed/minified code, it has been a real time-saver for me.

[incace]

What up everyone, figured I would post this here as it applies (syntax themes). I just posted the latest revision (v2.5) over at us.o and updated the readme there. Lot's of fixes. Please check out the new style and see how it looks on your end. I've gone through and tweaked pretty much everything. I recommend using the zenburn syntax theme with Stylus as it sort of fits already. I have a TODO list going that includes updating ALL syntax themes to fit the NeuDark look via the "Projects" area in the repo HERE.

Check the screens for Stylus on the latest README.md

@narcolepticinsomniac The next phase of this for me is tweaking/fixing all the syntax themes to fit NeuDark. I've already started the syntax-specific section in the stylesheet on my end, and I would like you guys to see how it looks when implemented. I should be done with this in a few days or so. Also, regarding being offline, I am now on a stable connection throughout and will be available daily.

Also, before I forget, I had used FA icons throughout the Stylish version and they were brought over by default to the Stylus version. I wanted to use different icons possibly to give Stylus even more of it's own signature with the theme. Any recommendations/requests?

[tophf]

@narcolepticinsomniac, idk, maybe? As for me I simply always beautify the styles.

[narcolepticinsomniac]

@tophf Well. maybe it's usefulness is subjective. I had a style I had to minify to keep it under the size limit. Beautifying wasn't really an option because the beautifier doesn't remove all white-space when condensing. Even if it did, or if I used an external beautifier, there was a bunch of oddball code that got messed up in the process. Searching for anything in that code was a nightmare, before I started using that little trick. Even in regular old searching though, I find it useful.

[narcolepticinsomniac]

@incace Good update. I don't particularly like too much "Material Design" at once, but yours is really nicely done. The only little detail I noticed was the icons getting pushed/misaligned slightly in the popup:

[incace]

@narcolepticinsomniac thanks for pointing this out. I'll look into it. Appreciate the feedback as well.

[tophf]

To make the page colors programmatically adjustable we'll need a flat and simple style for the buttons. Then we could use CSS variables or some simple lightweight CSS-calc js library to assemble a CSS patch, cache it, inject it. Here's an example of styling I sketched in a couple of minutes in devtools for the manage page:
example.css.txt

[narcolepticinsomniac]

I made some new buttons if anyone is interested. If you like flat, they're not exactly that. If you hated those retro 3D buttons, they're not that either. Also updated some stuff to work with tophf's branch.
Dark Theme New Buttons.txt

[tophf]

Seems okay although personally I like blabla flat blabla :-)

[narcolepticinsomniac]

I updated for compatibility with the new UI. Also reduced some background color contrast, styled the inputs, and reworked a lot of box-shadows.

I'm really liking it now. I've actually been incorporating the same theme in TamperMonkey, which is turning out pretty nice.

Buttons still aren't flat.

Dark Theme.txt

Edit: Had to adjust .newUI. Didn't realize it changed from yesterday.

Edit 2: Updated selectors which changed overnight again.

[narcolepticinsomniac]

Not sure how or when a dark UI might be integrated by default. Maybe the slider will be the way to go. Anyway, in the meantime, I published the dark theme I made for the new UI here. USO is a crippled, POS version of its former self, so I don't imagine it'll show up in searches, but that's the link.

[Mottie]

How is it being crippled? I opened an issue last week about the settings not being available any more, so hopefully that will get fixed... https://github.com/stylish-userstyles/userstyles/issues/105 <- I didn't want to link it to this thread LOL.

[narcolepticinsomniac]

Settings being absent isn't the only issue. Advanced search is gone, but the worst issue is that a lot of searches in general return garbage results, and even on somewhat relevant results, the second page tends to be irrelevant.

Garbage:
https://userstyles.org/styles/browse?category=userstyles.org

Close to garbage (yours is so popular it sneaks through):
https://userstyles.org/styles/browse?category=github

[Mottie]

Wow, that is pretty bad...

[narcolepticinsomniac]

Yeah, they seem pretty determined to ruin everything they touch.

[narcolepticinsomniac]

That style is for the new (optional) manager UI in the update which got pushed today, btw. It may not have gotten automatically updated by Chrome for everyone yet.

[Mottie]

@narcolepticinsomniac I had to add a #options .block selector to your Stylus Manager dark theme:

#ui td,
#actions td,
#ui h1,
#actions h1,
#options .block {
    color: hsl(0, 0%, 70%)!important;
}

When you click on the Stylus icon and click "Options", you are taken to the extensions page with the options popup. The text color is too dark without the new selector 😸.

[narcolepticinsomniac]

@Mottie That's old code from before tophf rearranged things. I fixed it before it was ever released, IIRC. If you installed from US.o, it should have auto-updated. Also, there's advanced settings for a real compact layout. If you have a lot of styles, like me, they're way easier to navigate.

[Mottie]

Ahh, I didn't realize it was available on USO. Thanks!

[the-j0k3r]

If you installed from US.o,

This is the style I have, its still rought around the edges but my eyes dont hurt.

I wish there was a Firefox dark style for all the settings/addon pages maybe with colo selectors so that bg color would mach say the options menu color on the US.o style.

[tophf]

For a while now it's been really easy to install dark Stylus themes from the popup using the inline style search so I consider this issue implemented. We couldn't agree on what a dark theme should look like anyway - tastes differ.