YouVersion Dark Theme

youversion-dark-theme.user.css

/* ==UserStyle==
@name           YouVersion Dark Theme
@namespace      github.com/mskelton
@version        2.0.1
@description    A simple dark theme for YouVersion (bible.com)
@author         Mark Skelton
@license        ISC
@homepageURL    https://gist.github.com/mskelton/187620db02e29c4a2b99eb8bdf5706a7
==/UserStyle== */
@-moz-document domain("my.bible.com") {
  :root {
    --color-text-primary: #c9d1d9;
    --color-text-secondary: #8b949e;
    --color-text-placeholder: #484f58;
    --color-bg-primary: #0e1218;
    --color-bg-secondary: #0d1117;
    --color-bg-tertiary: #161b22;
    --color-bg-overlay: #21262d;
    --color-border-primary: #30363d;
    --color-border-secondary: #21262d;
    --color-state-focus-border: #388bfd;
    --color-state-focus-shadow: 0 0 0 3px #0c2d6b;
    --color-shadow-large: 0 8px 24px #010409;
  }

  .bible-reader .note {
    display: none;
  }

  html,
  body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  input {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
  }

  .yv-sticky-header .yv-sticky-header-content {
    background-color: var(--color-bg-primary);
  }

  .yv-sticky-header-hidden .reader-header,
  .yv-header .yv-sticky-header-content {
    border-color: var(--color-border-primary);
  }

  .search {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-primary);
  }

  .search .searchicon-container {
    background-color: var(--color-bg-primary);
  }

  .footer-container .yv-footer .yv-sticky-header-content {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-primary);
  }

  .reader-header {
    background-color: var(--color-bg-primary);
  }

  .circle-buttons {
    background-color: var(--color-bg-overlay);
    border-color: var(--color-border-primary);
    box-shadow: var(--color-shadow-large);
  }
  
  .circle-buttons:active {
    box-shadow: none;
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
  }

  .picker-label {
    border-color: var(--color-border-primary);
  }

  .dropdown-arrow polygon {
    fill: var(--color-text-primary);
  }

  path.circle-progress-circle-path {
    stroke: #09a909;
  }

  .plan-nav-header {
    border-color: var(--color-border-secondary);
    background-color: var(--color-bg-primary);
  }

  .nav-content .plan-info .nav-title,
  .plan-pieces li,
  .plan-pieces li * {
    color: var(--color-text-primary) !important;
  }

  .plan-title,
  .subscription-show p {
    color: var(--color-text-secondary);
  }

  /* Plan slider */
  .plan-day-slider .day {
    background-color: var(--color-bg-tertiary) !important;
  }

  .plan-day-slider .day,
  .plan-day-slider .slick-list {
    border-color: var(--color-border-primary);
  }

  .plan-day-slider .day h1 {
    color: var(--color-text-primary) !important;
  }

  .plan-day-slider .day.active .day-bottom h4 > div {
    background-color: rgb(106, 183, 80) !important;
    color: white !important;
    border-color: transparent !important;
  }

  .plan-day-slider .day:not(.active) .day-bottom h4 > div {
    background-color: var(--color-bg-overlay) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
  }

  .plan-day-slider button.slick-next.slick-arrow,
  .plan-day-slider button.slick-prev.slick-arrow {
    border-left-color: var(--color-text-primary);
  }
  
  .checkmark-container .checkmark-right > path {
    fill: var(--color-text-primary);
  }

  /* Placeholder text */
  .placeholder-animation-shimmer {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 8%, var(--color-bg-overlay) 18%, var(--color-bg-tertiary) 33%);
    background-size: 4000px;
  }


  .placeholder-text > div,
  .placeholder-text + div {
    background-color: var(--color-bg-primary) !important;
    border-color: var(--color-bg-primary) !important;
  }
  
  /* Footer */
  .footer-container .yv-footer .yv-lang-toggle, .footer-container .yv-footer .yv-link-toggle {
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
  }
  
  /* Misc */
  button.chapter-button {
    background-color: var(--color-bg-overlay);
    border: var(--color-border-primary);
    color: var(--color-text-primary);
  }
}