Below is the CSS you can drop in your Customize, it will automatically switch between light and dark variants.

/* =====================
   WriteFreely Modus Theme
   Auto light/dark via prefers-color-scheme
   ===================== */

/* Modus Operandi (Light) — default */
:root {
  --bg:          #ffffff;
  --bg-alt:      #f2f2f2;
  --surface:     #e8e8e8;
  --border:      #c6c6c6;
  --text:        #000000;
  --text-muted:  #595959;
  --text-faint:  #8a8a8a;
  --accent:      #8f0075;   /* Modus magenta */
  --accent-dim:  #c04fa8;
  --link:        #0031a9;   /* Modus blue */
  --link-hover:  #003497;
  --code-fg:     #005e00;   /* Modus green for code */
}

/* Modus Vivendi (Dark) — activated by OS dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #000000;
    --bg-alt:      #1e1e1e;
    --surface:     #2a2a2a;
    --border:      #444444;
    --text:        #ffffff;
    --text-muted:  #ababab;
    --text-faint:  #6a6a6a;
    --accent:      #feacd0;   /* Modus Vivendi magenta */
    --accent-dim:  #a04080;
    --link:        #79a8ff;   /* Modus Vivendi blue */
    --link-hover:  #a8c7ff;
    --code-fg:     #44bc44;   /* Modus Vivendi green */
  }
}

/* Base */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Georgia, serif;
  font-size: 18px;
}

/* Navigation / Header */
header, nav#blog-title {
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
}

header nav a,
nav#blog-title a {
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

header nav a:hover,
nav#blog-title a:hover {
  color: var(--accent);
}

/* Main content area */
section, #wrapper, #collection {
  max-width: 900px !important;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Post / Article */
article, .post {
  background: transparent;
  max-width: 900px !important;
}

article {
  background: transparent;
  max-width: 900px !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding-top: 1em;
}

h1.post-title a,
h2.post-title a,
h1 a, h2 a, h3 a {
  color: var(--text) !important;
}

h1.post-title a:hover,
h2.post-title a:hover,
h1 a:hover, h2 a:hover, h3 a:hover {
  color: var(--accent) !important;
}

/* Links */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

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

/* Paragraphs */
p {
  color: var(--text) !important;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.description {
  color: var(--text) !important;
  text-align: center;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--accent-dim);
  margin: 1.5em 0;
  padding: 0.5em 1.5em;
  color: var(--text-muted);
  font-style: italic;
  background: var(--bg-alt);
}

/* Code */
code {
  font-family: 'Courier New', monospace !important;
  font-size: 0.85em !important;
  background: var(--surface) !important;
  color: var(--code-fg) !important;
  border: 0px !important;
  padding: 0.15em 0.4em !important;
}

pre {
  background: var(--surface) !important;
  padding: 1.2em 1.5em !important;
  overflow-x: auto !important;
}

pre code {
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.9em !important;
  color: var(--code-fg) !important;
}

.post pre, .post code,
article pre, article code,
#post pre, #post code {
  background: var(--surface) !important;
  color: var(--code-fg) !important;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* Post metadata / date */
.post-meta, time, .date {
  color: var(--text-faint);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Post list (index page) */
.post-listing, #collection .posts {
  list-style: none;
  padding: 0;
}

.post-listing li, .post-list-item {
  border-bottom: 1px solid var(--border);
  padding: 1.2em 0;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.82rem;
  padding: 2rem 0;
  text-align: center;
}

footer a {
  color: var(--text-muted);
}

/* Read more link */
.read-more {
  color: var(--accent);
  font-size: 0.875rem;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.read-more:hover {
  color: var(--link-hover);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

/* Selection */
::selection {
  background: var(--accent-dim);
  color: #ffffff;
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

I will not be transferring all my notes over, but I thought it would be a very nice feature to share some of my notes with you. This year I am focussing on {{< backlink “choose-your-tools” “Clojure”>}} and {{< backlink “rust” “Rust”>}}, and as a result I will be posting my notes on the new things I learn.

I set myself a goal of creating a “self hosted comic book collection tool”. It should be very nice to create this using the insights from {{< backlink “zero2prod” “Zero 2 Production”>}}. My blog will be a sort of development log along the way.

#blog