README.md

My Custom CSS for Miniflux

https://github.com/andymason/miniflux-css-theme/blob/main/src/custom.css

style.css

/* Miniflux Custom CSS */
:root {
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --body-color: #1d1d1f;
  --body-background: #fff;
  --hr-border-color: #d2d2d7;
  --title-color: #1d1d1f;
  --link-color: #007aff;
  --link-focus-color: #007aff;
  --link-hover-color: #1d1d1f;
  --link-visited-color: #5856d6;

  --header-list-border-color: #d2d2d7;
  --header-link-color: #1d1d1f;
  --header-link-focus-color: #6e6e73;
  --header-link-hover-color: #6e6e73;
  --header-active-link-color: #1d1d1f;

  --page-header-title-border-color: #1d1d1f;

  --logo-color: #1d1d1f;
  --logo-hover-color-span: #1d1d1f;

  --table-border-color: #d2d2d7;
  --table-th-background: #f5f5f7;
  --table-th-color: #1d1d1f;
  --table-tr-hover-background-color: #f5f5f7;
  --table-tr-hover-color: #1d1d1f;

  --button-primary-border-color: #0071e3;
  --button-primary-background: #0071e3;
  --button-primary-color: #fff;
  --button-primary-focus-border-color: #0077ed;
  --button-primary-focus-background: #0077ed;

  --input-border: 1px solid #d2d2d7;
  --input-background: #fff;
  --input-color: #1d1d1f;
  --input-placeholder-color: #86868b;

  --input-focus-color: #1d1d1f;
  --input-focus-border-color: #0071e3;
  --input-focus-box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.3);

  --alert-color: #86868b;
  --alert-background-color: #fff2d4;
  --alert-border-color: #ffd60a;

  --alert-success-color: #34c759;
  --alert-success-background-color: #e5f8e8;
  --alert-success-border-color: #34c759;

  --alert-error-color: #ff3b30;
  --alert-error-background-color: #ffebeb;
  --alert-error-border-color: #ff3b30;

  --alert-info-color: #5ac8fa;
  --alert-info-background-color: #e8f7fd;
  --alert-info-border-color: #5ac8fa;

  --panel-background: #f5f5f7;
  --panel-border-color: #d2d2d7;
  --panel-color: #1d1d1f;

  --modal-background: #fff;
  --modal-color: #1d1d1f;
  --modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

  --pagination-link-color: #1d1d1f;
  --pagination-border-color: #d2d2d7;

  --category-color: #1d1d1f;
  --category-background-color: #fff2d4;
  --category-border-color: #ffd60a;
  --category-link-color: #1d1d1f;
  --category-link-hover-color: #1d1d1f;

  --item-border-color: #d2d2d7;
  --item-padding: 8px;
  --item-title-link-font-weight: 600;

  --item-status-read-title-link-color: #6e6e73;
  --item-status-read-title-focus-color: #6e6e73;

  --item-meta-focus-color: #6e6e73;
  --item-meta-li-color: #86868b;

  --current-item-border-width: 3px;
  --current-item-border-color: #0071e3;
  --current-item-box-shadow: none;

  --entry-header-border-color: #d2d2d7;
  --entry-header-title-link-color: #1d1d1f;
  --entry-content-color: #1d1d1f;
  --entry-content-code-color: #1d1d1f;
  --entry-content-code-background: #f5f5f7;
  --entry-content-code-border-color: #d2d2d7;
  --entry-content-quote-color: #6e6e73;
  --entry-content-abbr-border-color: #6e6e73;
  --entry-enclosure-border-color: #1d1d1f;

  --parsing-error-color: #1d1d1f;
  --feed-parsing-error-background-color: #fff2d4;
  --feed-parsing-error-border-style: solid;
  --feed-parsing-error-border-color: #ffd60a;

  --feed-has-unread-background-color: #e5f8e8;
  --feed-has-unread-border-style: solid;
  --feed-has-unread-border-color: #34c759;

  --category-has-unread-background-color: #e5f8e8;
  --category-has-unread-border-style: solid;
  --category-has-unread-border-color: #34c759;

  --keyboard-shortcuts-li-color: #1d1d1f;

  --counter-color: #6e6e73;
}

html {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-color: #c9d1d9;
    --body-background: #0d1117;
    --hr-border-color: #30363d;
    --title-color: #c9d1d9;
    --link-color: #58a6ff;
    --link-focus-color: #1f6feb;
    --link-hover-color: #1f6feb;
    --link-visited-color: #bf5af2;

    --header-list-border-color: #30363d;
    --header-link-color: #c9d1d9;
    --header-link-focus-color: #58a6ff;
    --header-link-hover-color: #58a6ff;
    --header-active-link-color: #8b949e;

    --page-header-title-border-color: #30363d;

    --logo-color: #c9d1d9;
    --logo-hover-color-span: #c9d1d9;

    --table-border-color: #30363d;
    --table-th-background: #161b22;
    --table-th-color: #c9d1d9;
    --table-tr-hover-background-color: #161b22;
    --table-tr-hover-color: #c9d1d9;

    --button-primary-border-color: #30363d;
    --button-primary-background: #238636;
    --button-primary-color: #ffffff;
    --button-primary-focus-border-color: #8b949e;
    --button-primary-focus-background: #238636;

    --input-border: 1px solid #30363d;
    --input-background: #161b22;
    --input-color: #c9d1d9;
    --input-placeholder-color: #8b949e;

    --input-focus-color: #ffffff;
    --input-focus-border-color: #58a6ff;
    --input-focus-box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.25);

    --alert-color: #c9d1d9;
    --alert-background-color: #161b22;
    --alert-border-color: #30363d;

    --alert-success-color: #c9d1d9;
    --alert-success-background-color: #161b22;
    --alert-success-border-color: #30363d;

    --alert-error-color: #c9d1d9;
    --alert-error-background-color: #161b22;
    --alert-error-border-color: #30363d;

    --alert-info-color: #c9d1d9;
    --alert-info-background-color: #161b22;
    --alert-info-border-color: #30363d;

    --panel-background: #161b22;
    --panel-border-color: #30363d;
    --panel-color: #c9d1d9;

    --modal-background: #161b22;
    --modal-color: #c9d1d9;
    --modal-box-shadow: 0 0 10px rgba(88, 166, 255, 0.25);

    --pagination-link-color: #c9d1d9;
    --pagination-border-color: #30363d;

    --category-color: #c9d1d9;
    --category-background-color: #161b22;
    --category-border-color: #30363d;
    --category-link-color: #c9d1d9;
    --category-link-hover-color: #58a6ff;

    --item-border-color: #30363d;
    --item-padding: 4px;
    --item-title-link-font-weight: 400;

    --item-status-read-title-link-color: #8b949e;
    --item-status-read-title-focus-color: #58a6ff;

    --item-meta-focus-color: #c9d1d9;
    --item-meta-li-color: #c9d1d9;

    --current-item-border-width: 2px;
    --current-item-border-color: #58a6ff;
    --current-item-box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.25);

    --entry-header-border-color: #30363d;
    --entry-header-title-link-color: #c9d1d9;
    --entry-content-color: #c9d1d9;
    --entry-content-code-color: #c9d1d9;
    --entry-content-code-background: #15191e;
    --entry-content-code-border-color: #2e343b;
    --entry-content-quote-color: #8b949e;
    --entry-content-abbr-border-color: #8b949e;
    --entry-enclosure-border-color: #30363d;

    --parsing-error-color: #c9d1d9;
    --feed-parsing-error-background-color: #3d0000;
    --feed-parsing-error-border-style: solid;
    --feed-parsing-error-border-color: #f85149;

    --feed-has-unread-background-color: #161b22;
    --feed-has-unread-border-style: solid;
    --feed-has-unread-border-color: #58a6ff;

    --category-has-unread-background-color: #161b22;
    --category-has-unread-border-style: solid;
    --category-has-unread-border-color: #58a6ff;

    --keyboard-shortcuts-li-color: #c9d1d9;

    --counter-color: #c9d1d9;
  }

  html {
    color-scheme: dark;
  }
}

/* Main CSS theme overrides */
:root {
  --spacing-small: 0.2rem;
  --spacing-medium: 0.5rem;
  --spacing-large: 1rem;
  --spacing-xlarge: 1.2rem;
  --spacing-xxlarge: 1.4rem;
  --font-size-small: 0.8rem;
  --font-size-medium: 0.9rem;
  --font-size-large: 1.3rem;
  --font-size-xlarge: 1.8rem;
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
  --line-height-small: 1.1rem;
  --line-height-medium: 1.4rem;
  --line-height-large: 1.8rem;
}

html {
  /* Use dynamic font size based on view width */
  font-size: clamp(16px, -0.875rem + 8.333vw, 18px);
  margin: 0 var(--spacing-large);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.entry-content {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);

  iframe,
  video,
  img,
  canvas,
  embed,
  object,
  pre {
    border: none !important;
    border-radius: var(--border-radius-large);
    display: block;
    margin: 0 calc(var(--spacing-large) * -1);
    width: calc(100% + var(--spacing-large) * 2);
    max-width: inherit;
    height: auto;
    max-height: 90svh;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
    margin: var(--spacing-xlarge) var(--spacing-small);
  }

  h2 {
    font-size: var(--font-size-large);
    letter-spacing: -0.04em;
  }

  pre {
    padding: var(--spacing-large) var(--spacing-xlarge);
    border-radius: var(--border-radius-medium);
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: var(--font-size-medium);
    line-height: var(--line-height-small);

    code {
      font-variant-ligatures: none;
      font-size: var(--font-size-small);
    }
  }

  p,
  blockquote,
  details,
  address,
  table {
    margin: var(--spacing-xlarge) 0;

    & > code {
      padding: 0 var(--spacing-small);
    }
  }

  li,
  label,
  dt,
  dd {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
  }

  blockquote {
    line-height: var(--line-height-medium);
  }

  code {
    font-size: var(--font-size-medium);
    border-radius: var(--border-radius-small);
    font-family: ui-monospace, "JetBrains Mono", inherit SFMono-Regular,
      "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }

  a {
    &:link,
    &:visited {
      text-decoration: none;
    }

    &:active,
    &:hover {
      text-decoration: underline;
    }
  }

  figcaption {
    color: var(--body-color);
    text-transform: initial;
    line-height: var(--line-height-small);
    margin: 0 auto;
    text-align: center;
    max-width: 100ch;
    font-size: var(--font-size-small);
  }

  ul,
  ol {
    margin-left: var(--spacing-xlarge);
    font-size: 1rem;
    text-wrap: balance;
    li {
      margin: var(--spacing-small) 0;
    }
  }

  ul {
    list-style-type: disc;
    color: var(--entry-content-color);
  }

  figure {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Some sites nest figure elements */
    > figure {
      width: 100%;
    }

    > blockquote {
      align-self: flex-start;
    }

    > a:has(img, iframe, video) {
      width: 100%;
    }

    figcaption {
      margin-top: var(--spacing-medium);
    }

    cite {
      font-size: var(--font-size-small);
      display: inline-block;
    }
  }

  /* Fix Youtube embeds ( */
  iframe[src*="www.youtube"] {
    aspect-ratio: 16/9;
    height: auto;
  }
  /* a[href*="youtube"] {
    font-size: 0;
    padding: 0;
    width: 100%;

    img {
      display: none;
    }
  } */
}

.entry header h1 {
  font-size: var(--font-size-xlarge);
  margin: var(--spacing-xxlarge) 0 var(--spacing-large);
  text-align: center;
}

.entry-tags,
.entry-enclosures {
  display: none;
}
.entry-actions {
  margin: var(--spacing-small) 0;

  a span {
    text-decoration: none;
  }

  ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  li {
    margin: 0 var(--spacing-small);
  }

  li,
  button,
  span {
    font-size: var(--font-size-small);
  }

  svg {
    display: none;
  }
}

.entry-meta {
  text-align: center;
  margin: var(--spacing-medium) 0;
  font-size: var(--font-size-small);
}

.entry-tags {
  text-align: center;
  margin: 0 0 var(--spacing-xxlarge) 0;
}

.pagination-entry-top {
  display: none;
}

.header nav {
  justify-content: center;
}