Discussion

[Mottie]

Preliminary Work notes:

• This initial step is a very superficial styling of the main https://github.com/StylishThemes/GitHub-Dark page.
• Set base-color to #008080 to make sure we're actually styling the tags.
• There are probably too many css variables. I'd like to narrow it down a bit more, if possible.
• Naming convention for semi-transparent color variables? Right now it's set as --tsp-18-40 (transparent #181818 and 40%).
• Global definitions are inside the regex wrapper, but outside of domain specific definitions. This might lead to some repetition.
• Full styles are used
  • Is this better than what we did before with background, color and border each listed separately?
  • This method might compress a little better? I'm not sure. Maybe we can periodically clean up the definitions (perfectionist again?).

[Mottie]

frameworks-{hash}.css (which frameworks?)

I think GitHub's frameworks is a combination of primer plus whatever magical styles they add while compressing the css.

[silverwind]

I just had a great idea (I think): Create a script that pull the latest stylesheets from GitHub, transform colors (eg #eee -> #343434 for borders) and possibly auto-create variables and selector-lists. It'd be quite a bit of work upfront, but in the end, we could just gulp update or similar to pull in all recent changes GitHub did.

[silverwind]

Above idea would of course mean we need a build step, but if we get it automated like that, I'm willing to accept it 😆

[Mottie]

That is essentially what I did in the GitHub-Dark's working branch... in the github folder are the two big files - frameworks-{hash} and github-{hash}. The grunt script strips out all non-color definitions and remaps them.

The resulting file is about the same size as what we have now.

[alphapapa]

Hi,

I don't mean to intrude, but I stumbled upon your project, and I saw you talking about build systems, CSS variables, etc. You might be interested in the system I set up with Stylus and make:

https://github.com/alphapapa/solarized-everything-css

I've found this makes re-theming GitHub very quick and easy--so much better than writing raw CSS code. And it's very flexible; you might be able to implement most of your changes just by making a new-dark.styl file and building the github.styl sheet with it. Maybe we could even collaborate on the github.styl file to reduce the workload of keeping up with the churn... :)

[silverwind]

@alphapapa hob do you create github.styl? Is it all hand-written?

[alphapapa]

Yes, when I see an element on the page that needs adjusting, I use the browser inspector to figure out which selector to use, then I add it to github.styl and run make.

[silverwind]

Ah, well my ideal solution would not require such manual maintenance. It would go something like this:

1. Download original stylesheets from target site.
2. Drop rules that do not concern color.
3. Replace colors according to a predefined key->value list. Possibly also honor a selector blacklist for edge cases.
4. Run resulting style through a minfier, explicitly not appending !important.

That stylesheet would then serve as the base and we then tack on another style with customizations to make it look good, possibly through !important rules.

[alphapapa]

That's an interesting idea. It could save a lot of manual work. I'll have to keep an eye on this project. :)

[Bluscream]

Can i see a screenshot of the current state? :D

[SEAPUNK]

I don't think much has been done yet. Regardless, I'd imagine it'll look the same, just put in a more optimized and maintainable package.

[Mottie]

If you want to see the style from this repository, you can copy-paste the github.css style into Stylish. We haven't updated it in quite some time because we didn't finish our discussion about the alternative method, which is currently in the working branch of the GitHub-Dark repo which pretty much does what Silverwind described in this comment above. To view that file, copy-paste the style from the github-darkv2.css file (last updated in May 2016).

[Bluscream]

Oh so its mainly a backend update?

[Mottie]

Yes, but a bunch of new styles have been added... like the projects page, etc since then.

[silverwind]

Finished my auto-generation script that pulls rules from Github based on given CSS declarations:

StylishThemes/GitHub-Dark@8a3936a

[silverwind]

Did a bit of work, you should be able to npm i && npm start and get github-dark.css regenerated.

The file itself is generated through a Handlebars template, but we can switch to something more suited too, if you like. Maybe Sass with partials, but I don't have much experience with those.

@Mottie if you want, you can start including new color mappings here. Let's see how far we can get with this approach.

[silverwind]

Oh, and I guess it might be better to move those two variables to a YAML file for easier maintenance.

[silverwind]

I think I'll go with SCSS partials. Gives us syntax highlighting and linting over those Handlebars templates which aren't really suited for CSS work.

[Mottie]

Wow, awesome work! I have a lot of learning to do as well.

[silverwind]

Okay, so current todo is:

• Switch Handlebars for SCSS
• Define mappings in YAML
• Refactor generator, handle pseudo selectors
• Create a Makefile with basic tasks (will require GNU make)
• Start adding mappings until the site looks okay-ish. Then add customizations to make it look great. This is the most tedious task where I'd welcome some help.

I'm not totally happy with having a build step, but it's pretty much unavoidable with the autogenerated rules.

[Mottie]

Another interesting style: https://github.com/cquanu/github-dark