GPT 4 Generated Light Nord Theme for Chroma

README.md

I asked GPT4 to create a light nord color palette for me, based on dark version.

• I seriosly doubted it could do it. As intelligent as it is, playing with hexcodes, doesnt seem like a very easy task, without any additional tools, on top of that, it had to maintain 306 lines of code in it's context, and copy it all line for line, without making a single error, only swapping out lighter hex values for darkers ones as deemed necessary
• Fully expecting it to crap itself after the 30th line or so, i decided to help it out a little and offered it 4 replacement 'darker' colors in exchange for the lighter ones

You can view my complete discussion with GPT4 , where i later on ask it to generate a completely new color palette, based on color descriptions, ask it to modify the hexes to incorporate different tones, and even asked it to walk me through the process. It derps a little at the very end, but when prompted with 'can you go back and fix the error you made', it fixes the answer.

Impressions

What impressed me the most:

1. It used my replacement colors, only where it deemed necessary.
2. It compensated the brightness of all the other colors tastefully. You can't look at the final result, and suspect that it was not created by a human. It's almost too perfect!!
3. No mistakes, all the other code as it is, first try.

Here are the results:

_dark_syntax.scss against dark background

_dark_syntax.scss against white background

gpt_4_generated_light_syntax.css against white background

These results, are not enough to cover all the colors included in the color profile. Will upload more.

_dark_syntax.scss

.bg {
    color: #d8dee9;
    background-color: #2e3440;
}

.chroma {
    color: #d8dee9;
    background-color: #2e3440;
}

.chroma .err {
    color: #bf616a
}

.chroma .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit
}

.chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
}

.chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.chroma .hl {
    background-color: #424853
}

.chroma .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #6c6f74
}

.chroma .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #6c6f74
}

.chroma .line {
    display: flex;
}

.chroma .k {
    color: #81a1c1;
    font-weight: bold
}

.chroma .kc {
    color: #81a1c1;
    font-weight: bold
}

.chroma .kd {
    color: #81a1c1;
    font-weight: bold
}

.chroma .kn {
    color: #81a1c1;
    font-weight: bold
}

.chroma .kp {
    color: #81a1c1
}

.chroma .kr {
    color: #81a1c1;
    font-weight: bold
}

.chroma .kt {
    color: #81a1c1
}

.chroma .na {
    color: #8fbcbb
}

.chroma .nb {
    color: #81a1c1
}

.chroma .nc {
    color: #8fbcbb
}

.chroma .no {
    color: #8fbcbb
}

.chroma .nd {
    color: #d08770
}

.chroma .ni {
    color: #d08770
}

.chroma .ne {
    color: #bf616a
}

.chroma .nf {
    color: #88c0d0
}

.chroma .nl {
    color: #8fbcbb
}

.chroma .nn {
    color: #8fbcbb
}

.chroma .nt {
    color: #81a1c1
}

.chroma .s {
    color: #a3be8c
}

.chroma .sa {
    color: #a3be8c
}

.chroma .sb {
    color: #a3be8c
}

.chroma .sc {
    color: #a3be8c
}

.chroma .dl {
    color: #a3be8c
}

.chroma .sd {
    color: #616e87
}

.chroma .s2 {
    color: #a3be8c
}

.chroma .se {
    color: #ebcb8b
}

.chroma .sh {
    color: #a3be8c
}

.chroma .si {
    color: #a3be8c
}

.chroma .sx {
    color: #a3be8c
}

.chroma .sr {
    color: #ebcb8b
}

.chroma .s1 {
    color: #a3be8c
}

.chroma .ss {
    color: #a3be8c
}

.chroma .m {
    color: #b48ead
}

.chroma .mb {
    color: #b48ead
}

.chroma .mf {
    color: #b48ead
}

.chroma .mh {
    color: #b48ead
}

.chroma .mi {
    color: #b48ead
}

.chroma .il {
    color: #b48ead
}

.chroma .mo {
    color: #b48ead
}

.chroma .o {
    color: #81a1c1
}

.chroma .ow {
    color: #81a1c1;
    font-weight: bold
}

.chroma .p {
    color: #eceff4
}

.chroma .c {
    color: #616e87;
    font-style: italic
}

.chroma .ch {
    color: #616e87;
    font-style: italic
}

.chroma .cm {
    color: #616e87;
    font-style: italic
}

.chroma .c1 {
    color: #616e87;
    font-style: italic
}

.chroma .cs {
    color: #616e87;
    font-style: italic
}

.chroma .cp {
    color: #5e81ac;
    font-style: italic
}

.chroma .cpf {
    color: #5e81ac;
    font-style: italic
}

.chroma .gd {
    color: #bf616a
}

.chroma .ge {
    font-style: italic
}

.chroma .gr {
    color: #bf616a
}

.chroma .gh {
    color: #88c0d0;
    font-weight: bold
}

.chroma .gi {
    color: #a3be8c
}

.chroma .gp {
    color: #4c566a;
    font-weight: bold
}

.chroma .gs {
    font-weight: bold
}

.chroma .gu {
    color: #88c0d0;
    font-weight: bold
}

.chroma .gt {
    color: #bf616a
}

gpt_4_generated_light_syntax.css

.bg {
    color: #2e3440;
    background-color: #d8dee9;
}

.chroma {
    color: #2e3440;
    background-color: #d8dee9;
}

.chroma .err {
    color: #993444
}

.chroma .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit
}

.chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
}

.chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.chroma .hl {
    background-color: #b2b5ba
}

.chroma .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #3b4252
}

.chroma .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #3b4252
}

.chroma .line {
    display: flex;
}

.chroma .k {
    color: #466480;
    font-weight: bold
}

.chroma .kc {
    color: #466480;
    font-weight: bold
}

.chroma .kd {
    color: #466480;
    font-weight: bold
}

.chroma .kn {
    color: #466480;
    font-weight: bold
}

.chroma .kp {
    color: #466480
}

.chroma .kr {
    color: #466480;
    font-weight: bold
}

.chroma .kt {
    color: #466480
}

.chroma .na {
    color: #5a7d7a
}

.chroma .nb {
    color: #466480
}

.chroma .nc {
    color: #5a7d7a
}

.chroma .no {
    color: #5a7d7a
}

.chroma .nd {
    color: #955a3e
}

.chroma .ni {
    color: #955a3e
}

.chroma .ne {
    color: #993444
}

.chroma .nf {
    color: #5a8090
}

.chroma .nl {
    color: #5a7d7a
}

.chroma .nn {
    color: #5a7d7a
}

.chroma .nt {
    color: #466480
}

.chroma .s {
    color: #73935c
}

.chroma .sa {
    color: #73935c
}

.chroma .sb {
    color: #73935c
}

.chroma .sc {
    color: #73935c
}

.chroma .dl {
    color: #73935c
}

.chroma .sd {
    color: #324257
}

.chroma .s2 {
    color: #73935c
}

.chroma .se {
    color: #b98c4b
}

.chroma .sh {
    color: #73935c
}

.chroma .si {
    color: #73935c
}

.chroma .sx {
    color: #73935c
}

.chroma .sr {
    color: #b98c4b
}

.chroma .s1 {
    color: #73935c
}

.chroma .ss {
    color: #73935c
}

.chroma .m {
    color: #874d8e
}

.chroma .mb {
    color: #874d8e
}

.chroma .mf {
    color: #874d8e
}

.chroma .mh {
    color: #874d8e
}

.chroma .mi {
    color: #874d8e
}

.chroma .il {
    color: #874d8e
}

.chroma .mo {
    color: #874d8e
}

.chroma .o {
    color: #466480
}

.chroma .ow {
    color: #466480;
    font-weight: bold
}

.chroma .p {
    color: #2e3440
}

.chroma .c {
    color: #324257;
    font-style: italic
}

.chroma .ch {
    color: #324257;
    font-style: italic
}

.chroma .cm {
    color: #324257;
    font-style: italic
}

.chroma .c1 {
    color: #324257;
    font-style: italic
}

.chroma .cs {
    color: #324257;
    font-style: italic
}

.chroma .cp {
    color: #3b4252;
    font-style: italic
}

.chroma .cpf {
    color: #3b4252;
    font-style: italic
}

.chroma .gd {
    color: #993444
}

.chroma .ge {
    font-style: italic
}

.chroma .gr {
    color: #993444
}

.chroma .gh {
    color: #5a8090;
    font-weight: bold
}

.chroma .gi {
    color: #73935c
}

.chroma .gp {
    color: #434c5e;
    font-weight: bold
}

.chroma .gs {
    font-weight: bold
}

.chroma .gu {
    color: #5a8090;
    font-weight: bold
}

.chroma .gt {
    color: #993444
}