code-1 dark-scheme

Sparisoma Viridi

1 Jan 2026 · 8 mins read · edit

notes

Finally a dark scheme can be implemented to butiran after several months, or more to years, expecting it. The process is hard and through iterative test and discussion with AI assistant ¹, which is the firts consultation session in 2026. It is a very, very early morning session 😄.
There is still problem with Goldmark renderer with unsafe = true, which is not recommended only for single-author blog, but not secure site, design-heavy site, and multi author / CMS ².

hugo.toml

Location /

current version

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

[markup.goldmark.renderer]
unsafe = true

are removed.

previous version

baseURL = 'https://dudung.github.io/butiran/'
#relativeURLs = true
#canonifyURLs = true

languageCode = 'en-us'
title = 'butiran'
theme = 'default'

ignoreLogs = ['warning-goldmark-raw-html']
enableEmoji = true

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

[pagination]
pagerSize = 35

disableKinds = ["RSS", "sitemap", "robotsTXT"]

[taxonomies]
#  author = "authors"
#  tag = "tags"
#  category = "categories"

[[menu.main]]
  name = 'Home'
  weight = 0
  identifier = 'home'
  url = '/'

[params]
disableShortcodes = true

main.css

Location /assets/css/

new version

/* ================================
   Theme variables
   ================================ */

:root {
  color-scheme: light dark;

  /* Light theme */
  --bg: #ffffff;
  --fg: #222222;
  --border: #222222;
  --muted-border: #dddddd;
  --link: #0000ee;
  --box-bg: #ffffff;
  --accent: #4f81bd;
  --hover-bg: #f0f0f0;

  /* Scrollbar (Firefox) */
  scrollbar-color: var(--accent) var(--hover-bg);
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #c9d1d9;
    --border: #30363d;
    --muted-border: #30363d;
    --link: #58a6ff;
    --box-bg: #161b22;
    --accent: #58a6ff;
    --hover-bg: #21262d;

    scrollbar-color: var(--accent) var(--hover-bg);
  }

  .logo-container svg {
    filter: brightness(0.8) saturate(0.85);
  }  
}

/* ================================
   Base layout
   ================================ */

html {
  scrollbar-width: thin;
}

body {
  margin: 2em;
  padding: 0;
  max-width: 768px;

  background: var(--bg);
  color: var(--fg);

  font-family: Calibri;
  line-height: 1.5;
}

/* ================================
   Header / Footer
   ================================ */

header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

footer {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

/* ================================
   Links / Navigation
   ================================ */

a {
  color: var(--link);
  text-decoration: none;
}

nav {
  text-align: right;
}

nav > ul > li {
  display: inline;
  padding-left: 0.5em;
}

/* ================================
   Homepage post boxes
   ================================ */

.homepage-posts-box {
  display: inline-block;
  padding: 4px 16px;
  margin: 2px 0px;

  height: 50px;
  width: 70px;

  font-size: 80%;
  line-height: 18.7px;
  text-align: left;
  word-break: break-all;

  background: var(--box-bg);
  border: 1px solid var(--muted-border);
  border-radius: 8px;

  overflow: auto;

  scrollbar-color: var(--accent) var(--hover-bg);
  scrollbar-width: thin;
}

.homepage-post-date {
  font-size: 95%;
}

.posts-box-container {
  text-align: left;
  line-height: 10px;
}

/* ================================
   Pagination
   ================================ */

.pagination-container {
}

.pagination {
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pagination a {
  padding: 5px 10px;
  border: 1px solid var(--muted-border);
  border-radius: 4px;

  color: var(--fg);
  text-decoration: none;

  transition: background-color 0.3s;
}

.pagination a:hover {
  background-color: var(--hover-bg);
}

.pagination .current {
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 4px;

  background-color: var(--accent);
  color: #ffffff;
}

.pagination .prev,
.pagination .current,
.pagination .page,
.pagination .next {
  font-size: 0.8rem;
  padding: 0 5px;
}

/* ================================
   Footnotes
   ================================ */

.footnotes {
  border-top: 0px solid var(--border);
}

.footnotes > hr {
  display: none;
}

.footnotes > ol > li:not(:first-child):not(:last-child) {
  margin: -1em 0;
}

/* ================================
   Footnote links
   ================================ */

a[href^="#fn:"],
a[href^="#fnref:"] {
  font-family: monospace;
}

a[href^="#fn:"]:before {
  content: '[';
}

a[href^="#fn:"]:after {
  content: ']';
}

.category-card .inline-svg svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  display: block;
}

/*
.logo-container svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
}
*/

.logo-container {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  stroke-width: 1.75px; /* CRITICAL */
  /* fill: none; */
}

.category-card {
  color: #222; /* light mode default */
}

old version

/* main.css */

html {
  scrollbar-color: #4f81bd #f1f1f1;
}

body {
  margin: 2em;
  color: #222;
  padding: 0;
  font-family: Calibri;
  max-width: 768px;
  line-height: 1.5;
}


header {
  border-bottom: 1px solid #222;
  margin-bottom: 1rem;
}

footer {
  border-top: 1px solid #222;
  margin-top: 1rem;
}

a {
  color: #00e;
  text-decoration: none;
}

nav {
  text-align: right;
}

nav > ul > li {
  display: inline;
  padding-left: 0.5em;
}


.homepage-posts-box {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 8px;
  text-align: left;
  word-break: break-all;
  margin: 2px 0px;
  font-size: 80%;
  background: #f4f4f4;
  border: 1px solid #ccc;
  height: 50px;
  width: 70px;
  scrollbar-color: #4f81bd #f1f1f1;
  scrollbar-width: thin;
  overflow: auto;
  line-height: 18.7px;
}

.homepage-post-date {
  font-size: 95%;
}

.posts-box-container {
  text-align: left;
  line-height: 10px;
}

.pagination-container {
}

.pagination {
  /* display: flex; */
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pagination a {
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  transition: background-color 0.3s;
}

.pagination a:hover {
  background-color: #f0f0f0;
}

.pagination .current {
  padding: 5px 10px;
  border: 1px solid #333;
  border-radius: 4px;
  /*background-color: #333;*/
  background-color: #4f81bd;
  color: #fff;
  /*font-weight: bold;*/
}

.pagination .prev,
.pagination .current,
.pagination .page,
.pagination .next {
  font-size: 0.8rem; /* Smaller font size */
  /* color: #888; */ /* Subtle color */
  padding: 0 5px; /* Optional padding */
}


.footnotes {
  border-top: 0px solid #222;
  > hr {
     display: none;
   }
  > ol > li:not(:first-child):not(:last-child) {
    margin: -1em 0;
  }
}

a[href^="#fn:"],
a[href^="#fnref:"] {
  font-family: monospace;
}
a[href^="#fn:"]:before{ content: '[' }
a[href^="#fn:"]:after{ content: ']' }

note.css

Location /static/css/

new version

/* note.css */

.note-container {
  background-color: var(--bg);
  color: var(--fg);
}

.note-title {
  color: var(--fg);
}

.note-content {
  color: var(--fg);
}

.note-content h2 {
  #border: 0px #4f81bd solid;
  border-bottom: 0px solid var(--accent);
  margin-bottom: -0.5em;
}

.info-after-title {
  display: flex;
  color: var(--muted-text);
}

.date-reading-time-edit {
  flex: 2.5;
  text-align: right;
  border: 0px solid blue;
}

.authors-container {
  flex: 5;
  padding-left: 0;
  margin: 0;
  border: 0px solid blue;
}

.author {
  display: inline-block;
}

.author::after {
  content: ",";
}

.author:last-child::after {
  content: "";
}

.note-content pre {
  padding: 1.5em 2em;
  word-wrap: break-word;
  background: var(--code-bg);
  color: var(--code-text);
  overflow-x: scroll;
}

.mol-container {
  margin: auto;
  position: relative;
  height: 300px;
  width: 300px;
}

.scatter-container {
  width: 360px;
  height: 200px;
}

old version

/* note.css */

.note-container {
}

.note-title {
}

.note-content {
}

.note-content h2 {
  border: 0px #4f81bd solid;
  margin-bottom: -0.5em;
}

.info-after-title {
  display: flex;
}

.date-reading-time-edit {
  flex: 2.5;
  text-align: right;
  border: 0px solid blue;
}

.authors-container {
  flex: 5;
  padding-left: 0;
  margin: 0;
  border: 0px solid blue;
}

.author {
  display: inline-block;
}

.author::after {
  content: ",";
}

.author:last-child::after {
  content: "";
}

.note-content pre {
  padding: 1.5em 2em;
  word-wrap: break-word;
  overflow-x: scroll;
}

.mol-container {
  margin: auto;
  position: relative;
  height: 300px;
  width: 300px;
}

.scatter-container {
  width: 360px;
  height: 200px;
}

svg

Location /static/images/symbols/

na.svg – expected since dark scheme friendly

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
</svg>

mobil-ui-ux.svg – not dark scheme friendly

<?xml version="1.0" ?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 6.3499998 6.3499998" id="svg8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs2"/><path d="m 0.76754147,2.1171874 a 0.26495279,0.26495279 0 0 0 0.0253906,0.5292969 H 5.556604 a 0.26464845,0.26464845 0 1 0 0,-0.5292969 H 0.7929321 a 0.26460978,0.26460978 0 0 0 -0.0253906,0 z" id="path1920" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00001d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.52916664;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:204.09448242;stroke-opacity:1;paint-order:stroke fill markers;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/><path d="m 1.3984008,0.52929682 c -0.47658607,-1e-8 -0.86914057,0.39255453 -0.86914057,0.86914058 v 3.4218749 c 0,0.4765863 0.39255453,0.8691407 0.86914057,0.8691407 h 3.5546875 c 0.4765863,0 0.8671875,-0.3925544 0.8671875,-0.8691407 V 1.3984374 c 0,-0.47658603 -0.3906012,-0.86914059 -0.8671875,-0.86914058 z m 0,0.52929698 h 3.5546875 c 0.192581,0 0.3378907,0.1472627 0.3378907,0.3398436 v 3.4218749 c 0,0.192581 -0.1453097,0.3398438 -0.3378907,0.3398438 H 1.3984008 c -0.1925808,0 -0.3398437,-0.1472628 -0.3398437,-0.3398438 V 1.3984374 c 0,-0.1925809 0.1472629,-0.3398438 0.3398437,-0.3398436 z" id="rect1918" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00001d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.52916664;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:204.09448242;stroke-opacity:1;paint-order:stroke fill markers;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/><path d="m 1.587854,1.3222655 a 0.26464847,0.26464847 0 1 0 0,0.5292969 h 0.5292969 a 0.26464845,0.26464845 0 1 0 0,-0.5292969 z" id="path1922" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff2876;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.52916664;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:204.09448242;stroke-opacity:1;paint-order:stroke fill markers;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/></svg>

category.html

Location /layouts/shortcodes/card/

both versions (old is as comment)

<style>
.category-card {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between; /* space between top row and bottom */
  width: 80px;
  height: 80px;
  margin: 0.3em;
  border: 1px solid var(--muted-border);
  border-radius: 8px;
  padding: 4px;
  background: var(--box-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--fg);
}
.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.category-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.category-card .logo-container {
  width: 20px;
  height: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.category-card img, .category-card svg {
  max-width: 100%;
  max-height: 100%;
}
.category-card .count {
  font-size: 0.75em;
  color:#888;
}
.category-card .title-wrapper {
  flex: 1;
  display: flex;
  align-items: center;      /* vertically center if short */
  justify-content: center;
  text-align: center;
  padding: 0 6px;
}
.category-card .title {
  font-weight: 600;
  font-size: 0.85em;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* up to 3 lines */
  overflow: hidden;
  word-break: break-word;
}
</style>

<!--a class="category-card" href="{{ .Get "link" }}">
  <div class="top-row">
    {{ with .Get "logo" }}
    <div class="logo-container">
      <img src="{{ . }}" alt="{{ $.Get "name" }} logo" loading="lazy">
    </div>
    {{ end }}
    <div class="count">{{ .Get "count" }}</div>
  </div>
  <div class="title-wrapper">
    <div class="title">{{ .Get "name" }}</div>
  </div>
</a-->

<a class="category-card" href="{{ .Get "link" }}">
  <div class="top-row">
    {{ with .Get "logo" }}
      {{ $url := . }}
      {{ $fs := printf "static%s" $url }}
      <div class="logo-container">
        {{ readFile $fs | safeHTML }}
      </div>
    {{ end }}
    <div class="count">{{ .Get "count" }}</div>
  </div>
  <div class="title-wrapper">
    <div class="title">{{ .Get "name" }}</div>
  </div>
</a>

refs

GPT-5.2, “Dark theme for Hugo”, ChatGPT, 1 Jan 2025, url https://chatgpt.com/share/6955fb91-9b84-800a-827d-786e5c653050 [20260101]. ↩︎
GPT-5.2, “Goldmark SVG Handling”, ChatGPT, 1 Jan 2025, url https://chatgpt.com/share/6956418e-3958-800a-81fc-2f61453773c9 [20260101]. ↩︎