Readwise Reader Sepia Theme by aadilayub

/* ==UserStyle==
@name Readwise Reader Sepia Theme
@namespace Readwise Reader Sepia Theme
@version 0.1
@description Soothing sepia theme for Readwise Reader
@author Aadil
@license MIT

==/UserStyle== */

@-moz-document regexp("^https?://(read\\.)?readwise\\..*")
{
  @media (prefers-color-scheme: light) {
    :root {
      /* Sepia theme adjustments */
      --neutral-100: #f2ebe1; /* Light beige background */
      --neutral-97: #ece5d9;
      --neutral-95: #e5ddd1;
      --neutral-90: #d6cbbd;
      --neutral-85: #c7bba9;
      --neutral-80: #b9ada0;
      --neutral-75: #aa9f96;
      --neutral-70: #9c928c;
      --neutral-65: #8e8582;
      --neutral-60: #807878;
      --neutral-55: #726a6e;
      --neutral-50: #645d64;
      --neutral-45: #56505a;
      --neutral-40: #494450;
      --neutral-35: #3c3846;
      --neutral-30: #302d3c;
      --neutral-25: #252332;
      --neutral-20: #1a1928;
      --neutral-15: #11101e;
      --neutral-10: #080814;
      --neutral-07: #05050e;
      --neutral-05: #03030a;

      /* Sepia tones for colors */
      --red-97: #f8e8e4;
      --red-90: #f0cdc4;
      --red-80: #e7a89b;
      --red-70: #df8474;
      --red-60: #e7604e;
      --red-50: #c84838;
      --red-40: #9a3f31;
      --red-30: #71352a;
      --red-20: #4a2720;
      --red-10: #2a1a14;

      --orange-97: #f7f0e5;
      --orange-90: #f0d9bb;
      --orange-80: #e9be8e;
      --orange-70: #e2a364;
      --orange-60: #db8a42;
      --orange-50: #c17539;
      --orange-40: #936030;
      --orange-30: #6b4a27;
      --orange-20: #46351e;
      --orange-10: #271f15;

      --yellow-97: #f5f3da;
      --yellow-90: #eee0a2;
      --yellow-80: #e8cd6b;
      --yellow-70: #e1b933;
      --yellow-60: #d6a121;
      --yellow-50: #ba8c1a;
      --yellow-40: #917714;
      --yellow-30: #6b5c0e;
      --yellow-20: #463d08;
      --yellow-10: #272001;

      --green-97: #e9f0e5;
      --green-90: #c6e3c2;
      --green-80: #a3d69f;
      --green-70: #82c97f;
      --green-60: #67bc64;
      --green-50: #51a14f;
      --green-40: #448041;
      --green-30: #365e36;
      --green-20: #293d29;
      --green-10: #1a231a;

      --teal-97: #e5f0ef;
      --teal-90: #bde3df;
      --teal-80: #93d6ce;
      --teal-70: #6bc9be;
      --teal-60: #49bcaf;
      --teal-50: #35a195;
      --teal-40: #2b8075;
      --teal-30: #205e55;
      --teal-20: #163d35;
      --teal-10: #0b231f;

      --blue-97: #edf0f5;
      --blue-90: #c9e0f0;
      --blue-80: #a6c5e0;
      --blue-70: #a79585; /* Sepia-toned blue */
      --blue-60: #89796a;
      --blue-50: #6b5d50;
      --blue-40: #584a41;
      --blue-30: #463833;
      --blue-20: #342624;
      --blue-10: #221515;

      --indigo-97: #f0edf4;
      --indigo-90: #dbd7ef;
      --indigo-80: #b9aee4;
      --indigo-70: #9f93d8;
      --indigo-60: #8874db;
      --indigo-50: #744fe0;
      --indigo-40: #6036b2;
      --indigo-30: #472f81;
      --indigo-20: #32254c;
      --indigo-10: #1d152b;

      --purple-97: #f4f0f4;
      --purple-90: #e7d9e7;
      --purple-80: #dab7da;
      --purple-70: #cc94cd;
      --purple-60: #bc6ebc;
      --purple-50: #ab44af;
      --purple-40: #843a81;
      --purple-30: #613058;
      --purple-20: #3d2630;
      --purple-10: #21151a;

      /* Adjustments to theme colors */
      --text-primary: var(--neutral-25);
      --text-secondary: var(--neutral-45);
      --text-tertiary: var(--neutral-60);
      --text-placeholder: var(--neutral-65);
      --text-disabled: var(--neutral-75);
      --text-inverse: var(--neutral-90);
      --text-interactive: #b17142; /* Sepia-toned interactive text */
      --text-backlink: var(--indigo-40);
      --text-error: var(--red-50);
      --text-success: var(--green-50);

      --icon-primary: var(--neutral-25);
      --icon-secondary: var(--neutral-45);
      --icon-tertiary: var(--neutral-60);
      --icon-disabled: var(--neutral-75);
      --icon-interactive: var(--blue-50);
      --icon-danger: var(--red-50);
      --icon-success: var(--green-50);
      --icon-inverse: var(--neutral-97);
      --icon-faint: var(--neutral-90);

      --border-primary: var(--neutral-80);
      --border-secondary: var(--neutral-90);

      --background-primary: var(--neutral-100);
      --background-secondary: var(--neutral-90);
      --background-tertiary: var(--neutral-95);
      --background-inverse: var(--neutral-10);
      --background-canvas: var(--neutral-97);
      --background-elevated: var(--neutral-100);

      --highlight-background-color--normal: #e0c880; /* Muted yellow highlight */
      --highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
      --highlight-background-color--active: hsl(50deg 100% 50% / 30%);

      --highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
      --highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);

      --selection-color: rgba(0, 114, 255, 0.3);

      --svg-filter-grey: invert(26%) sepia(60%) saturate(10%) hue-rotate(0deg)
        brightness(106%) contrast(94%);
      --svg-filter-inbox: invert(76%) sepia(60%) saturate(10%) hue-rotate(0deg)
        brightness(95%) contrast(90%);
      --svg-filter-black: invert(0%) sepia(60%) saturate(10%) hue-rotate(0deg)
        brightness(93%) contrast(107%);
      --svg-filter-white: invert(100%) sepia(60%) saturate(10%) hue-rotate(0deg)
        brightness(105%) contrast(101%);
      --svg-filter-blue: invert(79%) sepia(60%) saturate(10%) hue-rotate(0deg)
        brightness(102%) contrast(94%);

      /* Override default focus styles */
      *:focus {
        outline-color: #b17142; /* Sepia-toned focus outline */
        outline-style: solid;
        outline-width: 2px;
      }
    }

    /* theme reading progress bar */
    ._gradient_q95nq_53 {
      filter: sepia(1);
    }

    .theme--dark {
      /* Dark theme adjustments for sepia */
      --neutral-100: #0f110b;
      --neutral-97: #191b15;
      --neutral-95: #23251f;
      --neutral-90: #2e302a;
      --neutral-85: #393b35;
      --neutral-80: #444640;
      --neutral-75: #50524c;
      --neutral-70: #5d5f59;
      --neutral-65: #6a6c66;
      --neutral-60: #777973;
      --neutral-55: #848680;
      --neutral-50: #91938d;
      --neutral-45: #9ea19a;
      --neutral-40: #aeada5;
      --neutral-35: #beb9b0;
      --neutral-30: #cec5bb;
      --neutral-25: #dad0c6;
      --neutral-20: #eae5de;
      --neutral-15: #f1efe8;
      --neutral-10: #f8f8f2;
      --neutral-07: #fcfaf7;
      --neutral-05: #ffffff;

      /* Dark theme sepia tones for colors */
      --red-97: #27140b;
      --red-90: #492018;
      --red-80: #74291f;
      --red-70: #a13025;
      --red-60: #d1372b;
      --red-50: #f04e42;
      --red-40: #ee7c6b;
      --red-30: #f2a796;
      --red-20: #f2d2c7;
      --red-10: #f9ece8;

      --orange-97: #291501;
      --orange-90: #462508;
      --orange-80: #6e330b;
      --orange-70: #944415;
      --orange-60: #c04c16;
      --orange-50: #e35f1a;
      --orange-40: #f48a2a;
      --orange-30: #f5b765;
      --orange-20: #f6dcb1;
      --orange-10: #f9f4e5;

      --yellow-97: #241401;
      --yellow-90: #41270b;
      --yellow-80: #63390f;
      --yellow-70: #845003;
      --yellow-60: #9e710f;
      --yellow-50: #bb921a;
      --yellow-40: #dbb312;
      --yellow-30: #f2d341;
      --yellow-20: #f2e2a2;
      --yellow-10: #f7f6da;

      --green-97: #162015;
      --green-90: #243424;
      --green-80: #2f4e2f;
      --green-70: #366935;
      --green-60: #337f34;
      --green-50: #49a14b;
      --green-40: #67b066;
      --green-30: #93d091;
      --green-20: #c5e6c3;
      --green-10: #e9f2e8;

      --teal-97: #001d1f;
      --teal-90: #0c2e30;
      --teal-80: #17454a;
      --teal-70: #125c64;
      --teal-60: #00707e;
      --teal-50: #0a8fa1;
      --teal-40: #35a9bb;
      --teal-30: #7ec7da;
      --teal-20: #bfe3e9;
      --teal-10: #e8f1f2;

      --blue-97: #1a1b26;
      --blue-90: #262942;
      --blue-80: #283a75;
      --blue-70: #2b3842; /* Sepia-toned blue */
      --blue-60: #47505a;
      --blue-50: #646873;
      --blue-40: #80808b;
      --blue-30: #9c98a3;
      --blue-20: #b8b0bb;
      --blue-10: #d4c8d3;

      --indigo-97: #1d152f;
      --indigo-90: #322550;
      --indigo-80: #472f85;
      --indigo-70: #6036b6;
      --indigo-60: #744fe3;
    }
  }
}