Themes

You can switch themes in Admin > Themes as well as edit the CSS directly. At the top of each theme is a set of CSS variables which make it easy to change things like colors, spacing, and other settings across the entire theme and in one place.

/* ==========================================
   DESIGN VARIABLES
   Change these to customize your site
   ========================================== */

:root {
  /* Layout */
  --container-width: 56rem;
  --aside-content-width: 42rem;
  --content-width: 50rem;

  /* Typography */
  --font-scale: 1.125em;

  /* Font Sizes */
  --text-xxs: 0.7rem;
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-gallery: 0.75rem;
  --aside-width: 190px;

  /* Colors */
  --color-bg: #f6f4f0;
  --color-text: #2f2f2f;
  --color-heading: #a11b0e;
  --color-logo: #a11b0e;
  --color-nav-active: #a11b0e;
  --color-muted: #666666;
  --color-link: #a11b0e;
  --color-link-visited: #a11b0e;
  --color-link-collection: #020202;
  --color-border: #cccccc;
  --color-code-bg: #dedede;
  --color-code-text: #222222;
  --color-highlight-text: #c7dcff;
}

You’re welcome to edit the entire CSS file if you wish and know what you’re doing. If you run into trouble, you can always revert back to the original CSS for that theme.