Skip to content
Subway SeatSubway SeatSubway Seat
← All ports

Palettes & formats

Prism

A Prism stylesheet per flavor, using the same syntax colors as the editor themes, and subway-seat-auto.css, which follows the system's light or dark setting. In diffs (and the diff-highlight plugin), added and removed lines sit on green and red grounds with their code colors kept, the + and - signs are green and red, and hunk headers are denim.

Showing WalnutTunnelEnamelMoquetteDeep LevelPortlandGuimardCatacombesCarrelage. Switch flavors with the bullets up top.

Prism Report a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this port

Turn it on

In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="subway-seat.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="subway-seat-tunnel.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="subway-seat-enamel.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="london-moquette.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="london-deep-level.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="london-portland.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="paris-guimard.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="paris-catacombes.css">
In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="paris-carrelage.css">

Follow light and dark

One setting that changes with your system’s light and dark mode, no switching by hand.

In your page's <head>, in place of a stock Prism theme
<link rel="stylesheet" href="subway-seat-auto.css">
<!-- Enamel while the system is light, Subway Seat (Walnut) while it's dark -->

The files

Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)
subway-seat.csssave as styles/prism/subway-seat.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* Subway Seat for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #EDDCBC; }
pre[class*="language-"] { background: #362619; }
:not(pre) > code[class*="language-"] { background: #43301F; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #F8ECD4;
  background: #634932;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #967B5C; font-style: italic; }
.token.punctuation { color: #AE9575; }
.token.operator { color: #AE9575; }
.token.namespace { color: #C4AE8C; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #EC7F31; }
.token.function { color: #F3BF45; }
.token.builtin { color: #F3BF45; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #ADB956; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #F4A87E; }
.token.regex { color: #F4A87E; }
.token.number { color: #FF8373; }
.token.boolean { color: #FF8373; }
.token.constant, .token.symbol { color: #FF8373; }
.token.class-name { color: #86AD95; }
.token.variable { color: #EDDCBC; }
.token.parameter { color: #D9C6A3; font-style: italic; }
.token.property { color: #D9C6A3; }
.language-json .token.property { color: #F3BF45; }
.token.tag { color: #EC7F31; }
.token.attr-name, .token.selector { color: #F3BF45; font-style: italic; }
.token.decorator, .token.annotation { color: #F4A87E; font-style: italic; }
.token.title { color: #F3BF45; font-weight: bold; }
.token.blockquote { color: #C4AE8C; font-style: italic; }
.token.coord { color: #7F9BAE; }
.token.url { color: #7F9BAE; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #ADB956; }
.token.deleted { color: #FF8373; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #3F3A1E; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #52281C; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #423117; }
[class*="language-diff"] .token.prefix.inserted { color: #ADB956; }
[class*="language-diff"] .token.prefix.deleted { color: #FF8373; }
[class*="language-diff"] .token.prefix.diff { color: #F3BF45; }
subway-seat-tunnel.csssave as styles/prism/subway-seat-tunnel.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* Subway Seat Tunnel for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #E9D8B6; }
pre[class*="language-"] { background: #24180E; }
:not(pre) > code[class*="language-"] { background: #302115; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #F6EAD1;
  background: #4F3927;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #917759; font-style: italic; }
.token.punctuation { color: #AA9171; }
.token.operator { color: #AA9171; }
.token.namespace { color: #C0AA88; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #EC7F31; }
.token.function { color: #F3BF45; }
.token.builtin { color: #F3BF45; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #ADB956; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #F4A87E; }
.token.regex { color: #F4A87E; }
.token.number { color: #FF8373; }
.token.boolean { color: #FF8373; }
.token.constant, .token.symbol { color: #FF8373; }
.token.class-name { color: #86AD95; }
.token.variable { color: #E9D8B6; }
.token.parameter { color: #D6C3A0; font-style: italic; }
.token.property { color: #D6C3A0; }
.language-json .token.property { color: #F3BF45; }
.token.tag { color: #EC7F31; }
.token.attr-name, .token.selector { color: #F3BF45; font-style: italic; }
.token.decorator, .token.annotation { color: #F4A87E; font-style: italic; }
.token.title { color: #F3BF45; font-weight: bold; }
.token.blockquote { color: #C0AA88; font-style: italic; }
.token.coord { color: #7F9BAE; }
.token.url { color: #7F9BAE; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #ADB956; }
.token.deleted { color: #FF8373; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #363318; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #492217; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #382911; }
[class*="language-diff"] .token.prefix.inserted { color: #ADB956; }
[class*="language-diff"] .token.prefix.deleted { color: #FF8373; }
[class*="language-diff"] .token.prefix.diff { color: #F3BF45; }
subway-seat-enamel.csssave as styles/prism/subway-seat-enamel.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* Subway Seat Enamel for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #3E2C1E; }
pre[class*="language-"] { background: #F8EFDF; }
:not(pre) > code[class*="language-"] { background: #DBCDB3; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #2A1D13;
  background: #CBB898;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8C7254; font-style: italic; }
.token.punctuation { color: #735C44; }
.token.operator { color: #735C44; }
.token.namespace { color: #654F3B; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #A04800; }
.token.function { color: #976608; }
.token.builtin { color: #976608; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #66740F; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #843811; }
.token.regex { color: #843811; }
.token.number { color: #BF4233; }
.token.boolean { color: #BF4233; }
.token.constant, .token.symbol { color: #BF4233; }
.token.class-name { color: #3E7157; }
.token.variable { color: #3E2C1E; }
.token.parameter { color: #54402F; font-style: italic; }
.token.property { color: #54402F; }
.language-json .token.property { color: #976608; }
.token.tag { color: #A04800; }
.token.attr-name, .token.selector { color: #976608; font-style: italic; }
.token.decorator, .token.annotation { color: #843811; font-style: italic; }
.token.title { color: #976608; font-weight: bold; }
.token.blockquote { color: #654F3B; font-style: italic; }
.token.coord { color: #3F6480; }
.token.url { color: #3F6480; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #66740F; }
.token.deleted { color: #BF4233; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #D7DBC1; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #EBD3D1; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #E4D7BF; }
[class*="language-diff"] .token.prefix.inserted { color: #66740F; }
[class*="language-diff"] .token.prefix.deleted { color: #BF4233; }
[class*="language-diff"] .token.prefix.diff { color: #976608; }
london-moquette.csssave as styles/prism/london-moquette.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* London Moquette for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #D8DEEA; }
pre[class*="language-"] { background: #1E2941; }
:not(pre) > code[class*="language-"] { background: #263451; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #E9EDF5;
  background: #3D4F72;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #73819C; font-style: italic; }
.token.punctuation { color: #8F9AB0; }
.token.operator { color: #8F9AB0; }
.token.namespace { color: #A9B2C4; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #DE8946; }
.token.function { color: #F2C03F; }
.token.builtin { color: #F2C03F; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #77C581; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #AE9EDC; }
.token.regex { color: #AE9EDC; }
.token.number { color: #FE8474; }
.token.boolean { color: #FE8474; }
.token.constant, .token.symbol { color: #FE8474; }
.token.class-name { color: #54B4B5; }
.token.variable { color: #D8DEEA; }
.token.parameter { color: #C1C9D8; font-style: italic; }
.token.property { color: #C1C9D8; }
.language-json .token.property { color: #F2C03F; }
.token.tag { color: #DE8946; }
.token.attr-name, .token.selector { color: #F2C03F; font-style: italic; }
.token.decorator, .token.annotation { color: #AE9EDC; font-style: italic; }
.token.title { color: #F2C03F; font-weight: bold; }
.token.blockquote { color: #A9B2C4; font-style: italic; }
.token.coord { color: #7595DA; }
.token.url { color: #7595DA; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #77C581; }
.token.deleted { color: #FE8474; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #283E3A; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #462B31; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #36332A; }
[class*="language-diff"] .token.prefix.inserted { color: #77C581; }
[class*="language-diff"] .token.prefix.deleted { color: #FE8474; }
[class*="language-diff"] .token.prefix.diff { color: #F2C03F; }
london-deep-level.csssave as styles/prism/london-deep-level.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* London Deep Level for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #D4DAE7; }
pre[class*="language-"] { background: #121A2D; }
:not(pre) > code[class*="language-"] { background: #1A243A; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #E7EBF3;
  background: #303E5B;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6F7C97; font-style: italic; }
.token.punctuation { color: #8B96AC; }
.token.operator { color: #8B96AC; }
.token.namespace { color: #A5AEC0; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #DE8946; }
.token.function { color: #F2C03F; }
.token.builtin { color: #F2C03F; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #77C581; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #AE9EDC; }
.token.regex { color: #AE9EDC; }
.token.number { color: #FE8474; }
.token.boolean { color: #FE8474; }
.token.constant, .token.symbol { color: #FE8474; }
.token.class-name { color: #54B4B5; }
.token.variable { color: #D4DAE7; }
.token.parameter { color: #BEC6D5; font-style: italic; }
.token.property { color: #BEC6D5; }
.language-json .token.property { color: #F2C03F; }
.token.tag { color: #DE8946; }
.token.attr-name, .token.selector { color: #F2C03F; font-style: italic; }
.token.decorator, .token.annotation { color: #AE9EDC; font-style: italic; }
.token.title { color: #F2C03F; font-weight: bold; }
.token.blockquote { color: #A5AEC0; font-style: italic; }
.token.coord { color: #7595DA; }
.token.url { color: #7595DA; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #77C581; }
.token.deleted { color: #FE8474; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #22362F; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #402327; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #2F2A1E; }
[class*="language-diff"] .token.prefix.inserted { color: #77C581; }
[class*="language-diff"] .token.prefix.deleted { color: #FE8474; }
[class*="language-diff"] .token.prefix.diff { color: #F2C03F; }
london-portland.csssave as styles/prism/london-portland.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* London Portland for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #293040; }
pre[class*="language-"] { background: #E8F0FF; }
:not(pre) > code[class*="language-"] { background: #BFCFF1; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #1B202B;
  background: #A8BBE2;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #697794; font-style: italic; }
.token.punctuation { color: #556179; }
.token.operator { color: #556179; }
.token.namespace { color: #4A5469; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #A54300; }
.token.function { color: #8D6C08; }
.token.builtin { color: #8D6C08; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #0D8131; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #755FA9; }
.token.regex { color: #755FA9; }
.token.number { color: #CC2E25; }
.token.boolean { color: #CC2E25; }
.token.constant, .token.symbol { color: #CC2E25; }
.token.class-name { color: #007376; }
.token.variable { color: #293040; }
.token.parameter { color: #3C4557; font-style: italic; }
.token.property { color: #3C4557; }
.language-json .token.property { color: #8D6C08; }
.token.tag { color: #A54300; }
.token.attr-name, .token.selector { color: #8D6C08; font-style: italic; }
.token.decorator, .token.annotation { color: #755FA9; font-style: italic; }
.token.title { color: #8D6C08; font-weight: bold; }
.token.blockquote { color: #4A5469; font-style: italic; }
.token.coord { color: #0019A8; }
.token.url { color: #0019A8; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #0D8131; }
.token.deleted { color: #CC2E25; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #C0DEC9; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #EBD3D1; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #E1D9BF; }
[class*="language-diff"] .token.prefix.inserted { color: #0D8131; }
[class*="language-diff"] .token.prefix.deleted { color: #CC2E25; }
[class*="language-diff"] .token.prefix.diff { color: #8D6C08; }
paris-guimard.csssave as styles/prism/paris-guimard.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* Paris Guimard for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #D9E1DB; }
pre[class*="language-"] { background: #1E2E26; }
:not(pre) > code[class*="language-"] { background: #263930; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #E9EEEC;
  background: #3E554A;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #74857C; font-style: italic; }
.token.punctuation { color: #909E96; }
.token.operator { color: #909E96; }
.token.namespace { color: #A9B5AE; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #CA9245; }
.token.function { color: #F1BF4B; }
.token.builtin { color: #F1BF4B; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #70CAA9; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #FAB49C; }
.token.regex { color: #FAB49C; }
.token.number { color: #E7877B; }
.token.boolean { color: #E7877B; }
.token.constant, .token.symbol { color: #E7877B; }
.token.class-name { color: #549B9F; }
.token.variable { color: #D9E1DB; }
.token.parameter { color: #C2CBC5; font-style: italic; }
.token.property { color: #C2CBC5; }
.language-json .token.property { color: #F1BF4B; }
.token.tag { color: #CA9245; }
.token.attr-name, .token.selector { color: #F1BF4B; font-style: italic; }
.token.decorator, .token.annotation { color: #FAB49C; font-style: italic; }
.token.title { color: #F1BF4B; font-weight: bold; }
.token.blockquote { color: #A9B5AE; font-style: italic; }
.token.coord { color: #709BC8; }
.token.url { color: #709BC8; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #70CAA9; }
.token.deleted { color: #E7877B; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #274137; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #422E29; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #37341F; }
[class*="language-diff"] .token.prefix.inserted { color: #70CAA9; }
[class*="language-diff"] .token.prefix.deleted { color: #E7877B; }
[class*="language-diff"] .token.prefix.diff { color: #F1BF4B; }
paris-catacombes.csssave as styles/prism/paris-catacombes.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* Paris Catacombes for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #D4DDD7; }
pre[class*="language-"] { background: #121E19; }
:not(pre) > code[class*="language-"] { background: #1A2921; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #E7ECEA;
  background: #31433A;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #708178; font-style: italic; }
.token.punctuation { color: #8C9A92; }
.token.operator { color: #8C9A92; }
.token.namespace { color: #A5B1AA; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #CA9245; }
.token.function { color: #F1BF4B; }
.token.builtin { color: #F1BF4B; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #70CAA9; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #FAB49C; }
.token.regex { color: #FAB49C; }
.token.number { color: #E7877B; }
.token.boolean { color: #E7877B; }
.token.constant, .token.symbol { color: #E7877B; }
.token.class-name { color: #549B9F; }
.token.variable { color: #D4DDD7; }
.token.parameter { color: #BFC8C2; font-style: italic; }
.token.property { color: #BFC8C2; }
.language-json .token.property { color: #F1BF4B; }
.token.tag { color: #CA9245; }
.token.attr-name, .token.selector { color: #F1BF4B; font-style: italic; }
.token.decorator, .token.annotation { color: #FAB49C; font-style: italic; }
.token.title { color: #F1BF4B; font-weight: bold; }
.token.blockquote { color: #A5B1AA; font-style: italic; }
.token.coord { color: #709BC8; }
.token.url { color: #709BC8; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #70CAA9; }
.token.deleted { color: #E7877B; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #20392F; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #3B2621; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #2F2C17; }
[class*="language-diff"] .token.prefix.inserted { color: #70CAA9; }
[class*="language-diff"] .token.prefix.deleted { color: #E7877B; }
[class*="language-diff"] .token.prefix.diff { color: #F1BF4B; }
paris-carrelage.csssave as styles/prism/paris-carrelage.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* Paris Carrelage for Prism */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #27342F; }
pre[class*="language-"] { background: #EEF2F1; }
:not(pre) > code[class*="language-"] { background: #C6D2CF; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #19221E;
  background: #B0BFBB;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6C7C76; font-style: italic; }
.token.punctuation { color: #56645F; }
.token.operator { color: #56645F; }
.token.namespace { color: #4A5752; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #764C00; }
.token.function { color: #916D07; }
.token.builtin { color: #916D07; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #218366; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #B36B51; }
.token.regex { color: #B36B51; }
.token.number { color: #AC3B32; }
.token.boolean { color: #AC3B32; }
.token.constant, .token.symbol { color: #AC3B32; }
.token.class-name { color: #006267; }
.token.variable { color: #27342F; }
.token.parameter { color: #3B4742; font-style: italic; }
.token.property { color: #3B4742; }
.language-json .token.property { color: #916D07; }
.token.tag { color: #764C00; }
.token.attr-name, .token.selector { color: #916D07; font-style: italic; }
.token.decorator, .token.annotation { color: #B36B51; font-style: italic; }
.token.title { color: #916D07; font-weight: bold; }
.token.blockquote { color: #4A5752; font-style: italic; }
.token.coord { color: #25629B; }
.token.url { color: #25629B; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #218366; }
.token.deleted { color: #AC3B32; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #C5DFD7; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #E7D3D2; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #E2D9BF; }
[class*="language-diff"] .token.prefix.inserted { color: #218366; }
[class*="language-diff"] .token.prefix.deleted { color: #AC3B32; }
[class*="language-diff"] .token.prefix.diff { color: #916D07; }

This one is shared by all three flavors.

subway-seat-auto.csssave as styles/prism/subway-seat-auto.css
in your site's stylesheets
Download
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */
/* Subway Seat for Prism, following the system: Subway Seat Enamel when it's light, Subway Seat when it's dark. */

code[class*="language-"],
pre[class*="language-"] {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff lines fill the width, so their tint reads as a band. */
[class*="language-diff"] .token.inserted:not(.prefix),
[class*="language-diff"] .token.deleted:not(.prefix),
[class*="language-diff"] .token.diff:not(.prefix) { display: block; color: inherit; font-weight: inherit; }

code[class*="language-"],
pre[class*="language-"] { color: #3E2C1E; }
pre[class*="language-"] { background: #F8EFDF; }
:not(pre) > code[class*="language-"] { background: #DBCDB3; }

code[class*="language-"]::selection, code[class*="language-"] ::selection,
pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
  color: #2A1D13;
  background: #CBB898;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8C7254; font-style: italic; }
.token.punctuation { color: #735C44; }
.token.operator { color: #735C44; }
.token.namespace { color: #654F3B; }
.token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #A04800; }
.token.function { color: #976608; }
.token.builtin { color: #976608; font-style: italic; }
.token.string, .token.char, .token.attr-value, .token.code { color: #66740F; }
.token.escape, .token.entity, .token.interpolation-punctuation { color: #843811; }
.token.regex { color: #843811; }
.token.number { color: #BF4233; }
.token.boolean { color: #BF4233; }
.token.constant, .token.symbol { color: #BF4233; }
.token.class-name { color: #3E7157; }
.token.variable { color: #3E2C1E; }
.token.parameter { color: #54402F; font-style: italic; }
.token.property { color: #54402F; }
.language-json .token.property { color: #976608; }
.token.tag { color: #A04800; }
.token.attr-name, .token.selector { color: #976608; font-style: italic; }
.token.decorator, .token.annotation { color: #843811; font-style: italic; }
.token.title { color: #976608; font-weight: bold; }
.token.blockquote { color: #654F3B; font-style: italic; }
.token.coord { color: #3F6480; }
.token.url { color: #3F6480; text-decoration: underline; }

/* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
   (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
.token.inserted { color: #66740F; }
.token.deleted { color: #BF4233; }
[class*="language-diff"] .token.inserted:not(.prefix) { background: #D7DBC1; }
[class*="language-diff"] .token.deleted:not(.prefix) { background: #EBD3D1; }
[class*="language-diff"] .token.diff:not(.prefix) { background: #E4D7BF; }
[class*="language-diff"] .token.prefix.inserted { color: #66740F; }
[class*="language-diff"] .token.prefix.deleted { color: #BF4233; }
[class*="language-diff"] .token.prefix.diff { color: #976608; }

@media (prefers-color-scheme: dark) {
  code[class*="language-"],
  pre[class*="language-"] { color: #EDDCBC; }
  pre[class*="language-"] { background: #362619; }
  :not(pre) > code[class*="language-"] { background: #43301F; }

  code[class*="language-"]::selection, code[class*="language-"] ::selection,
  pre[class*="language-"]::selection, pre[class*="language-"] ::selection {
    color: #F8ECD4;
    background: #634932;
  }

  .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #967B5C; font-style: italic; }
  .token.punctuation { color: #AE9575; }
  .token.operator { color: #AE9575; }
  .token.namespace { color: #C4AE8C; }
  .token.keyword, .token.atrule, .token.rule, .token.list, .token.important { color: #EC7F31; }
  .token.function { color: #F3BF45; }
  .token.builtin { color: #F3BF45; font-style: italic; }
  .token.string, .token.char, .token.attr-value, .token.code { color: #ADB956; }
  .token.escape, .token.entity, .token.interpolation-punctuation { color: #F4A87E; }
  .token.regex { color: #F4A87E; }
  .token.number { color: #FF8373; }
  .token.boolean { color: #FF8373; }
  .token.constant, .token.symbol { color: #FF8373; }
  .token.class-name { color: #86AD95; }
  .token.variable { color: #EDDCBC; }
  .token.parameter { color: #D9C6A3; font-style: italic; }
  .token.property { color: #D9C6A3; }
  .language-json .token.property { color: #F3BF45; }
  .token.tag { color: #EC7F31; }
  .token.attr-name, .token.selector { color: #F3BF45; font-style: italic; }
  .token.decorator, .token.annotation { color: #F4A87E; font-style: italic; }
  .token.title { color: #F3BF45; font-weight: bold; }
  .token.blockquote { color: #C4AE8C; font-style: italic; }
  .token.coord { color: #7F9BAE; }
  .token.url { color: #7F9BAE; text-decoration: underline; }

  /* Diffs: the line keeps its code colors on a green or red tint, and the + / - sign carries the color.
     (Other languages mark a whole line as inserted or deleted, so it takes the color itself.) */
  .token.inserted { color: #ADB956; }
  .token.deleted { color: #FF8373; }
  [class*="language-diff"] .token.inserted:not(.prefix) { background: #3F3A1E; }
  [class*="language-diff"] .token.deleted:not(.prefix) { background: #52281C; }
  [class*="language-diff"] .token.diff:not(.prefix) { background: #423117; }
  [class*="language-diff"] .token.prefix.inserted { color: #ADB956; }
  [class*="language-diff"] .token.prefix.deleted { color: #FF8373; }
  [class*="language-diff"] .token.prefix.diff { color: #F3BF45; }
}