New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme discussion #197

Closed
Mottie opened this Issue Nov 12, 2014 · 67 comments

Comments

Projects
None yet
3 participants
@Mottie
Member

Mottie commented Nov 12, 2014

It appears that GitHub is no longer using Pygments to format and style code.

Hopefully, it won't be too long before we'll be able to support all the syntax highlighting themes again.

@Mottie Mottie added the github :octocat: label Nov 12, 2014

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 12, 2014

Member

Well, the wiki pages are still using Pygments. So now GitHub has three different syntax highlighting systems in use.

Member

Mottie commented Nov 12, 2014

Well, the wiki pages are still using Pygments. So now GitHub has three different syntax highlighting systems in use.

@ddavison

This comment has been minimized.

Show comment
Hide comment
@ddavison

ddavison Nov 12, 2014

Member

lame

Member

ddavison commented Nov 12, 2014

lame

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 12, 2014

Member

Here is the response I got:

Hi Rob-

We're now using the same language grammars used by TextMate, Sublime Text, and Atom to highlight code on github.com. We're working on compiling a list of the exact set of grammars we're using so that people like you can use those same grammars or improve them and hope to have that ready soon. Any library that knows how to handle these grammars (like https://github.com/atom/first-mate) can be used with whatever theme you'd like to achieve similar highlighting.

  • Pygments (only on Wiki pages now)

Can you point out a place where Pygments is still being used? I thought we'd gotten rid of it everywhere.

Let me know if you have any other questions!

Member

Mottie commented Nov 12, 2014

Here is the response I got:

Hi Rob-

We're now using the same language grammars used by TextMate, Sublime Text, and Atom to highlight code on github.com. We're working on compiling a list of the exact set of grammars we're using so that people like you can use those same grammars or improve them and hope to have that ready soon. Any library that knows how to handle these grammars (like https://github.com/atom/first-mate) can be used with whatever theme you'd like to achieve similar highlighting.

  • Pygments (only on Wiki pages now)

Can you point out a place where Pygments is still being used? I thought we'd gotten rid of it everywhere.

Let me know if you have any other questions!

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 12, 2014

Member

I just got word that pygments has been removed from wiki pages now, so it is now completely gone.

I'm still trying to find a source that provides a basic css template...

  • The Atom editor uses class names that do not match GitHub :(

    <span class="source js">
        <span class="punctuation terminator statement js">;</span>
        <span class="meta brace round js">(</span>
        <span class="meta function js">
            <span class="storage type function js">function</span>
            <span class="punctuation definition parameters begin js">(</span>
            <span class="variable parameter function js">$</span>
            <span class="punctuation definition parameters end js">)</span>
        </span>
        <span class="meta brace curly js">{</span>
    </span>
  • Sublime themes are XML files

  • Textmat themes are also XML files

le sigh

Member

Mottie commented Nov 12, 2014

I just got word that pygments has been removed from wiki pages now, so it is now completely gone.

I'm still trying to find a source that provides a basic css template...

  • The Atom editor uses class names that do not match GitHub :(

    <span class="source js">
        <span class="punctuation terminator statement js">;</span>
        <span class="meta brace round js">(</span>
        <span class="meta function js">
            <span class="storage type function js">function</span>
            <span class="punctuation definition parameters begin js">(</span>
            <span class="variable parameter function js">$</span>
            <span class="punctuation definition parameters end js">)</span>
        </span>
        <span class="meta brace curly js">{</span>
    </span>
  • Sublime themes are XML files

  • Textmat themes are also XML files

le sigh

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 13, 2014

Member

When I extract out the css from the GitHub stylesheet, there are a few ace classes mixed in with the new style, so that should help a little.

.ace_editor.ace-github-base16 {
    position:relative;
    font-family:Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size:12px;
    line-height:18px;
    color:#333;
    background-color:#fff;
}
.ace_editor.ace-github-base16 .ace_scroller.ace_scroll-left {
    box-shadow:none;
}
.ace_editor.ace-github-base16.ace_multiselect .ace_selection.ace_start {
    box-shadow:0 0 3px 0 #fff;
    border-radius:2px;
}
.ace_gutter {
    border-right:1px solid #eee;
    background:#fff;
    color:#999999;
}
.ace_print-margin {
    width:1px;
    background:#e8e8e8;
}
.ace_gutter-layer {
    min-width:50px;
}
.ace_cursor {
    color:#000;
}
.ace_multiselect .ace_selection.ace_start {
    border-radius:2px;
    box-shadow:0 0 3px 0 #fff;
}
.ace_nobold .ace_line>span {
    font-weight:normal!important;
}
.ace_marker-layer .ace_selection {
    background-color:#b5d5ff;
}
.ace_marker-layer .ace_step {
    background-color:#fcff00;
}
.ace_marker-layer .ace_stack {
    background-color:#a4e565;
}
.ace_marker-layer .ace_bracket {
    border:1px solid silver;
    margin:-1px 0 0 -1px;
}
.ace_marker-layer .ace_selected-word {
    background-color:#fafaff;
    border:1px solid #c8c8fa;
}
.ace_indent-guide {
    box-shadow:inset -1px 0 0 rgba(0,0,0,0.1);
}
.highlight .pl-c,.highlight .pl-pdc {
    color:#b4b7b4;
    font-style:italic;
}
.highlight .pl-ens,.highlight .pl-eoai,.highlight .pl-kos,.highlight .pl-mh .pl-pdh,
.highlight .pl-mp,.highlight .pl-pde,.highlight .pl-stp {
    color:#458;
}
.highlight .pl-enti {
    color:#d12089;
    font-weight:bold;
}
.highlight .pl-mp1 .pl-sf {
    color:#458;
    font-weight:bold;
}
.highlight .pl-mb,.highlight .pl-pdb {
    color:#df5000;
    font-weight:bold;
}
.highlight .pl-mi,.highlight .pl-pdi {
    color:#6e5494;
    font-style:italic;
}
.highlight .pl-mdh,.highlight .pl-mdi {
    font-weight:bold;
}
.highlight .pl-mdr {
    color:#0086b3;
    font-weight:bold;
}
.highlight .pl-ii {
    background-color:#df5000;
    color:#fff;
}
.highlight .pl-ib {
    background-color:#f93;
}
.highlight .pl-id {
    background-color:#a31515;
    color:#fff;
}
.highlight .pl-iu {
    background-color:#b4b7b4;
}
.highlight .pl-mo {
    color:#969896;
}
.ace-github-base16 {
    background-color:#fff;
    color:#333;
}
.ace_invalid.ace_illegal {
    color:#fff;
    background-color:#df5000;
}
.ace_invalid.ace_deprecated {
    color:#fff;
    background-color:#6e5494;
}
.ace_comment {
    font-style:italic;
    color:#b4b7b4;
}
.ace_marker-layer .ace_active-line,.ace_gutter-active-line,.highlight .pl-ms1 {
    background-color:#f5f5f5;
}
.highlight .pl-coc,.highlight .pl-entl,.highlight .pl-entm,.highlight .pl-eoa,
.highlight .pl-mai .pl-sf,.highlight .pl-mm,.highlight .pl-pdv,.highlight .pl-sc,
.highlight .pl-som,.highlight .pl-sr,.highlight .pl-v,.highlight .pl-vpf,
.ace_support.ace_function {
    color:#0086b3;
}
.highlight .pl-eoac,.highlight .pl-mdht,.highlight .pl-mi1,.highlight .pl-mri,
.highlight .pl-va,.highlight .pl-vpu,.ace_string.ace_regexp,.ace_variable,
.ace_entity.ace_other.ace_attribute-name {
    color:#008080;
}
.highlight .pl-k,.highlight .pl-ko,.highlight .pl-kolp,.highlight .pl-mc,
.highlight .pl-mr,.highlight .pl-ms,.highlight .pl-s,.highlight .pl-sok,
.highlight .pl-st,.ace_constant.ace_numeric,.ace_support.ace_type,.ace_storage,
.ace_meta.ace_selector,.ace_entity.ace_name.ace_function {
    color:#6e5494;
}
.highlight .pl-ef,.highlight .pl-enf,.highlight .pl-enm,.highlight .pl-entc,
.highlight .pl-eoi,.highlight .pl-sf,.highlight .pl-smc,.ace_support.ace_class {
    color:#d12089;
}
.highlight .pl-cce,.highlight .pl-enc,.highlight .pl-kou,.highlight .pl-mq,
.ace_keyword.ace_other.ace_unit,.ace_constant.ace_character.ace_escape {
    color:#f93;
}
.highlight .pl-cos,.highlight .pl-ent,.highlight .pl-md,.highlight .pl-mdhf,
.highlight .pl-ml,.highlight .pl-pdc1,.highlight .pl-pds,.highlight .pl-s1,
.highlight .pl-scp,.highlight .pl-sol,.ace_constant.ace_other.ace_symbol,
.ace_support.ace_constant.ace_property-value,.ace_string,
.ace_entity.ace_name.ace_tag,.ace_markup.ace_list {
    color:#df5000;
}
.highlight .pl-c1,.highlight .pl-cn,.highlight .pl-pse,.highlight .pl-pse .pl-s2,
.highlight .pl-vi,.ace_constant {
    color:#a31515;
}
.highlight .pl-s2,.ace_keyword,.ace_keyword.ace_operator {
    color:#333;
}
Member

Mottie commented Nov 13, 2014

When I extract out the css from the GitHub stylesheet, there are a few ace classes mixed in with the new style, so that should help a little.

.ace_editor.ace-github-base16 {
    position:relative;
    font-family:Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size:12px;
    line-height:18px;
    color:#333;
    background-color:#fff;
}
.ace_editor.ace-github-base16 .ace_scroller.ace_scroll-left {
    box-shadow:none;
}
.ace_editor.ace-github-base16.ace_multiselect .ace_selection.ace_start {
    box-shadow:0 0 3px 0 #fff;
    border-radius:2px;
}
.ace_gutter {
    border-right:1px solid #eee;
    background:#fff;
    color:#999999;
}
.ace_print-margin {
    width:1px;
    background:#e8e8e8;
}
.ace_gutter-layer {
    min-width:50px;
}
.ace_cursor {
    color:#000;
}
.ace_multiselect .ace_selection.ace_start {
    border-radius:2px;
    box-shadow:0 0 3px 0 #fff;
}
.ace_nobold .ace_line>span {
    font-weight:normal!important;
}
.ace_marker-layer .ace_selection {
    background-color:#b5d5ff;
}
.ace_marker-layer .ace_step {
    background-color:#fcff00;
}
.ace_marker-layer .ace_stack {
    background-color:#a4e565;
}
.ace_marker-layer .ace_bracket {
    border:1px solid silver;
    margin:-1px 0 0 -1px;
}
.ace_marker-layer .ace_selected-word {
    background-color:#fafaff;
    border:1px solid #c8c8fa;
}
.ace_indent-guide {
    box-shadow:inset -1px 0 0 rgba(0,0,0,0.1);
}
.highlight .pl-c,.highlight .pl-pdc {
    color:#b4b7b4;
    font-style:italic;
}
.highlight .pl-ens,.highlight .pl-eoai,.highlight .pl-kos,.highlight .pl-mh .pl-pdh,
.highlight .pl-mp,.highlight .pl-pde,.highlight .pl-stp {
    color:#458;
}
.highlight .pl-enti {
    color:#d12089;
    font-weight:bold;
}
.highlight .pl-mp1 .pl-sf {
    color:#458;
    font-weight:bold;
}
.highlight .pl-mb,.highlight .pl-pdb {
    color:#df5000;
    font-weight:bold;
}
.highlight .pl-mi,.highlight .pl-pdi {
    color:#6e5494;
    font-style:italic;
}
.highlight .pl-mdh,.highlight .pl-mdi {
    font-weight:bold;
}
.highlight .pl-mdr {
    color:#0086b3;
    font-weight:bold;
}
.highlight .pl-ii {
    background-color:#df5000;
    color:#fff;
}
.highlight .pl-ib {
    background-color:#f93;
}
.highlight .pl-id {
    background-color:#a31515;
    color:#fff;
}
.highlight .pl-iu {
    background-color:#b4b7b4;
}
.highlight .pl-mo {
    color:#969896;
}
.ace-github-base16 {
    background-color:#fff;
    color:#333;
}
.ace_invalid.ace_illegal {
    color:#fff;
    background-color:#df5000;
}
.ace_invalid.ace_deprecated {
    color:#fff;
    background-color:#6e5494;
}
.ace_comment {
    font-style:italic;
    color:#b4b7b4;
}
.ace_marker-layer .ace_active-line,.ace_gutter-active-line,.highlight .pl-ms1 {
    background-color:#f5f5f5;
}
.highlight .pl-coc,.highlight .pl-entl,.highlight .pl-entm,.highlight .pl-eoa,
.highlight .pl-mai .pl-sf,.highlight .pl-mm,.highlight .pl-pdv,.highlight .pl-sc,
.highlight .pl-som,.highlight .pl-sr,.highlight .pl-v,.highlight .pl-vpf,
.ace_support.ace_function {
    color:#0086b3;
}
.highlight .pl-eoac,.highlight .pl-mdht,.highlight .pl-mi1,.highlight .pl-mri,
.highlight .pl-va,.highlight .pl-vpu,.ace_string.ace_regexp,.ace_variable,
.ace_entity.ace_other.ace_attribute-name {
    color:#008080;
}
.highlight .pl-k,.highlight .pl-ko,.highlight .pl-kolp,.highlight .pl-mc,
.highlight .pl-mr,.highlight .pl-ms,.highlight .pl-s,.highlight .pl-sok,
.highlight .pl-st,.ace_constant.ace_numeric,.ace_support.ace_type,.ace_storage,
.ace_meta.ace_selector,.ace_entity.ace_name.ace_function {
    color:#6e5494;
}
.highlight .pl-ef,.highlight .pl-enf,.highlight .pl-enm,.highlight .pl-entc,
.highlight .pl-eoi,.highlight .pl-sf,.highlight .pl-smc,.ace_support.ace_class {
    color:#d12089;
}
.highlight .pl-cce,.highlight .pl-enc,.highlight .pl-kou,.highlight .pl-mq,
.ace_keyword.ace_other.ace_unit,.ace_constant.ace_character.ace_escape {
    color:#f93;
}
.highlight .pl-cos,.highlight .pl-ent,.highlight .pl-md,.highlight .pl-mdhf,
.highlight .pl-ml,.highlight .pl-pdc1,.highlight .pl-pds,.highlight .pl-s1,
.highlight .pl-scp,.highlight .pl-sol,.ace_constant.ace_other.ace_symbol,
.ace_support.ace_constant.ace_property-value,.ace_string,
.ace_entity.ace_name.ace_tag,.ace_markup.ace_list {
    color:#df5000;
}
.highlight .pl-c1,.highlight .pl-cn,.highlight .pl-pse,.highlight .pl-pse .pl-s2,
.highlight .pl-vi,.ace_constant {
    color:#a31515;
}
.highlight .pl-s2,.ace_keyword,.ace_keyword.ace_operator {
    color:#333;
}
@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 13, 2014

Member

I may have a look at fixing together a default theme if no one else does. Are you ok with base-16 dark as the default, or shall I use our old default theme?

Member

silverwind commented Nov 13, 2014

I may have a look at fixing together a default theme if no one else does. Are you ok with base-16 dark as the default, or shall I use our old default theme?

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 13, 2014

Member

Here's it, only change I'd do is a #181818 background:

Member

silverwind commented Nov 13, 2014

Here's it, only change I'd do is a #181818 background:

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 13, 2014

Member

Here's how base16 default dark look in sublime:

2

And this is my current sublime theme, a variation of Birds of Paradise:

1

I know I'm probably biased towards my own theme, but If you're ok with me adding it, I'd go for it (and do a few tweaks to it). Otherwise, I'm fine with base-16 or our old default theme too.

Member

silverwind commented Nov 13, 2014

Here's how base16 default dark look in sublime:

2

And this is my current sublime theme, a variation of Birds of Paradise:

1

I know I'm probably biased towards my own theme, but If you're ok with me adding it, I'd go for it (and do a few tweaks to it). Otherwise, I'm fine with base-16 or our old default theme too.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 13, 2014

Member

Sure, add away! I set up the grunt build to accept a "default" ace setting and basically not add an Ace editor theme (updated in the build docs. So it should keep the default styling.


Update: oops, I thought I added it to the build docs. Doing that now.

Member

Mottie commented Nov 13, 2014

Sure, add away! I set up the grunt build to accept a "default" ace setting and basically not add an Ace editor theme (updated in the build docs. So it should keep the default styling.


Update: oops, I thought I added it to the build docs. Doing that now.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 13, 2014

Member

Damn, Ace highlights different things than the site code viewer. This will be a PITA. :(

Member

silverwind commented Nov 13, 2014

Damn, Ace highlights different things than the site code viewer. This will be a PITA. :(

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 13, 2014

Member

I think I'll just get a (probably buggy) twilight out for now. If you're still in contact with GH: Ask them if they have a list on what the class-names in the styles signify. It's quite confusing on first look.

Member

silverwind commented Nov 13, 2014

I think I'll just get a (probably buggy) twilight out for now. If you're still in contact with GH: Ask them if they have a list on what the class-names in the styles signify. It's quite confusing on first look.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 13, 2014

Member

Sorry, I forgot to check my email. This is the response I got... darn, no comments 😞

.highlight .pl-coc, .highlight .pl-entl, .highlight .pl-entm, .highlight .pl-eoa,
.highlight .pl-mai .pl-sf, .highlight .pl-mm, .highlight .pl-pdv, .highlight .pl-sc,
.highlight .pl-som, .highlight .pl-sr, .highlight .pl-v, .highlight .pl-vpf {
    color: #0086b3
}

.highlight .pl-eoac, .highlight .pl-mdht, .highlight .pl-mi1, .highlight .pl-mri,
.highlight .pl-va, .highlight .pl-vpu {
    color: #008080
}

.highlight .pl-c, .highlight .pl-pdc {
    color: #b4b7b4;
    font-style: italic
}

.highlight .pl-k, .highlight .pl-ko, .highlight .pl-kolp, .highlight .pl-mc,
.highlight .pl-mr, .highlight .pl-ms, .highlight .pl-s, .highlight .pl-sok,
.highlight .pl-st {
    color: #6e5494
}

.highlight .pl-ef, .highlight .pl-enf, .highlight .pl-enm, .highlight .pl-entc,
.highlight .pl-eoi, .highlight .pl-sf, .highlight .pl-smc {
    color: #d12089
}

.highlight .pl-ens, .highlight .pl-eoai, .highlight .pl-kos, .highlight .pl-mh .pl-pdh,
.highlight .pl-mp, .highlight .pl-pde, .highlight .pl-stp {
    color: #458
}

.highlight .pl-enti {
    color: #d12089;
    font-weight: bold
}

.highlight .pl-cce, .highlight .pl-enc, .highlight .pl-kou, .highlight .pl-mq {
    color: #f93
}

.highlight .pl-mp1 .pl-sf {
    color: #458;
    font-weight: bold
}

.highlight .pl-cos, .highlight .pl-ent, .highlight .pl-md, .highlight .pl-mdhf,
.highlight .pl-ml, .highlight .pl-pdc1, .highlight .pl-pds, .highlight .pl-s1,
.highlight .pl-scp, .highlight .pl-sol {
    color: #df5000
}

.highlight .pl-c1, .highlight .pl-cn, .highlight .pl-pse, .highlight .pl-pse .pl-s2,
.highlight .pl-vi {
    color: #a31515
}

.highlight .pl-mb, .highlight .pl-pdb {
    color: #df5000;
    font-weight: bold
}

.highlight .pl-mi, .highlight .pl-pdi {
    color: #6e5494;
    font-style: italic
}

.highlight .pl-ms1 {
    background-color: #f5f5f5
}

.highlight .pl-mdh, .highlight .pl-mdi {
    font-weight: bold
}

.highlight .pl-mdr {
    color: #0086b3;
    font-weight: bold
}

.highlight .pl-s2 {
    color: #333
}

.highlight .pl-ii {
    background-color: #df5000;
    color: #fff
}

.highlight .pl-ib {
    background-color: #f93
}

.highlight .pl-id {
    background-color: #a31515;
    color: #fff
}

.highlight .pl-iu {
    background-color: #b4b7b4
}

.highlight .pl-mo {
    color: #969896
}
Member

Mottie commented Nov 13, 2014

Sorry, I forgot to check my email. This is the response I got... darn, no comments 😞

.highlight .pl-coc, .highlight .pl-entl, .highlight .pl-entm, .highlight .pl-eoa,
.highlight .pl-mai .pl-sf, .highlight .pl-mm, .highlight .pl-pdv, .highlight .pl-sc,
.highlight .pl-som, .highlight .pl-sr, .highlight .pl-v, .highlight .pl-vpf {
    color: #0086b3
}

.highlight .pl-eoac, .highlight .pl-mdht, .highlight .pl-mi1, .highlight .pl-mri,
.highlight .pl-va, .highlight .pl-vpu {
    color: #008080
}

.highlight .pl-c, .highlight .pl-pdc {
    color: #b4b7b4;
    font-style: italic
}

.highlight .pl-k, .highlight .pl-ko, .highlight .pl-kolp, .highlight .pl-mc,
.highlight .pl-mr, .highlight .pl-ms, .highlight .pl-s, .highlight .pl-sok,
.highlight .pl-st {
    color: #6e5494
}

.highlight .pl-ef, .highlight .pl-enf, .highlight .pl-enm, .highlight .pl-entc,
.highlight .pl-eoi, .highlight .pl-sf, .highlight .pl-smc {
    color: #d12089
}

.highlight .pl-ens, .highlight .pl-eoai, .highlight .pl-kos, .highlight .pl-mh .pl-pdh,
.highlight .pl-mp, .highlight .pl-pde, .highlight .pl-stp {
    color: #458
}

.highlight .pl-enti {
    color: #d12089;
    font-weight: bold
}

.highlight .pl-cce, .highlight .pl-enc, .highlight .pl-kou, .highlight .pl-mq {
    color: #f93
}

.highlight .pl-mp1 .pl-sf {
    color: #458;
    font-weight: bold
}

.highlight .pl-cos, .highlight .pl-ent, .highlight .pl-md, .highlight .pl-mdhf,
.highlight .pl-ml, .highlight .pl-pdc1, .highlight .pl-pds, .highlight .pl-s1,
.highlight .pl-scp, .highlight .pl-sol {
    color: #df5000
}

.highlight .pl-c1, .highlight .pl-cn, .highlight .pl-pse, .highlight .pl-pse .pl-s2,
.highlight .pl-vi {
    color: #a31515
}

.highlight .pl-mb, .highlight .pl-pdb {
    color: #df5000;
    font-weight: bold
}

.highlight .pl-mi, .highlight .pl-pdi {
    color: #6e5494;
    font-style: italic
}

.highlight .pl-ms1 {
    background-color: #f5f5f5
}

.highlight .pl-mdh, .highlight .pl-mdi {
    font-weight: bold
}

.highlight .pl-mdr {
    color: #0086b3;
    font-weight: bold
}

.highlight .pl-s2 {
    color: #333
}

.highlight .pl-ii {
    background-color: #df5000;
    color: #fff
}

.highlight .pl-ib {
    background-color: #f93
}

.highlight .pl-id {
    background-color: #a31515;
    color: #fff
}

.highlight .pl-iu {
    background-color: #b4b7b4
}

.highlight .pl-mo {
    color: #969896
}
@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 13, 2014

Member

That's what I have extracted from their sheet too. The sheer amount of different classes is puzzling.

Member

silverwind commented Nov 13, 2014

That's what I have extracted from their sheet too. The sheer amount of different classes is puzzling.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 13, 2014

Member

As for Twilight: CSS is reasonably close to Ace now, JS should be almost perfect, except maybe some ES6 features. Overall I'm thinking we need some kind of converter for future themes.

Member

silverwind commented Nov 13, 2014

As for Twilight: CSS is reasonably close to Ace now, JS should be almost perfect, except maybe some ES6 features. Overall I'm thinking we need some kind of converter for future themes.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 14, 2014

Member

YAY, I got an email with the theme and comments!!!1

.pl-coc        /* constant.other.color */,
.pl-entl       /* entity.name.tag.label */,
.pl-entm       /* entity.name.type.module */,
.pl-eoa        /* entity.other.attribute-name */,
.pl-mai .pl-sf /* meta.at-rule.include support.function */,
.pl-mm         /* meta.module-reference */,
.pl-pdv        /* punctuation.definition.variable */,
.pl-sc         /* support.class */,
.pl-som        /* support.other.module */,
.pl-sr         /* string.regexp */,
.pl-v          /* variable */,
.pl-vpf        /* variable.parameter.function */ {
  color: $base0c;
}

.pl-eoac /* entity.other.attribute-name.class */,
.pl-mdht /* meta.diff.header.to-file */,
.pl-mi1  /* markup.inserted */,
.pl-mri  /* markup.raw.inline */,
.pl-va   /* variable.assignment */,
.pl-vpu  /* variable.parameter.url */ {
  color: $base0b;
}

.pl-c   /* comment */,
.pl-pdc /* punctuation.definition.comment */ {
  color: $base04;
  font-style: italic;
}

.pl-k    /* keyword */,
.pl-ko   /* keyword.operator */,
.pl-kolp /* keyword.operator.logical.python */,
.pl-mc   /* markup.changed */,
.pl-mr   /* meta.require */,
.pl-ms   /* meta.selector */,
.pl-s    /* storage */,
.pl-sok  /* support.other.keyword */,
.pl-st   /* support.type */ {
  color: $base0e;
}

.pl-ef   /* entity.function */,
.pl-enf  /* entity.name.function */,
.pl-enm  /* entity.name.method-name */,
.pl-entc /* entity.name.type.class */,
.pl-eoi  /* entity.other.inherited-class */,
.pl-sf   /* support.function */,
.pl-smc  /* storage.modifier.c */ {
  color: $base0a;
}

.pl-ens        /* entity.name.section */,
.pl-eoai       /* entity.other.attribute-name.id */,
.pl-kos        /* keyword.other.special-method */,
.pl-mh .pl-pdh /* markup.heading punctuation.definition.heading */,
.pl-mp         /* meta.property-name */,
.pl-pde        /* punctuation.definition.entity */,
.pl-stp        /* support.type.property-name */ {
  color: $base0d;
}

.pl-enti /* entity.name.type.instance */ {
  color: $base0a;
  font-weight: bold;
}

.pl-cce /* constant.character.escape */,
.pl-enc /* entity.name.class */,
.pl-kou /* keyword.other.unit */,
.pl-mq  /* markup.quote */ {
  color: $base09;
}

.pl-mp1 .pl-sf /* meta.property-value support.function */ {
  color: $base0d;
  font-weight: bold;
}

.pl-cos  /* constant.other.symbol */,
.pl-ent  /* entity.name.tag */,
.pl-md   /* markup.deleted */,
.pl-mdhf /* meta.diff.header.from-file */,
.pl-ml   /* markup.list */,
.pl-pdc1 /* punctuation.definition.constant */,
.pl-pds  /* punctuation.definition.string */,
.pl-s1   /* string */,
.pl-scp  /* support.constant.property-value */,
.pl-sol  /* string.other.link */ {
  color: $base08;
}

.pl-c1         /* constant */,
.pl-cn         /* constant.numeric */,
.pl-pse        /* punctuation.section.embedded */,
.pl-pse .pl-s2 /* punctuation.section.embedded source */,
.pl-vi         /* variable.interpolation */ {
  color: $base0f;
}

.pl-mb  /* markup.bold */,
.pl-pdb /* punctuation.definition.bold */ {
  color: $base08;
  font-weight: bold;
}

.pl-mi  /* markup.italic */,
.pl-pdi /* punctuation.definition.italic */ {
  color: $base0e;
  font-style: italic;
}

.pl-ms1 /* meta.separator */ {
  background-color: $base06;
}

.pl-mdh /* meta.diff.header */,
.pl-mdi /* meta.diff.index */ {
  font-weight: bold;
}

.pl-mdr /* meta.diff.range */ {
  color: $base0c;
  font-weight: bold;
}

.pl-s2 /* source */ {
  color: $base00;
}

.pl-ii /* invalid.illegal */ {
  background-color: $base08;
  color: $base07;
}

.pl-ib /* invalid.broken */ {
  background-color: $base09;
}

.pl-id /* invalid.deprecated */ {
  background-color: $base0f;
  color: $base07;
}

.pl-iu /* invalid.unimplemented */ {
  background-color: $base04;
}

.pl-mo /* meta.output */ {
  color: $base03;
}
Member

Mottie commented Nov 14, 2014

YAY, I got an email with the theme and comments!!!1

.pl-coc        /* constant.other.color */,
.pl-entl       /* entity.name.tag.label */,
.pl-entm       /* entity.name.type.module */,
.pl-eoa        /* entity.other.attribute-name */,
.pl-mai .pl-sf /* meta.at-rule.include support.function */,
.pl-mm         /* meta.module-reference */,
.pl-pdv        /* punctuation.definition.variable */,
.pl-sc         /* support.class */,
.pl-som        /* support.other.module */,
.pl-sr         /* string.regexp */,
.pl-v          /* variable */,
.pl-vpf        /* variable.parameter.function */ {
  color: $base0c;
}

.pl-eoac /* entity.other.attribute-name.class */,
.pl-mdht /* meta.diff.header.to-file */,
.pl-mi1  /* markup.inserted */,
.pl-mri  /* markup.raw.inline */,
.pl-va   /* variable.assignment */,
.pl-vpu  /* variable.parameter.url */ {
  color: $base0b;
}

.pl-c   /* comment */,
.pl-pdc /* punctuation.definition.comment */ {
  color: $base04;
  font-style: italic;
}

.pl-k    /* keyword */,
.pl-ko   /* keyword.operator */,
.pl-kolp /* keyword.operator.logical.python */,
.pl-mc   /* markup.changed */,
.pl-mr   /* meta.require */,
.pl-ms   /* meta.selector */,
.pl-s    /* storage */,
.pl-sok  /* support.other.keyword */,
.pl-st   /* support.type */ {
  color: $base0e;
}

.pl-ef   /* entity.function */,
.pl-enf  /* entity.name.function */,
.pl-enm  /* entity.name.method-name */,
.pl-entc /* entity.name.type.class */,
.pl-eoi  /* entity.other.inherited-class */,
.pl-sf   /* support.function */,
.pl-smc  /* storage.modifier.c */ {
  color: $base0a;
}

.pl-ens        /* entity.name.section */,
.pl-eoai       /* entity.other.attribute-name.id */,
.pl-kos        /* keyword.other.special-method */,
.pl-mh .pl-pdh /* markup.heading punctuation.definition.heading */,
.pl-mp         /* meta.property-name */,
.pl-pde        /* punctuation.definition.entity */,
.pl-stp        /* support.type.property-name */ {
  color: $base0d;
}

.pl-enti /* entity.name.type.instance */ {
  color: $base0a;
  font-weight: bold;
}

.pl-cce /* constant.character.escape */,
.pl-enc /* entity.name.class */,
.pl-kou /* keyword.other.unit */,
.pl-mq  /* markup.quote */ {
  color: $base09;
}

.pl-mp1 .pl-sf /* meta.property-value support.function */ {
  color: $base0d;
  font-weight: bold;
}

.pl-cos  /* constant.other.symbol */,
.pl-ent  /* entity.name.tag */,
.pl-md   /* markup.deleted */,
.pl-mdhf /* meta.diff.header.from-file */,
.pl-ml   /* markup.list */,
.pl-pdc1 /* punctuation.definition.constant */,
.pl-pds  /* punctuation.definition.string */,
.pl-s1   /* string */,
.pl-scp  /* support.constant.property-value */,
.pl-sol  /* string.other.link */ {
  color: $base08;
}

.pl-c1         /* constant */,
.pl-cn         /* constant.numeric */,
.pl-pse        /* punctuation.section.embedded */,
.pl-pse .pl-s2 /* punctuation.section.embedded source */,
.pl-vi         /* variable.interpolation */ {
  color: $base0f;
}

.pl-mb  /* markup.bold */,
.pl-pdb /* punctuation.definition.bold */ {
  color: $base08;
  font-weight: bold;
}

.pl-mi  /* markup.italic */,
.pl-pdi /* punctuation.definition.italic */ {
  color: $base0e;
  font-style: italic;
}

.pl-ms1 /* meta.separator */ {
  background-color: $base06;
}

.pl-mdh /* meta.diff.header */,
.pl-mdi /* meta.diff.index */ {
  font-weight: bold;
}

.pl-mdr /* meta.diff.range */ {
  color: $base0c;
  font-weight: bold;
}

.pl-s2 /* source */ {
  color: $base00;
}

.pl-ii /* invalid.illegal */ {
  background-color: $base08;
  color: $base07;
}

.pl-ib /* invalid.broken */ {
  background-color: $base09;
}

.pl-id /* invalid.deprecated */ {
  background-color: $base0f;
  color: $base07;
}

.pl-iu /* invalid.unimplemented */ {
  background-color: $base04;
}

.pl-mo /* meta.output */ {
  color: $base03;
}
@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 14, 2014

Member

Nice! Based on that, one could probably write an converter from pygments or whatever is the most popular syntax system (tmtheme?).

Member

silverwind commented Nov 14, 2014

Nice! Based on that, one could probably write an converter from pygments or whatever is the most popular syntax system (tmtheme?).

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 14, 2014

Member

I'm not sure I'd know how to write something to covert the themes...

I think vim themes might be even more popular. Maybe we should worry about converting pygments themes, but instead find something out there similar to the new system to make converting easier.

Member

Mottie commented Nov 14, 2014

I'm not sure I'd know how to write something to covert the themes...

I think vim themes might be even more popular. Maybe we should worry about converting pygments themes, but instead find something out there similar to the new system to make converting easier.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 14, 2014

Member

By the way, it seems Gist still uses Pygments. See the dark IP here. You might want to ask them about that again :)

Member

silverwind commented Nov 14, 2014

By the way, it seems Gist still uses Pygments. See the dark IP here. You might want to ask them about that again :)

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 14, 2014

Member

Reported... they are in the process of removing it from there.

Ok, so here is the combined ace & new theme with comments

.ace_editor {
  color: #333 !important;
  background-color: #fff !important;
}
.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0 #fff !important;
}
.ace_gutter {
  border-right: 1px solid #eee !important;
  background: #fff !important;
  color: #999999 !important;
}
.ace_print-margin {
  background: #e8e8e8 !important;
}
.ace_cursor {
  color: #000 !important;
}
.ace_marker-layer .ace_selection {
  background-color: #b5d5ff !important;
}
.ace_marker-layer .ace_step {
  background-color: #fcff00 !important;
}
.ace_marker-layer .ace_stack {
  background-color: #a4e565 !important;
}
.ace_marker-layer .ace_bracket {
  border: 1px solid silver !important;
}
.ace_marker-layer .ace_selected-word {
  background-color: #fafaff !important;
  border: 1px solid #c8c8fa !important;
}
.ace_indent-guide {
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.1) !important;
}

/* == $base00 == */
.highlight .pl-s2 /* source */,
.ace_keyword,
.ace_keyword.ace_operator {
  color: #333 !important;
}

/* == $base03 == */
.highlight .pl-mo /* meta.output */ {
  color: #969896 !important;
}

/* == $base04 == */
.highlight .pl-c   /* comment */,
.highlight .pl-pdc /* punctuation.definition.comment */,
.ace_comment {
  color: #b4b7b4 !important;
  font-style: italic !important;
}
.highlight .pl-iu /* invalid.unimplemented */ {
  background-color: #b4b7b4 !important;
}

/* == $base06 == */
.ace_marker-layer .ace_active-line,
.ace_gutter-active-line,
.highlight .pl-ms1 /* meta.separator */ {
  background-color: #f5f5f5 !important;
}

/* == $base07 == (text color in $base08 & $base0f) */

/* == $base08 == */
.highlight .pl-cos  /* constant.other.symbol */,
.highlight .pl-ent  /* entity.name.tag */,
.highlight .pl-md   /* markup.deleted */,
.highlight .pl-mdhf /* meta.diff.header.from-file */,
.highlight .pl-ml   /* markup.list */,
.highlight .pl-pdc1 /* punctuation.definition.constant */,
.highlight .pl-pds  /* punctuation.definition.string */,
.highlight .pl-s1   /* string */,
.highlight .pl-scp  /* support.constant.property-value */,
.highlight .pl-sol  /* string.other.link */,
.ace_constant.ace_other.ace_symbol,
.ace_support.ace_constant.ace_property-value,
.ace_string,
.ace_entity.ace_name.ace_tag,
.ace_markup.ace_list {
  color: #df5000 !important;
}
.highlight .pl-mb  /* markup.bold */,
.highlight .pl-pdb /* punctuation.definition.bold */ {
  color: #df5000 !important;
  font-weight: bold !important;
}
.highlight .pl-ii /* invalid.illegal */,
.ace_invalid.ace_illegal {
  background-color: #df5000 !important;
  color: #fff !important; /* == $base07 == */
}

/* == $base09 == */
.highlight .pl-cce /* constant.character.escape */,
.highlight .pl-enc /* entity.name.class */,
.highlight .pl-kou /* keyword.other.unit */,
.highlight .pl-mq  /* markup.quote */,
.ace_keyword.ace_other.ace_unit,
.ace_constant.ace_character.ace_escape {
  color: #f93 !important;
}
.highlight .pl-ib /* invalid.broken */ {
  background-color: #f93 !important;
}

/* == $base0a == */
.highlight .pl-ef   /* entity.function */,
.highlight .pl-enf  /* entity.name.function */,
.highlight .pl-enm  /* entity.name.method-name */,
.highlight .pl-entc /* entity.name.type.class */,
.highlight .pl-eoi  /* entity.other.inherited-class */,
.highlight .pl-sf   /* support.function */,
.highlight .pl-smc  /* storage.modifier.c */,
.ace_support.ace_class {
  color: #d12089 !important;
}
.highlight .pl-enti /* entity.name.type.instance */ {
  color: #d12089 !important;
  font-weight: bold !important;
}

/* == $base0b == */
.highlight .pl-eoac /* entity.other.attribute-name.class */,
.highlight .pl-mdht /* meta.diff.header.to-file */,
.highlight .pl-mi1  /* markup.inserted */,
.highlight .pl-mri  /* markup.raw.inline */,
.highlight .pl-va   /* variable.assignment */,
.highlight .pl-vpu  /* variable.parameter.url */,
.ace_string.ace_regexp,
.ace_variable,
.ace_entity.ace_other.ace_attribute-name {
  color: #008080 !important;
}

/* == $base0c == */
.highlight .pl-coc    /* constant.other.color */,
.highlight .pl-entl     /* entity.name.tag.label */,
.highlight .pl-entm     /* entity.name.type.module */,
.highlight .pl-eoa    /* entity.other.attribute-name */,
.highlight .pl-mai .pl-sf /* meta.at-rule.include support.function */,
.highlight .pl-mm     /* meta.module-reference */,
.highlight .pl-pdv    /* punctuation.definition.variable */,
.highlight .pl-sc     /* support.class */,
.highlight .pl-som    /* support.other.module */,
.highlight .pl-sr     /* string.regexp */,
.highlight .pl-v      /* variable */,
.highlight .pl-vpf    /* variable.parameter.function */,
.ace_support.ace_function {
  color: #0086b3 !important;
}
.highlight .pl-mdr /* meta.diff.range */ {
  color: #0086b3 !important;
  font-weight: bold !important;
}

/* == $base0d == */
.highlight .pl-ens    /* entity.name.section */,
.highlight .pl-eoai     /* entity.other.attribute-name.id */,
.highlight .pl-kos    /* keyword.other.special-method */,
.highlight .pl-mh .pl-pdh /* markup.heading punctuation.definition.heading */,
.highlight .pl-mp     /* meta.property-name */,
.highlight .pl-pde    /* punctuation.definition.entity */,
.highlight .pl-stp    /* support.type.property-name */ {
  color: #458 !important;
}
.highlight .pl-mp1 .pl-sf /* meta.property-value support.function */ {
  color: #458 !important;
  font-weight: bold !important;
}

/* == $base0e == */
.highlight .pl-k  /* keyword */,
.highlight .pl-ko   /* keyword.operator */,
.highlight .pl-kolp /* keyword.operator.logical.python */,
.highlight .pl-mc   /* markup.changed */,
.highlight .pl-mr   /* meta.require */,
.highlight .pl-ms   /* meta.selector */,
.highlight .pl-s  /* storage */,
.highlight .pl-sok  /* support.other.keyword */,
.highlight .pl-st,  /* support.type */,
.ace_constant.ace_numeric,
.ace_support.ace_type,
.ace_storage,
.ace_meta.ace_selector,
.ace_entity.ace_name.ace_function {
  color: #6e5494 !important;
}
.highlight .pl-mi  /* markup.italic */,
.highlight .pl-pdi /* punctuation.definition.italic */ {
  color: #6e5494 !important;
  font-style: italic !important;
}
.ace_invalid.ace_deprecated {
  color: #fff !important;
  background-color: #6e5494 !important;
}

/* == $base0f == */
.highlight .pl-c1     /* constant */,
.highlight .pl-cn     /* constant.numeric */,
.highlight .pl-pse    /* punctuation.section.embedded */,
.highlight .pl-pse .pl-s2 /* punctuation.section.embedded source */,
.highlight .pl-vi     /* variable.interpolation */
.ace_constant {
  color: #a31515 !important;
}
.highlight .pl-id /* invalid.deprecated */ {
  background-color: #a31515 !important;
  color: #fff !important; /* == $base07 == */
}

/* non-color styling - removable? */
.ace_editor {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
  font-size: 12px !important;
  line-height: 18px !important;
}
.ace_editor .ace_scroller.ace_scroll-left {
  box-shadow: none !important;
}
.ace_multiselect .ace_selection.ace_start {
  border-radius: 2px !important;
}
.ace_gutter-layer {
  min-width: 50px !important;
}
.ace_marker-layer .ace_bracket {
  margin: -1px 0 0 -1px !important;
}
.ace_nobold .ace_line > span {
  font-weight: normal !important;
}
.ace_print-margin {
  width: 1px !important;
}
.highlight .pl-mdh /* meta.diff.header */,
.highlight .pl-mdi /* meta.diff.index */ {
  font-weight: bold !important;
}

Update: I removed the .github-base-16 class since .ace_editor with an !important flag should override any settings.

Update 2: Grouped similar colors and moved non-color styling css to the bottom.

Member

Mottie commented Nov 14, 2014

Reported... they are in the process of removing it from there.

Ok, so here is the combined ace & new theme with comments

.ace_editor {
  color: #333 !important;
  background-color: #fff !important;
}
.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0 #fff !important;
}
.ace_gutter {
  border-right: 1px solid #eee !important;
  background: #fff !important;
  color: #999999 !important;
}
.ace_print-margin {
  background: #e8e8e8 !important;
}
.ace_cursor {
  color: #000 !important;
}
.ace_marker-layer .ace_selection {
  background-color: #b5d5ff !important;
}
.ace_marker-layer .ace_step {
  background-color: #fcff00 !important;
}
.ace_marker-layer .ace_stack {
  background-color: #a4e565 !important;
}
.ace_marker-layer .ace_bracket {
  border: 1px solid silver !important;
}
.ace_marker-layer .ace_selected-word {
  background-color: #fafaff !important;
  border: 1px solid #c8c8fa !important;
}
.ace_indent-guide {
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.1) !important;
}

/* == $base00 == */
.highlight .pl-s2 /* source */,
.ace_keyword,
.ace_keyword.ace_operator {
  color: #333 !important;
}

/* == $base03 == */
.highlight .pl-mo /* meta.output */ {
  color: #969896 !important;
}

/* == $base04 == */
.highlight .pl-c   /* comment */,
.highlight .pl-pdc /* punctuation.definition.comment */,
.ace_comment {
  color: #b4b7b4 !important;
  font-style: italic !important;
}
.highlight .pl-iu /* invalid.unimplemented */ {
  background-color: #b4b7b4 !important;
}

/* == $base06 == */
.ace_marker-layer .ace_active-line,
.ace_gutter-active-line,
.highlight .pl-ms1 /* meta.separator */ {
  background-color: #f5f5f5 !important;
}

/* == $base07 == (text color in $base08 & $base0f) */

/* == $base08 == */
.highlight .pl-cos  /* constant.other.symbol */,
.highlight .pl-ent  /* entity.name.tag */,
.highlight .pl-md   /* markup.deleted */,
.highlight .pl-mdhf /* meta.diff.header.from-file */,
.highlight .pl-ml   /* markup.list */,
.highlight .pl-pdc1 /* punctuation.definition.constant */,
.highlight .pl-pds  /* punctuation.definition.string */,
.highlight .pl-s1   /* string */,
.highlight .pl-scp  /* support.constant.property-value */,
.highlight .pl-sol  /* string.other.link */,
.ace_constant.ace_other.ace_symbol,
.ace_support.ace_constant.ace_property-value,
.ace_string,
.ace_entity.ace_name.ace_tag,
.ace_markup.ace_list {
  color: #df5000 !important;
}
.highlight .pl-mb  /* markup.bold */,
.highlight .pl-pdb /* punctuation.definition.bold */ {
  color: #df5000 !important;
  font-weight: bold !important;
}
.highlight .pl-ii /* invalid.illegal */,
.ace_invalid.ace_illegal {
  background-color: #df5000 !important;
  color: #fff !important; /* == $base07 == */
}

/* == $base09 == */
.highlight .pl-cce /* constant.character.escape */,
.highlight .pl-enc /* entity.name.class */,
.highlight .pl-kou /* keyword.other.unit */,
.highlight .pl-mq  /* markup.quote */,
.ace_keyword.ace_other.ace_unit,
.ace_constant.ace_character.ace_escape {
  color: #f93 !important;
}
.highlight .pl-ib /* invalid.broken */ {
  background-color: #f93 !important;
}

/* == $base0a == */
.highlight .pl-ef   /* entity.function */,
.highlight .pl-enf  /* entity.name.function */,
.highlight .pl-enm  /* entity.name.method-name */,
.highlight .pl-entc /* entity.name.type.class */,
.highlight .pl-eoi  /* entity.other.inherited-class */,
.highlight .pl-sf   /* support.function */,
.highlight .pl-smc  /* storage.modifier.c */,
.ace_support.ace_class {
  color: #d12089 !important;
}
.highlight .pl-enti /* entity.name.type.instance */ {
  color: #d12089 !important;
  font-weight: bold !important;
}

/* == $base0b == */
.highlight .pl-eoac /* entity.other.attribute-name.class */,
.highlight .pl-mdht /* meta.diff.header.to-file */,
.highlight .pl-mi1  /* markup.inserted */,
.highlight .pl-mri  /* markup.raw.inline */,
.highlight .pl-va   /* variable.assignment */,
.highlight .pl-vpu  /* variable.parameter.url */,
.ace_string.ace_regexp,
.ace_variable,
.ace_entity.ace_other.ace_attribute-name {
  color: #008080 !important;
}

/* == $base0c == */
.highlight .pl-coc    /* constant.other.color */,
.highlight .pl-entl     /* entity.name.tag.label */,
.highlight .pl-entm     /* entity.name.type.module */,
.highlight .pl-eoa    /* entity.other.attribute-name */,
.highlight .pl-mai .pl-sf /* meta.at-rule.include support.function */,
.highlight .pl-mm     /* meta.module-reference */,
.highlight .pl-pdv    /* punctuation.definition.variable */,
.highlight .pl-sc     /* support.class */,
.highlight .pl-som    /* support.other.module */,
.highlight .pl-sr     /* string.regexp */,
.highlight .pl-v      /* variable */,
.highlight .pl-vpf    /* variable.parameter.function */,
.ace_support.ace_function {
  color: #0086b3 !important;
}
.highlight .pl-mdr /* meta.diff.range */ {
  color: #0086b3 !important;
  font-weight: bold !important;
}

/* == $base0d == */
.highlight .pl-ens    /* entity.name.section */,
.highlight .pl-eoai     /* entity.other.attribute-name.id */,
.highlight .pl-kos    /* keyword.other.special-method */,
.highlight .pl-mh .pl-pdh /* markup.heading punctuation.definition.heading */,
.highlight .pl-mp     /* meta.property-name */,
.highlight .pl-pde    /* punctuation.definition.entity */,
.highlight .pl-stp    /* support.type.property-name */ {
  color: #458 !important;
}
.highlight .pl-mp1 .pl-sf /* meta.property-value support.function */ {
  color: #458 !important;
  font-weight: bold !important;
}

/* == $base0e == */
.highlight .pl-k  /* keyword */,
.highlight .pl-ko   /* keyword.operator */,
.highlight .pl-kolp /* keyword.operator.logical.python */,
.highlight .pl-mc   /* markup.changed */,
.highlight .pl-mr   /* meta.require */,
.highlight .pl-ms   /* meta.selector */,
.highlight .pl-s  /* storage */,
.highlight .pl-sok  /* support.other.keyword */,
.highlight .pl-st,  /* support.type */,
.ace_constant.ace_numeric,
.ace_support.ace_type,
.ace_storage,
.ace_meta.ace_selector,
.ace_entity.ace_name.ace_function {
  color: #6e5494 !important;
}
.highlight .pl-mi  /* markup.italic */,
.highlight .pl-pdi /* punctuation.definition.italic */ {
  color: #6e5494 !important;
  font-style: italic !important;
}
.ace_invalid.ace_deprecated {
  color: #fff !important;
  background-color: #6e5494 !important;
}

/* == $base0f == */
.highlight .pl-c1     /* constant */,
.highlight .pl-cn     /* constant.numeric */,
.highlight .pl-pse    /* punctuation.section.embedded */,
.highlight .pl-pse .pl-s2 /* punctuation.section.embedded source */,
.highlight .pl-vi     /* variable.interpolation */
.ace_constant {
  color: #a31515 !important;
}
.highlight .pl-id /* invalid.deprecated */ {
  background-color: #a31515 !important;
  color: #fff !important; /* == $base07 == */
}

/* non-color styling - removable? */
.ace_editor {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
  font-size: 12px !important;
  line-height: 18px !important;
}
.ace_editor .ace_scroller.ace_scroll-left {
  box-shadow: none !important;
}
.ace_multiselect .ace_selection.ace_start {
  border-radius: 2px !important;
}
.ace_gutter-layer {
  min-width: 50px !important;
}
.ace_marker-layer .ace_bracket {
  margin: -1px 0 0 -1px !important;
}
.ace_nobold .ace_line > span {
  font-weight: normal !important;
}
.ace_print-margin {
  width: 1px !important;
}
.highlight .pl-mdh /* meta.diff.header */,
.highlight .pl-mdi /* meta.diff.index */ {
  font-weight: bold !important;
}

Update: I removed the .github-base-16 class since .ace_editor with an !important flag should override any settings.

Update 2: Grouped similar colors and moved non-color styling css to the bottom.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 14, 2014

Member

Nice work! What's left to do is look at a few other languages and see if we have to split out any more selectors. I'm doing this by comparing the Ace theme with the Site theme, but I'm not sure if the Ace theme is correct in all cases.

Member

silverwind commented Nov 14, 2014

Nice work! What's left to do is look at a few other languages and see if we have to split out any more selectors. I'm doing this by comparing the Ace theme with the Site theme, but I'm not sure if the Ace theme is correct in all cases.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 14, 2014

Member

I just started manually working on solarized dark to see if things match up... I actually don't think it'll be that bad; unless I had to manually do it all! hehe

Member

Mottie commented Nov 14, 2014

I just started manually working on solarized dark to see if things match up... I actually don't think it'll be that bad; unless I had to manually do it all! hehe

@silverwind silverwind closed this Nov 14, 2014

@silverwind silverwind reopened this Nov 14, 2014

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 14, 2014

Member

I take that back LOL... I have no idea where some of these highlight definitions apply.

Member

Mottie commented Nov 14, 2014

I take that back LOL... I have no idea where some of these highlight definitions apply.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 14, 2014

Member

I think you can use this as a reference. The scopes are the same as in the comments above.

Member

silverwind commented Nov 14, 2014

I think you can use this as a reference. The scopes are the same as in the comments above.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 14, 2014

Member

Thanks, but the issue I'm running into is that the new syntax (and even that textmate XML) has definitions like markup for markup language that don't have a matching style in the Ace editor. Maybe the markup language colors can just be merged into some other ones.

Anyway, I ended up grouping matching colors and moving non-color styles to the bottom... I updated the css in the above comment to keep from filling this issue with huge blocks of css.

Member

Mottie commented Nov 14, 2014

Thanks, but the issue I'm running into is that the new syntax (and even that textmate XML) has definitions like markup for markup language that don't have a matching style in the Ace editor. Maybe the markup language colors can just be merged into some other ones.

Anyway, I ended up grouping matching colors and moving non-color styles to the bottom... I updated the css in the above comment to keep from filling this issue with huge blocks of css.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 15, 2014

Member

I think our best bet now is to release with one or two (if you can finish Solarized) well-tested themes in all three highlighting systems. I think i'd be easier not to merge the selector groups for same color, but instead keep them separate like in the default sheet.

I plan on doing another pass on Twilight in more exotic languages, I'm sure there are a few more bugs.

Member

silverwind commented Nov 15, 2014

I think our best bet now is to release with one or two (if you can finish Solarized) well-tested themes in all three highlighting systems. I think i'd be easier not to merge the selector groups for same color, but instead keep them separate like in the default sheet.

I plan on doing another pass on Twilight in more exotic languages, I'm sure there are a few more bugs.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 15, 2014

Member

I just updated the demo file using the new syntax highlighting classes. And I added an Ace editor example. Maybe that will make it easier to visualize the style.

I need to start over on the solarized dark conversion. I was trying to use the combined classes and I was noticing too many conflicts.

Update: Oh and I moved the previous demo to the archived folder: http://stylishthemes.github.io/GitHub-Dark/archived/

Member

Mottie commented Nov 15, 2014

I just updated the demo file using the new syntax highlighting classes. And I added an Ace editor example. Maybe that will make it easier to visualize the style.

I need to start over on the solarized dark conversion. I was trying to use the combined classes and I was noticing too many conflicts.

Update: Oh and I moved the previous demo to the archived folder: http://stylishthemes.github.io/GitHub-Dark/archived/

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 15, 2014

Member

You can't really get it perfect in all systems, especially Pygments is quite unflexible, especially in JS.

Member

silverwind commented Nov 15, 2014

You can't really get it perfect in all systems, especially Pygments is quite unflexible, especially in JS.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 18, 2014

Member

Seems like something is wrong with our current Twilight style, will investigate.

Member

silverwind commented Nov 18, 2014

Seems like something is wrong with our current Twilight style, will investigate.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 18, 2014

Member

It looks like there are a few new class names... I just found:

  • pl-e
  • pl-en
  • pl-s3
  • pl-sv
  • pl-smi
  • pl-smp
  • pl-stj
  • pl-vo
  • pl-sra
  • pl-sre
  • pl-src

Definitions

.highlight{color:#333;background:#fff}
.pl-c{color:#969896}
.pl-c1,.pl-mdh,.pl-mm,.pl-mp,.pl-mr,.pl-s1 .pl-v,.pl-s3,.pl-sc,.pl-sv{color:#0086b3}
.pl-e,.pl-en{color:#795da3}
.pl-s1 .pl-s2,.pl-smi,.pl-smp,.pl-stj,.pl-vo,.pl-vpf{color:#333}
.pl-ent{color:#63a35c}
.pl-k,.pl-s,.pl-st{color:#a71d5d}
.pl-pds,.pl-s1,.pl-s1 .pl-pse .pl-s2,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre,.pl-src,.pl-v{color:#df5000}
.pl-id{color:#b52a1d}
.pl-ii{background-color:#b52a1d;color:#f8f8f8}
.pl-sr .pl-cce{color:#63a35c;font-weight:bold}
.pl-ml{color:#693a17}
.pl-mh,.pl-mh .pl-en,.pl-ms{color:#1d3e81;font-weight:bold}
.pl-mq{color:#008080}
.pl-mi{color:#333;font-style:italic}
.pl-mb{color:#333;font-weight:bold}
.pl-md,.pl-mdhf{background-color:#ffecec;color:#bd2c00}
.pl-mdht,.pl-mi1{background-color:#eaffea;color:#55a532}
.pl-mdr{color:#795da3;font-weight:bold}
.pl-mo{color:#1d3e81}

Also, .markdown-body .highlight pre in our styling is now making the code in these issues have a background set to #242424 ( removed in eafe641 ).

Member

Mottie commented Nov 18, 2014

It looks like there are a few new class names... I just found:

  • pl-e
  • pl-en
  • pl-s3
  • pl-sv
  • pl-smi
  • pl-smp
  • pl-stj
  • pl-vo
  • pl-sra
  • pl-sre
  • pl-src

Definitions

.highlight{color:#333;background:#fff}
.pl-c{color:#969896}
.pl-c1,.pl-mdh,.pl-mm,.pl-mp,.pl-mr,.pl-s1 .pl-v,.pl-s3,.pl-sc,.pl-sv{color:#0086b3}
.pl-e,.pl-en{color:#795da3}
.pl-s1 .pl-s2,.pl-smi,.pl-smp,.pl-stj,.pl-vo,.pl-vpf{color:#333}
.pl-ent{color:#63a35c}
.pl-k,.pl-s,.pl-st{color:#a71d5d}
.pl-pds,.pl-s1,.pl-s1 .pl-pse .pl-s2,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre,.pl-src,.pl-v{color:#df5000}
.pl-id{color:#b52a1d}
.pl-ii{background-color:#b52a1d;color:#f8f8f8}
.pl-sr .pl-cce{color:#63a35c;font-weight:bold}
.pl-ml{color:#693a17}
.pl-mh,.pl-mh .pl-en,.pl-ms{color:#1d3e81;font-weight:bold}
.pl-mq{color:#008080}
.pl-mi{color:#333;font-style:italic}
.pl-mb{color:#333;font-weight:bold}
.pl-md,.pl-mdhf{background-color:#ffecec;color:#bd2c00}
.pl-mdht,.pl-mi1{background-color:#eaffea;color:#55a532}
.pl-mdr{color:#795da3;font-weight:bold}
.pl-mo{color:#1d3e81}

Also, .markdown-body .highlight pre in our styling is now making the code in these issues have a background set to #242424 ( removed in eafe641 ).

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 19, 2014

Member

CSS selector types (class, id, pseudo) can't be highlighted separately in this new format :( Everything has the same class, .pl-e. Will look at JS/HTML next.

Member

silverwind commented Nov 19, 2014

CSS selector types (class, id, pseudo) can't be highlighted separately in this new format :( Everything has the same class, .pl-e. Will look at JS/HTML next.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 19, 2014

Member

Also, .markdown-body .highlight pre in our styling is now making the code in these issues have a background set to #242424 ( removed in eafe641 ).

Yes, I remember setting this, as GH's default sheet uses slightly brighter than white #F7F7F7 for in-issue code, but #FFF for the regular code view.

Member

silverwind commented Nov 19, 2014

Also, .markdown-body .highlight pre in our styling is now making the code in these issues have a background set to #242424 ( removed in eafe641 ).

Yes, I remember setting this, as GH's default sheet uses slightly brighter than white #F7F7F7 for in-issue code, but #FFF for the regular code view.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 19, 2014

Member

I added a slight border to these code boxes so they are easier to tell apart vom the background.

Member

silverwind commented Nov 19, 2014

I added a slight border to these code boxes so they are easier to tell apart vom the background.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 19, 2014

Member

Here is what the latest css file looks like, with comments:

.pl-c /* comment */ {
  color: #969896;
}

.pl-c1       /* constant */,
.pl-mdh      /* meta.diff.header */,
.pl-mm       /* meta.module-reference */,
.pl-mp       /* meta.property-name */,
.pl-mr       /* markup.raw */,
.pl-s1 .pl-v /* string variable */,
.pl-s3       /* support */,
.pl-sc       /* support.constant */,
.pl-sv       /* support.variable */ {
  color: #0086b3;
}

.pl-e  /* entity */,
.pl-en /* entity.name */ {
  color: #795da3;
}

.pl-s1 .pl-s2 /* string source */,
.pl-smi       /* storage.modifier.import */,
.pl-smp       /* storage.modifier.package */,
.pl-stj       /* storage.type.java */,
.pl-vo        /* variable.other */,
.pl-vpf       /* variable.parameter.function */ {
  color: #333;
}

.pl-ent /* entity.name.tag */ {
  color: #63a35c;
}

.pl-k  /* keyword */,
.pl-s  /* storage */,
.pl-st /* storage.type */ {
  color: #a71d5d;
}

.pl-pds               /* punctuation.definition.string */,
.pl-s1                /* string */,
.pl-s1 .pl-pse .pl-s2 /* string punctuation.section.embedded source */,
.pl-sr                /* string.regexp */,
.pl-sr .pl-cce        /* string.regexp constant.character.escape */,
.pl-sr .pl-sra        /* string.regexp string.regexp.arbitrary-repitition */,
.pl-sr .pl-sre        /* string.regexp source.ruby.embedded */,
.pl-src               /* string.regexp.character-class */,
.pl-v                 /* variable */ {
  color: #df5000;
}

.pl-id /* invalid.deprecated */ {
  color: #b52a1d;
}

.pl-ii /* invalid.illegal */ {
  background-color: #b52a1d;
  color: #f8f8f8;
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
  color: #63a35c;
  font-weight: bold;
}

.pl-ml /* markup.list */ {
  color: #693a17;
}

.pl-mh        /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms        /* meta.separator */ {
  color: #1d3e81;
  font-weight: bold;
}

.pl-mq /* markup.quote */ {
  color: #008080;
}

.pl-mi /* markup.italic */ {
  color: #333;
  font-style: italic;
}

.pl-mb /* markup.bold */ {
  color: #333;
  font-weight: bold;
}

.pl-md   /* markup.deleted */,
.pl-mdhf /* meta.diff.header.from-file */ {
  background-color: #ffecec;
  color: #bd2c00;
}

.pl-mdht /* meta.diff.header.to-file */,
.pl-mi1  /* markup.inserted */ {
  background-color: #eaffea;
  color: #55a532;
}

.pl-mdr /* meta.diff.range */ {
  color: #795da3;
  font-weight: bold;
}

.pl-mo /* meta.output */ {
  color: #1d3e81;
}
Member

Mottie commented Nov 19, 2014

Here is what the latest css file looks like, with comments:

.pl-c /* comment */ {
  color: #969896;
}

.pl-c1       /* constant */,
.pl-mdh      /* meta.diff.header */,
.pl-mm       /* meta.module-reference */,
.pl-mp       /* meta.property-name */,
.pl-mr       /* markup.raw */,
.pl-s1 .pl-v /* string variable */,
.pl-s3       /* support */,
.pl-sc       /* support.constant */,
.pl-sv       /* support.variable */ {
  color: #0086b3;
}

.pl-e  /* entity */,
.pl-en /* entity.name */ {
  color: #795da3;
}

.pl-s1 .pl-s2 /* string source */,
.pl-smi       /* storage.modifier.import */,
.pl-smp       /* storage.modifier.package */,
.pl-stj       /* storage.type.java */,
.pl-vo        /* variable.other */,
.pl-vpf       /* variable.parameter.function */ {
  color: #333;
}

.pl-ent /* entity.name.tag */ {
  color: #63a35c;
}

.pl-k  /* keyword */,
.pl-s  /* storage */,
.pl-st /* storage.type */ {
  color: #a71d5d;
}

.pl-pds               /* punctuation.definition.string */,
.pl-s1                /* string */,
.pl-s1 .pl-pse .pl-s2 /* string punctuation.section.embedded source */,
.pl-sr                /* string.regexp */,
.pl-sr .pl-cce        /* string.regexp constant.character.escape */,
.pl-sr .pl-sra        /* string.regexp string.regexp.arbitrary-repitition */,
.pl-sr .pl-sre        /* string.regexp source.ruby.embedded */,
.pl-src               /* string.regexp.character-class */,
.pl-v                 /* variable */ {
  color: #df5000;
}

.pl-id /* invalid.deprecated */ {
  color: #b52a1d;
}

.pl-ii /* invalid.illegal */ {
  background-color: #b52a1d;
  color: #f8f8f8;
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
  color: #63a35c;
  font-weight: bold;
}

.pl-ml /* markup.list */ {
  color: #693a17;
}

.pl-mh        /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms        /* meta.separator */ {
  color: #1d3e81;
  font-weight: bold;
}

.pl-mq /* markup.quote */ {
  color: #008080;
}

.pl-mi /* markup.italic */ {
  color: #333;
  font-style: italic;
}

.pl-mb /* markup.bold */ {
  color: #333;
  font-weight: bold;
}

.pl-md   /* markup.deleted */,
.pl-mdhf /* meta.diff.header.from-file */ {
  background-color: #ffecec;
  color: #bd2c00;
}

.pl-mdht /* meta.diff.header.to-file */,
.pl-mi1  /* markup.inserted */ {
  background-color: #eaffea;
  color: #55a532;
}

.pl-mdr /* meta.diff.range */ {
  color: #795da3;
  font-weight: bold;
}

.pl-mo /* meta.output */ {
  color: #1d3e81;
}
@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 19, 2014

Member

Nice, exactly what I need. Will add these comments to Twilight later.

Member

silverwind commented Nov 19, 2014

Nice, exactly what I need. Will add these comments to Twilight later.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 20, 2014

Member

Gist now use the new highlighting system, so I think we can safely remove Pygments soon.

Member

silverwind commented Nov 20, 2014

Gist now use the new highlighting system, so I think we can safely remove Pygments soon.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 20, 2014

Member

I fixed up diff file styling in Twilight. I think we should probably move these 4 classes out of the theme section.

  .pl-mi1          { color: #55A532 !important; background: #020 !important; } /* markup.inserted */
  .pl-mdht         { color: #55A532 !important; background: #020 !important; } /* meta.diff.header.to-file */
  .pl-md           { color: #BD2C00 !important; background: #200 !important; } /* markup.deleted */
  .pl-mdhf         { color: #BD2C00 !important; background: #200 !important; } /* meta.diff.header.from-file */

Example diff file here.

Member

silverwind commented Nov 20, 2014

I fixed up diff file styling in Twilight. I think we should probably move these 4 classes out of the theme section.

  .pl-mi1          { color: #55A532 !important; background: #020 !important; } /* markup.inserted */
  .pl-mdht         { color: #55A532 !important; background: #020 !important; } /* meta.diff.header.to-file */
  .pl-md           { color: #BD2C00 !important; background: #200 !important; } /* markup.deleted */
  .pl-mdhf         { color: #BD2C00 !important; background: #200 !important; } /* meta.diff.header.from-file */

Example diff file here.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 21, 2014

Member

Do you want me to move those 4 selectors out of the theme files?

Also, since the last update, the new commented css selector list I got from GitHub is missing a bunch of selectors from the older version. I wonder if they removed, renamed or just missed adding them...

Member

Mottie commented Nov 21, 2014

Do you want me to move those 4 selectors out of the theme files?

Also, since the last update, the new commented css selector list I got from GitHub is missing a bunch of selectors from the older version. I wonder if they removed, renamed or just missed adding them...

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 21, 2014

Member

Do you want me to move those 4 selectors out of the theme files?

Yeah, I think moving them right above "inline code blocks" style would be best.

I wonder if they removed, renamed or just missed adding them...

I guess this is an iteration of them, so might be safe to remove. I just hope these updates don't get too frequent, or it will be a PITA to update all the themes :(

Member

silverwind commented Nov 21, 2014

Do you want me to move those 4 selectors out of the theme files?

Yeah, I think moving them right above "inline code blocks" style would be best.

I wonder if they removed, renamed or just missed adding them...

I guess this is an iteration of them, so might be safe to remove. I just hope these updates don't get too frequent, or it will be a PITA to update all the themes :(

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 21, 2014

Member

On the other hand, no, lets keep the diff styles in theme. I think some themes include these.

Member

silverwind commented Nov 21, 2014

On the other hand, no, lets keep the diff styles in theme. I think some themes include these.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 21, 2014

Member

Ok, sounds good.

Member

Mottie commented Nov 21, 2014

Ok, sounds good.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 21, 2014

Member

Check out how many selectors I ended up commenting out

And I'm not sure about leaving those 4 selectors in the theme file... when I used solarized dark styles along with the same dark background colors you used in twilight

.pl-mi1  { color: #859900 !important; background: #020 !important; } /* markup.inserted */
.pl-mdht { color: #859900 !important; background: #020 !important; } /* meta.diff.header.to-file */
.pl-md   { color: #d30102 !important; background: #200 !important; } /* markup.deleted */
.pl-mdhf { color: #d30102 !important; background: #200 !important; } /* meta.diff.header.from-file */

I see this

2014-11-21 13_18_29-gist_904159f1e71e2e626375

which isn't that pleasant on the eyes.

Member

Mottie commented Nov 21, 2014

Check out how many selectors I ended up commenting out

And I'm not sure about leaving those 4 selectors in the theme file... when I used solarized dark styles along with the same dark background colors you used in twilight

.pl-mi1  { color: #859900 !important; background: #020 !important; } /* markup.inserted */
.pl-mdht { color: #859900 !important; background: #020 !important; } /* meta.diff.header.to-file */
.pl-md   { color: #d30102 !important; background: #200 !important; } /* markup.deleted */
.pl-mdhf { color: #d30102 !important; background: #200 !important; } /* meta.diff.header.from-file */

I see this

2014-11-21 13_18_29-gist_904159f1e71e2e626375

which isn't that pleasant on the eyes.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 21, 2014

Member

Hmm, what about:

background: rgba(64,0,0,.5)
background: rgba(0,64,0,.5)

Does that look ok in solarized?

Also, WTF @ those selectors. How did you find out about the unused ones?

Member

silverwind commented Nov 21, 2014

Hmm, what about:

background: rgba(64,0,0,.5)
background: rgba(0,64,0,.5)

Does that look ok in solarized?

Also, WTF @ those selectors. How did you find out about the unused ones?

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 21, 2014

Member

When you compare the selectors I posted here, with the last set I posted, that's the difference.

Give me a minute to try out those colors.

Edit: yeah those colors are better

2014-11-21 13_27_24-gist_904159f1e71e2e626375

Member

Mottie commented Nov 21, 2014

When you compare the selectors I posted here, with the last set I posted, that's the difference.

Give me a minute to try out those colors.

Edit: yeah those colors are better

2014-11-21 13_27_24-gist_904159f1e71e2e626375

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 21, 2014

Member

or maybe something like

background: rgba(211,1,2,.1)
background: rgba(133,153,0,.1)
Member

silverwind commented Nov 21, 2014

or maybe something like

background: rgba(211,1,2,.1)
background: rgba(133,153,0,.1)
@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 21, 2014

Member

That makes the red background too subtle.

LOL did you notice the <code> has a different background color in the css you just posted?

Member

Mottie commented Nov 21, 2014

That makes the red background too subtle.

LOL did you notice the <code> has a different background color in the css you just posted?

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 21, 2014

Member

Yeah, I'll fix that.

Member

silverwind commented Nov 21, 2014

Yeah, I'll fix that.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 21, 2014

Member

Ok, I'm going to work on updating the demo file to match the new selectors... then I think I'm done with messing with this for today ;)

Member

Mottie commented Nov 21, 2014

Ok, I'm going to work on updating the demo file to match the new selectors... then I think I'm done with messing with this for today ;)

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 21, 2014

Member

Ok. I'll leave the Twilight selectors as they are. These extra selectors don't hurt right now, and I'll probably remove them after the next release.

Member

silverwind commented Nov 21, 2014

Ok. I'll leave the Twilight selectors as they are. These extra selectors don't hurt right now, and I'll probably remove them after the next release.

@Mottie Mottie added the themes 🎨 label Nov 21, 2014

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

developer.github.com is still on pygments 😵, but I don't really care enough to re-add it, honestly.

Member

silverwind commented Nov 24, 2014

developer.github.com is still on pygments 😵, but I don't really care enough to re-add it, honestly.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

@Mottie I see there's still a lot of non-updated themes on us.org, shouldn't we remove them?

Member

silverwind commented Nov 24, 2014

@Mottie I see there's still a lot of non-updated themes on us.org, shouldn't we remove them?

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 24, 2014

Member

Oh, you mean the themes other than Twilight and Solarized Dark? The others will add syntax highlighting to the Ace Editor, but not the code... updating a theme is a bit too time consuming for me, I don't have much free time right now.

Member

Mottie commented Nov 24, 2014

Oh, you mean the themes other than Twilight and Solarized Dark? The others will add syntax highlighting to the Ace Editor, but not the code... updating a theme is a bit too time consuming for me, I don't have much free time right now.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

Ah, I see. So it will fall back to twilight for these themes?

Member

silverwind commented Nov 24, 2014

Ah, I see. So it will fall back to twilight for these themes?

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

I know themeing is a lot of work as it is right now, no hurry :) I just wanted us to reduce the list of available themes to the only fully-supported themes right now.

Member

silverwind commented Nov 24, 2014

I know themeing is a lot of work as it is right now, no hurry :) I just wanted us to reduce the list of available themes to the only fully-supported themes right now.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 24, 2014

Member

No, it doesn't fall back to any theme. Well, the GitHub defaults won't be changed, except for the background color will be darker... errr I think.

Update: oops, nope... no background color applied, so it's white! AHHHH. I'll have to work on this later tonight then.

Member

Mottie commented Nov 24, 2014

No, it doesn't fall back to any theme. Well, the GitHub defaults won't be changed, except for the background color will be darker... errr I think.

Update: oops, nope... no background color applied, so it's white! AHHHH. I'll have to work on this later tonight then.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

Might be better to just remove them from the list, for now. Or at least add a "(partially supported)" to them.

Member

silverwind commented Nov 24, 2014

Might be better to just remove them from the list, for now. Or at least add a "(partially supported)" to them.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 24, 2014

Member

Either way, it'll have to wait until later tonight :(

Member

Mottie commented Nov 24, 2014

Either way, it'll have to wait until later tonight :(

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 24, 2014

Member

I think I'll just copy the highlight code part from the twilight theme to each one until we get around to updating them completely.

Member

Mottie commented Nov 24, 2014

I think I'll just copy the highlight code part from the twilight theme to each one until we get around to updating them completely.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

Sounds good, If I do another theme, it's probably my BoP version.

Member

silverwind commented Nov 24, 2014

Sounds good, If I do another theme, it's probably my BoP version.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 24, 2014

Member

Ok, all partially supported themes now use Twilight's syntax code highlighter.

Member

Mottie commented Nov 24, 2014

Ok, all partially supported themes now use Twilight's syntax code highlighter.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

👏

Member

silverwind commented Nov 24, 2014

👏

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 24, 2014

Member

Hey which page did you see the pygments highlighting... most of the pages I've seen are using the new highlighter.

Member

Mottie commented Nov 24, 2014

Hey which page did you see the pygments highlighting... most of the pages I've seen are using the new highlighter.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

Probably was that page. Aren't these s2, p, mi pygments classes?

Member

silverwind commented Nov 24, 2014

Probably was that page. Aren't these s2, p, mi pygments classes?

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 24, 2014

Member

derp... actually those tags are for the newer theme, but it looks like the file is still named pygments.css, and oddly it seems to be ignoring our theme...

Update: Ahhh, because the selectors don't have "pl-" in front.

Update2: I just emailed GitHub ;)

Member

Mottie commented Nov 24, 2014

derp... actually those tags are for the newer theme, but it looks like the file is still named pygments.css, and oddly it seems to be ignoring our theme...

Update: Ahhh, because the selectors don't have "pl-" in front.

Update2: I just emailed GitHub ;)

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 24, 2014

Member

I see, really odd. I think they're just missing the pl- prefix in the class name.

Member

silverwind commented Nov 24, 2014

I see, really odd. I think they're just missing the pl- prefix in the class name.

@silverwind

This comment has been minimized.

Show comment
Hide comment
@silverwind

silverwind Nov 27, 2014

Member

Java files show a few #333 colors in Twilight, I'm not sure if any more changes to themes have landed.

Member

silverwind commented Nov 27, 2014

Java files show a few #333 colors in Twilight, I'm not sure if any more changes to themes have landed.

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Nov 27, 2014

Member

It looks like the are just some missing definitions in the theme:

  .pl-smi          { } /* storage.modifier.import */
  .pl-smp          { } /* storage.modifier.package */
 ...
  .pl-sra          { } /* string.regexp string.regexp.arbitrary-repitition */
  .pl-src          { } /* string.regexp.character-class */
  .pl-sre          { } /* string.regexp source.ruby.embedded */
 ...
  .pl-stj          { } /* storage.type.java */

specifically .pl-smi and .pl-stj

Member

Mottie commented Nov 27, 2014

It looks like the are just some missing definitions in the theme:

  .pl-smi          { } /* storage.modifier.import */
  .pl-smp          { } /* storage.modifier.package */
 ...
  .pl-sra          { } /* string.regexp string.regexp.arbitrary-repitition */
  .pl-src          { } /* string.regexp.character-class */
  .pl-sre          { } /* string.regexp source.ruby.embedded */
 ...
  .pl-stj          { } /* storage.type.java */

specifically .pl-smi and .pl-stj

@silverwind silverwind changed the title from Syntax Highlighting themes broken to Theme discussion Jan 11, 2015

@silverwind silverwind removed the github :octocat: label Jan 11, 2015

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Jan 13, 2015

Member

I think I'm going to go ahead and close this thread since all the themes are now implemented.

I was working on making a theme template with only the essential selectors... I just keep getting distracted.

🎈

Oh look something fun just went by!

Member

Mottie commented Jan 13, 2015

I think I'm going to go ahead and close this thread since all the themes are now implemented.

I was working on making a theme template with only the essential selectors... I just keep getting distracted.

🎈

Oh look something fun just went by!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment