Rewrite ideas

[silverwind]

Few ideas:

• CSS Variables for colors so they can be easily modified in a single place.
• @document (with -moz- prefix if necessary) sections to scope styles. Basically any site that does not use framworks-*.css + github-*.css should have its own section.

@document regex(/* old regexp */) {
  :root {
    --base-color: /*[[base-color]]*/ #4183c4;
    --grey-18: #181818; 
    --grey-1b: #1b1b1b; 
    --grey-1d: #1d1d1d; 
    --grey-22: #222222; 
    --grey-24: #242424;
    --grey-a0: #a0a0a0;
  }
  @document domain(github.com), domain(gist.github.com) {

  }
  @document domain(developer.github.com) {

  }
  @document domain(help.github.com) {

  }  
}

[Mottie]

I actually started trying out something similar... I split up the @document into separate files.. we can combine them in a build process.

variables.css

/* GitHub */
:root {
  /* Accent base color (links & highlights) */
  --base-color: #4183c4;
  --base-color-text: #e2e2e2; /* text for a base-color background */

  /* body */
  --body-background-color: #222;
  --body-text-color: #ddd;
  --body-background-image:  url("data:image/png;base64,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");
  --body-background-attach: fixed;

  /* borders */
  --border-base: #343434;

  /* code */
  --code-font: Menlo;
  --code-tabs-size: 4;
  --code-syntax-theme: Twilight;

  /* presets */
  --color-dark-1: #181818;
  --color-dark-2: #222;
  --color-dark-3: #343434;
  --color-dark-4: #444;
  --color-dark-5: #555;

  --color-light-f: #fff;
  --color-light-e: #e2e2e2;
  --color-light-d: #ddd;
  --color-light-c: #ccc;
  --color-light-b: #bbb;
}

main.css

body {
  background-color: var(--body-background-color) !important;
  background-image: var(--body-background-image) !important;
  background-attachment: var(--body-background-attach) !important;
  background-clip: border-box !important;
  background-origin: padding-box !important;
  color: var(--body-text-color) !important;
}

/* code font */
pre, code {
  font-family: var(--code-font), Consolas, "Liberation Mono", Menlo, Courier,
    monospace !important;
}

/* accent color */
a, .link-blue, .header a:hover {
  color: var(--base-color) !important;
}
.form-control.focus, .form-control:focus, .form-select.focus,
.form-select:focus {
  border-color: var(--base-color) !important;
  outline-color: var(--base-color) !important;
}

/* headers & panels */
.header, .dropdown-menu {
  background: var(--color-dark-1) !important;
  border-color: var(--color-dark-3) !important;
}
.header a {
  color: var(--color-light-b) !important;
}

/* arrows - down */
.dropdown-caret {
    border-top-color: var(--color-dark-b) !important;
}
/* arrows - up */
.dropdown-menu:before, .dropdown-menu:after  {
    border-bottom-color: var(--color-dark-b) !important;
}

/* inputs */
.form-control, .form-select {
    background-color: var(--color-dark-1) !important;
  border-color: var(--color-dark-3) !important;
  color: var(--color-light-e) !important;
}

svg.octicon {
  fill: currentColor !important;
  overflow: visible !important;
}

template.css

@-moz-document regexp("^https?://((raw|status|developer)\.)?github\.com((?!generated_pages\/preview).)*$"), domain("githubusercontent.com") {
  /*! Github Dark Theme v2.0.0 (9/14/2016) *//*
 * https://github.com/StylishThemes/GitHub-Dark
 * http://userstyles.org/styles/37035
 * License: https://creativecommons.org/licenses/by-sa/4.0/
 */
  /* AGENT_SHEET */
 ${main}
}

@-moz-document domain("gist.github.com") {
 ${gist}
}

@-moz-document domain("guides.github.com") {
  ${guides}
}

@-moz-document domain("help.github.com") {
  ${help}
}

@-moz-document domain("status.github.com") {
  ${status}
}

@-moz-document domain("developer.github.com") {
  ${developer}
}

[silverwind]

There's a maintainability issue with colors like

  --color-dark-1: #181818;
  --color-dark-2: #222;
  --color-dark-3: #343434;
  --color-dark-4: #444;
  --color-dark-5: #555;

Say, you'd like to add a shade 1 and 2, now you have to rename shades from 2 til the end to stay consistent. My approach above might be a bit easier to handle.

build process

I'd like to avoid a build process if possible. It's just so convenient to copy/paste a style as-is from the editor and unfortunately necessary as one can't interface with Stylish through other means 😢.

[Mottie]

I mention a build process because Chrome handles the style differently than Firefox. It splits each @-moz-document into separate sections so having separate files would make it easier for me to copy/paste 😉.

It's fine though since I use the script a lot more, it's just a bit more painful on developer.github.com since the settings panel doesn't open... hmm, I guess I could fix that LOL.

[Mottie]

@silverwind I'd like to post my preliminary work - only the main repo page has been done so far. Before continuing, I'd thought some discussion would be best.

Would you prefer to create a branch here, or a new temporary repo?

[silverwind]

@Mottie I think a separate repo might be easier to work with, call it New-GitHub-Dark or something 😉. We can merge back once it's ready.

[silverwind]

So as for separate stylesheets, there's at least:

• frameworks-{hash}.css (which frameworks?)
• github-{hash}.css (main site and gist)
• gist-{hash}.css (gist only)
• ipynb-{hash}.css (jupyter stuff on both gist and main site)
• application.css (help)
• application.css (developer)

From that, you can see that there are shared styles. E.g. gist uses stuff from the github sheet, both gist and github use stuff from ipynb. Shared stuff like that can't be scoped in regexp blocks, so I guess we'd need to have them outside those blocks.

[Mottie]

Good idea. I've used that method in the new repo... let's move this discussion over there: StylishThemes/New-GitHub-Dark#1