Arjen Wiersma

I like my modus themes for Emacs, and I thought it would be fun to bring them to my writefreely blog as well.

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);
}