From 898842b468a46fb517dafec5e400a6e7f8816b59 Mon Sep 17 00:00:00 2001
From: Christian Nunciato <chris@nunciato.org>
Date: Tue, 16 May 2023 12:02:46 -0700
Subject: [PATCH] Throwaway demo for code styles

---
 themes/default/assets/css/bundle.css          | 451 +++++++----------
 themes/default/theme/src/scss/_chroma.scss    |  86 ++++
 themes/default/theme/src/scss/_code.scss      |   7 +-
 .../default/theme/src/scss/_copy-button.scss  |   2 +-
 themes/default/theme/src/scss/_pygments.scss  | 477 ------------------
 .../theme/src/scss/components/_choosable.scss |  11 +-
 6 files changed, 280 insertions(+), 754 deletions(-)
 create mode 100644 themes/default/theme/src/scss/_chroma.scss
 delete mode 100644 themes/default/theme/src/scss/_pygments.scss

diff --git a/themes/default/assets/css/bundle.css b/themes/default/assets/css/bundle.css
index feb1b867804..2a205f96c26 100644
--- a/themes/default/assets/css/bundle.css
+++ b/themes/default/assets/css/bundle.css
@@ -2603,414 +2603,346 @@ section.cloud-overview div.keyboard-arrow-up-gray{
   background:url(/images/docs/icons/keyboard-arrow-up-gray.svg)
 }
 
-.highlight .lntd{
+.bg{
+  color:#c9d1d9;
+  background-color:#0d1117
+}
+
+.chroma{
+  color:#c9d1d9;
+  background-color:#0d1117
+}
+
+.chroma .err{
+  color:#f85149
+}
+
+.chroma .lnlinks{
+  outline:none;
+  text-decoration:none;
+  color:inherit
+}
+
+.chroma .lntd{
   vertical-align:top;
   padding:0;
   margin:0;
   border:0
 }
 
-.highlight .lntable{
+.chroma .lntable{
   border-spacing:0;
   padding:0;
   margin:0;
-  border:0;
-  width:auto;
-  overflow:auto;
-  display:block
+  border:0
 }
 
-.highlight .hl{
-  display:block;
-  width:100%;
+.chroma .hl{
   background-color:#ffc
 }
 
-.highlight .lnt{
+.chroma .lnt{
+  white-space:pre;
+  -webkit-user-select:none;
+  user-select:none;
   margin-right:.4em;
   padding:0 .4em 0 .4em;
-  color:#7f7f7f
+  color:#64686c
 }
 
-.highlight .ln{
+.chroma .ln{
+  white-space:pre;
+  -webkit-user-select:none;
+  user-select:none;
   margin-right:.4em;
   padding:0 .4em 0 .4em;
-  color:#7f7f7f
+  color:#6e7681
 }
 
-.highlight .k{
-  color:#007020
-}
-
-.highlight .kc{
-  color:#007020
-}
-
-.highlight .kd{
-  color:#007020
-}
-
-.highlight .kn{
-  color:#007020
-}
-
-.highlight .kp{
-  color:#007020
-}
-
-.highlight .kr{
-  color:#007020
-}
-
-.highlight .kt{
-  color:#902000
-}
-
-.highlight .na{
-  color:#4070a0
-}
-
-.highlight .nb{
-  color:#007020
-}
-
-.highlight .nc{
-  color:#0e84b5
-}
-
-.highlight .no{
-  color:#60add5
-}
-
-.highlight .nd{
-  color:#555
-}
-
-.highlight .ni{
-  color:#d55537
-}
-
-.highlight .ne{
-  color:#007020
-}
-
-.highlight .nf{
-  color:#06287e
-}
-
-.highlight .nl{
-  color:#002070
-}
-
-.highlight .nn{
-  color:#0e84b5
-}
-
-.highlight .nt{
-  color:#062873
-}
-
-.highlight .nv{
-  color:#bb60d5
-}
-
-.highlight .s{
-  color:#4070a0
+.chroma .line{
+  display:flex
 }
 
-.highlight .sa{
-  color:#4070a0
+.chroma .k{
+  color:#ff7b72
 }
 
-.highlight .sb{
-  color:#4070a0
+.chroma .kc{
+  color:#79c0ff
 }
 
-.highlight .sc{
-  color:#4070a0
+.chroma .kd{
+  color:#ff7b72
 }
 
-.highlight .dl{
-  color:#4070a0
+.chroma .kn{
+  color:#ff7b72
 }
 
-.highlight .sd{
-  color:#4070a0;
-  font-style:italic
+.chroma .kp{
+  color:#79c0ff
 }
 
-.highlight .s2{
-  color:#4070a0
+.chroma .kr{
+  color:#ff7b72
 }
 
-.highlight .se{
-  color:#4070a0
+.chroma .kt{
+  color:#ff7b72
 }
 
-.highlight .sh{
-  color:#4070a0
+.chroma .nc{
+  color:#f0883e;
+  font-weight:bold
 }
 
-.highlight .si{
-  color:#70a0d0;
-  font-style:italic
+.chroma .no{
+  color:#79c0ff;
+  font-weight:bold
 }
 
-.highlight .sx{
-  color:#c65d09
+.chroma .nd{
+  color:#d2a8ff;
+  font-weight:bold
 }
 
-.highlight .sr{
-  color:#235388
+.chroma .ni{
+  color:#ffa657
 }
 
-.highlight .s1{
-  color:#4070a0
+.chroma .ne{
+  color:#f0883e;
+  font-weight:bold
 }
 
-.highlight .ss{
-  color:#517918
+.chroma .nf{
+  color:#d2a8ff;
+  font-weight:bold
 }
 
-.highlight .m{
-  color:#40a070
+.chroma .nl{
+  color:#79c0ff;
+  font-weight:bold
 }
 
-.highlight .mb{
-  color:#40a070
+.chroma .nn{
+  color:#ff7b72
 }
 
-.highlight .mf{
-  color:#40a070
+.chroma .py{
+  color:#79c0ff
 }
 
-.highlight .mh{
-  color:#40a070
+.chroma .nt{
+  color:#7ee787
 }
 
-.highlight .mi{
-  color:#40a070
+.chroma .nv{
+  color:#79c0ff
 }
 
-.highlight .il{
-  color:#40a070
+.chroma .l{
+  color:#a5d6ff
 }
 
-.highlight .mo{
-  color:#40a070
+.chroma .ld{
+  color:#79c0ff
 }
 
-.highlight .o{
-  color:#666
+.chroma .s{
+  color:#a5d6ff
 }
 
-.highlight .ow{
-  color:#007020
+.chroma .sa{
+  color:#79c0ff
 }
 
-.highlight .c{
-  color:#60a0b0
+.chroma .sb{
+  color:#a5d6ff
 }
 
-.highlight .ch{
-  color:#60a0b0
+.chroma .sc{
+  color:#a5d6ff
 }
 
-.highlight .cm{
-  color:#60a0b0
+.chroma .dl{
+  color:#79c0ff
 }
 
-.highlight .c1{
-  color:#60a0b0
+.chroma .sd{
+  color:#a5d6ff
 }
 
-.highlight .cs{
-  color:#60a0b0;
-  background-color:#fff0f0
+.chroma .s2{
+  color:#a5d6ff
 }
 
-.highlight .cp{
-  color:#007020
+.chroma .se{
+  color:#79c0ff
 }
 
-.highlight .cpf{
-  color:#007020
+.chroma .sh{
+  color:#79c0ff
 }
 
-.highlight .gd{
-  color:#a00000
+.chroma .si{
+  color:#a5d6ff
 }
 
-.highlight .gr{
-  color:red
+.chroma .sx{
+  color:#a5d6ff
 }
 
-.highlight .gh{
-  color:navy
+.chroma .sr{
+  color:#79c0ff
 }
 
-.highlight .gi{
-  color:#00a000
+.chroma .s1{
+  color:#a5d6ff
 }
 
-.highlight .go{
-  color:#888
+.chroma .ss{
+  color:#a5d6ff
 }
 
-.highlight .gp{
-  color:#c65d09
+.chroma .m{
+  color:#a5d6ff
 }
 
-.highlight .gu{
-  color:purple
+.chroma .mb{
+  color:#a5d6ff
 }
 
-.highlight .gt{
-  color:#04d
+.chroma .mf{
+  color:#a5d6ff
 }
 
-.highlight .gl{
-  text-decoration:underline
+.chroma .mh{
+  color:#a5d6ff
 }
 
-.highlight .w{
-  color:#bbb
+.chroma .mi{
+  color:#a5d6ff
 }
 
-.code-mode-dark .highlight .lntd{
-  vertical-align:top;
-  padding:0;
-  margin:0;
-  border:0
+.chroma .il{
+  color:#a5d6ff
 }
 
-.code-mode-dark .highlight .lntable{
-  border-spacing:0;
-  padding:0;
-  margin:0;
-  border:0;
-  width:auto;
-  overflow:auto;
-  display:block
+.chroma .mo{
+  color:#a5d6ff
 }
 
-.code-mode-dark .highlight .hl{
-  display:block;
-  width:100%;
-  background-color:#ffc
+.chroma .o{
+  color:#ff7b72;
+  font-weight:bold
 }
 
-.code-mode-dark .highlight .lnt{
-  margin-right:.4em;
-  padding:0 .4em 0 .4em;
-  color:#7f7f7f
+.chroma .ow{
+  color:#ff7b72;
+  font-weight:bold
 }
 
-.code-mode-dark .highlight .ln{
-  margin-right:.4em;
-  padding:0 .4em 0 .4em;
-  color:#7f7f7f
+.chroma .c{
+  color:#8b949e;
+  font-style:italic
 }
 
-.code-mode-dark .highlight .kn{
-  color:#f92672
+.chroma .ch{
+  color:#8b949e;
+  font-style:italic
 }
 
-.code-mode-dark .highlight .nt{
-  color:#f92672
+.chroma .cm{
+  color:#8b949e;
+  font-style:italic
 }
 
-.code-mode-dark .highlight .ow{
-  color:#f92672
+.chroma .c1{
+  color:#8b949e;
+  font-style:italic
 }
 
-.code-mode-dark .highlight .gd{
-  color:#f92672
+.chroma .cs{
+  color:#8b949e;
+  font-weight:bold;
+  font-style:italic
 }
 
-.code-mode-dark .highlight .nb{
-  --tw-text-opacity: 1;
-  color: rgba(129, 238, 202, var(--tw-text-opacity))
+.chroma .cp{
+  color:#8b949e;
+  font-weight:bold;
+  font-style:italic
 }
 
-.code-mode-dark .highlight .err{
-  --tw-text-opacity: 1;
-  color: rgba(254, 178, 178, var(--tw-text-opacity))
+.chroma .cpf{
+  color:#8b949e;
+  font-weight:bold;
+  font-style:italic
 }
 
-.code-mode-dark .highlight .p{
-  --tw-text-opacity: 1;
-  color: rgba(190, 191, 201, var(--tw-text-opacity))
+.chroma .gd{
+  color:#ffa198;
+  background-color:#490202
 }
 
-.code-mode-dark .highlight .nl{
-  font-weight: 400;
-  --tw-text-opacity: 1;
-  color: rgba(216, 217, 223, var(--tw-text-opacity))
+.chroma .ge{
+  font-style:italic
 }
 
-.code-mode-dark .highlight .ld{
-  --tw-text-opacity: 1;
-  color: rgba(250, 212, 158, var(--tw-text-opacity))
+.chroma .gr{
+  color:#ffa198
 }
 
-.code-mode-dark .highlight .s, .code-mode-dark .highlight .sa, .code-mode-dark .highlight .sb, .code-mode-dark .highlight .sc, .code-mode-dark .highlight .dl, .code-mode-dark .highlight .sd, .code-mode-dark .highlight .s2, .code-mode-dark .highlight .sh, .code-mode-dark .highlight .si, .code-mode-dark .highlight .sx, .code-mode-dark .highlight .sr, .code-mode-dark .highlight .s1, .code-mode-dark .highlight .ss{
-  --tw-text-opacity: 1;
-  color: rgba(250, 212, 158, var(--tw-text-opacity));
+.chroma .gh{
+  color:#79c0ff;
+  font-weight:bold
 }
 
-.code-mode-dark .highlight .l, .code-mode-dark .highlight .se, .code-mode-dark .highlight .m, .code-mode-dark .highlight .mb, .code-mode-dark .highlight .mf, .code-mode-dark .highlight .mh, .code-mode-dark .highlight .mi, .code-mode-dark .highlight .il, .code-mode-dark .highlight .mo{
-  --tw-text-opacity: 1;
-  color: rgba(129, 238, 202, var(--tw-text-opacity));
+.chroma .gi{
+  color:#56d364;
+  background-color:#0f5323
 }
 
-.code-mode-dark .highlight .k, .code-mode-dark .highlight .kc, .code-mode-dark .highlight .kd, .code-mode-dark .highlight .kp, .code-mode-dark .highlight .kr, .code-mode-dark .highlight .kt{
-  font-weight: 400;
-  --tw-text-opacity: 1;
-  color: rgba(232, 214, 233, var(--tw-text-opacity));
+.chroma .go{
+  color:#8b949e
 }
 
-.code-mode-dark .highlight .na, .code-mode-dark .highlight .nc, .code-mode-dark .highlight .no, .code-mode-dark .highlight .nd, .code-mode-dark .highlight .ne, .code-mode-dark .highlight .nf, .code-mode-dark .highlight .nx, .code-mode-dark .highlight .n, .code-mode-dark .highlight .gi{
-  --tw-text-opacity: 1;
-  color: rgba(219, 222, 247, var(--tw-text-opacity));
+.chroma .gp{
+  color:#8b949e
 }
 
-.code-mode-dark .highlight .c, .code-mode-dark .highlight .ch, .code-mode-dark .highlight .c1, .code-mode-dark .highlight .cs, .code-mode-dark .highlight .cp, .code-mode-dark .highlight .cpf, .code-mode-dark .highlight .gu, .code-mode-dark .highlight .cm{
-  --tw-text-opacity: 1;
-  color: rgba(190, 191, 201, var(--tw-text-opacity));
+.chroma .gs{
+  font-weight:bold
 }
 
-.code-mode-dark .highlight .o{
-  --tw-text-opacity: 1;
-  color: rgba(190, 191, 201, var(--tw-text-opacity))
+.chroma .gu{
+  color:#79c0ff
 }
 
-.code-mode-dark.code-pulumi .highlight .n, .code-mode-dark.code-pulumi .highlight .k{
-  --tw-text-opacity: 1;
-  color: rgba(229, 229, 233, var(--tw-text-opacity));
+.chroma .gt{
+  color:#ff7b72
 }
 
-.code-mode-dark.code-pulumi .highlight .nv{
-  --tw-text-opacity: 1;
-  color: rgba(219, 222, 247, var(--tw-text-opacity))
+.chroma .gl{
+  text-decoration:underline
 }
 
-.code-mode-dark.code-pulumi .highlight .err{
-  --tw-text-opacity: 1;
-  color: rgba(142, 143, 151, var(--tw-text-opacity))
+.chroma .w{
+  color:#6e7681
 }
 
 code{
   overflow-wrap: break-word;
   border-radius: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(249, 249, 250, var(--tw-bg-opacity));
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-size: 0.875rem;
-  line-height: 1.25rem
+  line-height: 1.25rem;
+  line-height: 1.625;
+  font-size:.8em
 }
 
 h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{
@@ -3026,13 +2958,15 @@ pre, .code-max-h{
 pre{
   overflow-x: auto;
   --tw-bg-opacity: 1;
-  background-color: rgba(249, 249, 250, var(--tw-bg-opacity));
+  background-color: rgba(19, 19, 20, var(--tw-bg-opacity));
   padding-left: 1.25rem;
   padding-right: 1.25rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-right: 2rem;
   line-height: 1.5;
+  --tw-text-opacity: 1;
+  color: rgba(216, 217, 223, var(--tw-text-opacity));
   tab-size:4
 }
 
@@ -3304,8 +3238,6 @@ section.cloud-overview .code-tabbed .code-tabbed-tabs .code-tabbed-tab{
   margin-top: 1px;
   margin-right: 1px;
   border-radius: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(249, 249, 250, var(--tw-bg-opacity));
   padding-top: 0.25rem;
   padding-top: 0.5rem;
   padding-right: 0.5rem;
@@ -18891,15 +18823,8 @@ pulumi-choosable>div:first-child:not(.active){
   display:none
 }
 
-pulumi-choosable .code-mode-dark pre.chroma{
-  --tw-bg-opacity: 1;
-  background-color: rgba(19, 19, 20, var(--tw-bg-opacity))
-}
-
 pulumi-choosable pre.chroma{
-  margin-top: 0px;
-  --tw-bg-opacity: 1;
-  background-color: rgba(249, 249, 250, var(--tw-bg-opacity))
+  margin-top: 0px
 }
 
 .no-copy pulumi-choosable .copy-button-container{
diff --git a/themes/default/theme/src/scss/_chroma.scss b/themes/default/theme/src/scss/_chroma.scss
new file mode 100644
index 00000000000..24168d48a6f
--- /dev/null
+++ b/themes/default/theme/src/scss/_chroma.scss
@@ -0,0 +1,86 @@
+/* Background */ .bg { color: #c9d1d9; background-color: #0d1117; }
+/* PreWrapper */ .chroma { color: #c9d1d9; background-color: #0d1117; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #f85149 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #ff7b72 }
+/* KeywordConstant */ .chroma .kc { color: #79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
+/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
+/* KeywordType */ .chroma .kt { color: #ff7b72 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na {  }
+/* NameBuiltin */ .chroma .nb {  }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
+/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #ffa657 }
+/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #ff7b72 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color: #79c0ff }
+/* NameTag */ .chroma .nt { color: #7ee787 }
+/* NameVariable */ .chroma .nv { color: #79c0ff }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l { color: #a5d6ff }
+/* LiteralDate */ .chroma .ld { color: #79c0ff }
+/* LiteralString */ .chroma .s { color: #a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
+/* LiteralNumber */ .chroma .m { color: #a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
+/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr { color: #ffa198 }
+/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
+/* GenericOutput */ .chroma .go { color: #8b949e }
+/* GenericPrompt */ .chroma .gp { color: #8b949e }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #79c0ff }
+/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #6e7681 }
diff --git a/themes/default/theme/src/scss/_code.scss b/themes/default/theme/src/scss/_code.scss
index dea754a348d..131494a7cb5 100644
--- a/themes/default/theme/src/scss/_code.scss
+++ b/themes/default/theme/src/scss/_code.scss
@@ -1,8 +1,9 @@
-@import "pygments";
+@import "chroma";
 @import "colors";
 
 code {
-    @apply bg-gray-100 rounded py-1 px-2 text-sm break-words;
+    @apply rounded py-1 px-2 text-sm break-words leading-relaxed;
+    font-size: 0.8em;
 }
 
 h1,
@@ -22,7 +23,7 @@ pre,
 }
 
 pre {
-    @apply bg-gray-100 py-4 px-5 pr-8 overflow-x-auto leading-normal;
+    @apply bg-gray-900 text-gray-400 py-4 px-5 pr-8 overflow-x-auto leading-normal;
 
     .code-mode-dark & {
         @apply bg-gray-900 border-none shadow-md;
diff --git a/themes/default/theme/src/scss/_copy-button.scss b/themes/default/theme/src/scss/_copy-button.scss
index bee404a33d5..add435cf987 100644
--- a/themes/default/theme/src/scss/_copy-button.scss
+++ b/themes/default/theme/src/scss/_copy-button.scss
@@ -1,7 +1,7 @@
 @import "mixins";
 
 .copy-button-container {
-    @apply absolute top-0 right-0 mt-px mr-px pt-1 pb-0 pt-2 pr-2 rounded bg-gray-100;
+    @apply absolute top-0 right-0 mt-px mr-px pt-1 pb-0 pt-2 pr-2 rounded;
 
     .code-mode-dark & {
         @apply bg-gray-900;
diff --git a/themes/default/theme/src/scss/_pygments.scss b/themes/default/theme/src/scss/_pygments.scss
deleted file mode 100644
index ef8fad3f30b..00000000000
--- a/themes/default/theme/src/scss/_pygments.scss
+++ /dev/null
@@ -1,477 +0,0 @@
-/*
-    Generated using Hugo's syntax-highlighing generator:
-    https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css
-
-    For a reference of available styles, see:
-    https://help.farbox.com/pygments.html
-
- */
-
-/*
-    Light mode (the default) uses the "friendly" theme.
- */
-
-/* Error */
-.highlight .err {
-}
-/* LineTableTD */
-.highlight .lntd {
-    vertical-align: top;
-    padding: 0;
-    margin: 0;
-    border: 0;
-}
-/* LineTable */
-.highlight .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    width: auto;
-    overflow: auto;
-    display: block;
-}
-/* LineHighlight */
-.highlight .hl {
-    display: block;
-    width: 100%;
-    background-color: #ffffcc;
-}
-/* LineNumbersTable */
-.highlight .lnt {
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f;
-}
-/* LineNumbers */
-.highlight .ln {
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f;
-}
-/* Keyword */
-.highlight .k {
-    color: #007020;
-}
-/* KeywordConstant */
-.highlight .kc {
-    color: #007020;
-}
-/* KeywordDeclaration */
-.highlight .kd {
-    color: #007020;
-}
-/* KeywordNamespace */
-.highlight .kn {
-    color: #007020;
-}
-/* KeywordPseudo */
-.highlight .kp {
-    color: #007020;
-}
-/* KeywordReserved */
-.highlight .kr {
-    color: #007020;
-}
-/* KeywordType */
-.highlight .kt {
-    color: #902000;
-}
-/* NameAttribute */
-.highlight .na {
-    color: #4070a0;
-}
-/* NameBuiltin */
-.highlight .nb {
-    color: #007020;
-}
-/* NameClass */
-.highlight .nc {
-    color: #0e84b5;
-}
-/* NameConstant */
-.highlight .no {
-    color: #60add5;
-}
-/* NameDecorator */
-.highlight .nd {
-    color: #555555;
-}
-/* NameEntity */
-.highlight .ni {
-    color: #d55537;
-}
-/* NameException */
-.highlight .ne {
-    color: #007020;
-}
-/* NameFunction */
-.highlight .nf {
-    color: #06287e;
-}
-/* NameLabel */
-.highlight .nl {
-    color: #002070;
-}
-/* NameNamespace */
-.highlight .nn {
-    color: #0e84b5;
-}
-/* NameTag */
-.highlight .nt {
-    color: #062873;
-}
-/* NameVariable */
-.highlight .nv {
-    color: #bb60d5;
-}
-/* LiteralString */
-.highlight .s {
-    color: #4070a0;
-}
-/* LiteralStringAffix */
-.highlight .sa {
-    color: #4070a0;
-}
-/* LiteralStringBacktick */
-.highlight .sb {
-    color: #4070a0;
-}
-/* LiteralStringChar */
-.highlight .sc {
-    color: #4070a0;
-}
-/* LiteralStringDelimiter */
-.highlight .dl {
-    color: #4070a0;
-}
-/* LiteralStringDoc */
-.highlight .sd {
-    color: #4070a0;
-    font-style: italic;
-}
-/* LiteralStringDouble */
-.highlight .s2 {
-    color: #4070a0;
-}
-/* LiteralStringEscape */
-.highlight .se {
-    color: #4070a0;
-}
-/* LiteralStringHeredoc */
-.highlight .sh {
-    color: #4070a0;
-}
-/* LiteralStringInterpol */
-.highlight .si {
-    color: #70a0d0;
-    font-style: italic;
-}
-/* LiteralStringOther */
-.highlight .sx {
-    color: #c65d09;
-}
-/* LiteralStringRegex */
-.highlight .sr {
-    color: #235388;
-}
-/* LiteralStringSingle */
-.highlight .s1 {
-    color: #4070a0;
-}
-/* LiteralStringSymbol */
-.highlight .ss {
-    color: #517918;
-}
-/* LiteralNumber */
-.highlight .m {
-    color: #40a070;
-}
-/* LiteralNumberBin */
-.highlight .mb {
-    color: #40a070;
-}
-/* LiteralNumberFloat */
-.highlight .mf {
-    color: #40a070;
-}
-/* LiteralNumberHex */
-.highlight .mh {
-    color: #40a070;
-}
-/* LiteralNumberInteger */
-.highlight .mi {
-    color: #40a070;
-}
-/* LiteralNumberIntegerLong */
-.highlight .il {
-    color: #40a070;
-}
-/* LiteralNumberOct */
-.highlight .mo {
-    color: #40a070;
-}
-/* Operator */
-.highlight .o {
-    color: #666666;
-}
-/* OperatorWord */
-.highlight .ow {
-    color: #007020;
-}
-/* Comment */
-.highlight .c {
-    color: #60a0b0;
-}
-/* CommentHashbang */
-.highlight .ch {
-    color: #60a0b0;
-}
-/* CommentMultiline */
-.highlight .cm {
-    color: #60a0b0;
-}
-/* CommentSingle */
-.highlight .c1 {
-    color: #60a0b0;
-}
-/* CommentSpecial */
-.highlight .cs {
-    color: #60a0b0;
-    background-color: #fff0f0;
-}
-/* CommentPreproc */
-.highlight .cp {
-    color: #007020;
-}
-/* CommentPreprocFile */
-.highlight .cpf {
-    color: #007020;
-}
-/* GenericDeleted */
-.highlight .gd {
-    color: #a00000;
-}
-/* GenericEmph */
-.highlight .ge {
-}
-/* GenericError */
-.highlight .gr {
-    color: #ff0000;
-}
-/* GenericHeading */
-.highlight .gh {
-    color: #000080;
-}
-/* GenericInserted */
-.highlight .gi {
-    color: #00a000;
-}
-/* GenericOutput */
-.highlight .go {
-    color: #888888;
-}
-/* GenericPrompt */
-.highlight .gp {
-    color: #c65d09;
-}
-/* GenericStrong */
-.highlight .gs {
-}
-/* GenericSubheading */
-.highlight .gu {
-    color: #800080;
-}
-/* GenericTraceback */
-.highlight .gt {
-    color: #0044dd;
-}
-/* GenericUnderline */
-.highlight .gl {
-    text-decoration: underline;
-}
-/* TextWhitespace */
-.highlight .w {
-    color: #bbbbbb;
-}
-
-/*
-    Dark mode customizes the "monokai" theme.
-*/
-
-.code-mode-dark {
-    /* LineTableTD */
-    .highlight .lntd {
-        vertical-align: top;
-        padding: 0;
-        margin: 0;
-        border: 0;
-    }
-    /* LineTable */
-    .highlight .lntable {
-        border-spacing: 0;
-        padding: 0;
-        margin: 0;
-        border: 0;
-        width: auto;
-        overflow: auto;
-        display: block;
-    }
-    /* LineHighlight */
-    .highlight .hl {
-        display: block;
-        width: 100%;
-        background-color: #ffffcc;
-    }
-    /* LineNumbersTable */
-    .highlight .lnt {
-        margin-right: 0.4em;
-        padding: 0 0.4em 0 0.4em;
-        color: #7f7f7f;
-    }
-    /* LineNumbers */
-    .highlight .ln {
-        margin-right: 0.4em;
-        padding: 0 0.4em 0 0.4em;
-        color: #7f7f7f;
-    }
-    /* KeywordNamespace */
-    .highlight .kn {
-        color: #f92672;
-    }
-    /* NameTag */
-    .highlight .nt {
-        color: #f92672;
-    }
-    /* OperatorWord */
-    .highlight .ow {
-        color: #f92672;
-    }
-    /* GenericDeleted */
-    .highlight .gd {
-        color: #f92672;
-    }
-    /* GenericEmph */
-    .highlight .ge {
-    }
-    /* GenericStrong */
-    .highlight .gs {
-    }
-
-    .highlight {
-        /* NameBuiltin */
-        .nb {
-            @apply text-green-300;
-        }
-
-        /* Error */
-        .err {
-            @apply text-red-300;
-        }
-
-        /* Separators */
-        .p {
-            @apply text-gray-500;
-        }
-
-        /* NameLabel */
-        .nl {
-            @apply text-gray-400 font-normal;
-        }
-
-        /* LiteralDate */
-        .ld {
-            @apply text-orange-300;
-        }
-
-        /* LiteralString */
-        .s,
-        /* LiteralStringAffix */ .sa,
-        /* LiteralStringBacktick */ .sb,
-        /* LiteralStringChar */ .sc,
-        /* LiteralStringDelimiter */ .dl,
-        /* LiteralStringDoc */ .sd,
-        /* LiteralStringDouble */ .s2,
-        /* LiteralStringHeredoc */ .sh,
-        /* LiteralStringInterpol */ .si,
-        /* LiteralStringOther */ .sx,
-        /* LiteralStringRegex */ .sr,
-        /* LiteralStringSingle */ .s1,
-        /* LiteralStringSymbol */ .ss, {
-            @apply text-orange-300;
-        }
-
-        /* Literal */
-        .l,
-        /* LiteralStringEscape */ .se,
-        /* LiteralNumber */ .m,
-        /* LiteralNumberBin */ .mb,
-        /* LiteralNumberFloat */ .mf,
-        /* LiteralNumberHex */ .mh,
-        /* LiteralNumberInteger */ .mi,
-        /* LiteralNumberIntegerLong */ .il,
-        /* LiteralNumberOct */ .mo, {
-            @apply text-green-300;
-        }
-
-        /* Keyword */
-        .k,
-        /* KeywordConstant */ .kc,
-        /* KeywordDeclaration */ .kd,
-        /* KeywordPseudo */ .kp,
-        /* KeywordReserved */ .kr,
-        /* KeywordType */ .kt, {
-            @apply text-purple-200 font-normal;
-        }
-
-        /* NameAttribute */
-        .na,
-        /* NameClass */ .nc,
-        /* NameConstant */ .no,
-        /* NameDecorator */ .nd,
-        /* NameException */ .ne,
-        /* NameFunction */ .nf,
-        /* NameOther */ .nx,
-        /* NameOther */ .n,
-        /* GenericInserted */ .gi, {
-            @apply text-blue-200;
-        }
-
-        /* Comment */
-        .c,
-        /* CommentHashbang */ .ch,
-        /* CommentSingle */ .c1,
-        /* CommentSpecial */ .cs,
-        /* CommentPreproc */ .cp,
-        /* CommentPreprocFile */ .cpf,
-        /* GenericSubheading */ .gu,
-        /* CommentMultiline */ .cm, {
-            @apply text-gray-500;
-        }
-
-        /* Operator */
-        .o {
-            @apply text-gray-500;
-        }
-    }
-
-    &.code-pulumi {
-        .highlight {
-            /* Name */
-            .n,
-            /* Keyword */ .k, {
-                @apply text-gray-300;
-            }
-
-            /* NameVariable */
-            .nv {
-                @apply text-blue-200;
-            }
-
-            /* Error */
-            .err {
-                @apply text-gray-600;
-            }
-        }
-    }
-}
diff --git a/themes/default/theme/src/scss/components/_choosable.scss b/themes/default/theme/src/scss/components/_choosable.scss
index 653d14d8066..d8992949ba5 100644
--- a/themes/default/theme/src/scss/components/_choosable.scss
+++ b/themes/default/theme/src/scss/components/_choosable.scss
@@ -10,17 +10,8 @@ pulumi-choosable {
     // override this behavior, just apply the local Tailwind utility class "inline".
     display: block;
 
-    .code-mode-dark pre.chroma {
-        @apply bg-gray-900;
-    }
-
     pre.chroma {
-        @apply mt-0 bg-gray-100;
-    }
-
-    .highlight,
-    .chroma {
-        // @apply border-transparent;
+        @apply mt-0;
     }
 
     .copy-button-container {