.theme-theme-ui-dark {
  --bg-image : url('https://i.imgur.com/NOv6lT0.jpeg');
  --logo: url('https://i.imgur.com/4aNpV0S.png');
  --m-logo: url('https://i.imgur.com/prCFsDG.png');
  --color-column: rgba(0, 0, 0, 0.4);
  --color-columns: #1e202850;

  /* Brand colors */
  --color-brand-twitter: #10096d;
  --color-brand-twitter-bg: #242525;
  --color-brand-twitter-dim: #a1a6ac;
  --color-brand-twitter-mud: #3a3b3d;
  --color-brand-twitter-dark: #3b3b3f;
  --color-brand-twitter-threaded-line: #5f6163;

  --color-brand-mastodon: #1a1886;
  --color-brand-mastodon-links: #c8c7cf;
  
  --color-brand-mastodon-bg: #303030;
  --color-brand-mastodon-dim: #999999;
  --color-brand-mastodon-mud: #3d3d3d;
  --color-brand-mastodon-dark: #3a3a3a;
  --color-brand-mastodon-threaded-line: #646464;
  --color-brand-mastodon-text-light: #acacac;

  /* Colors */
  /* Note: Remember to search for the DIM hex
     and replace it inside the SVG icons if you decide to change it */
  --color-bg: var(--color-brand-mastodon-bg);
  --color-bg-75: #272727bf;
  --color-fg: #fff;
  --color-border: #4d4d4d;
  --color-dim: var(--color-brand-mastodon-dim);

  --color-accent: #628195;
  --color-accent-dark: #2f4b91;
  --color-accent-dark-50: #0f0e52;
  
  --color-green: #00583b;
  --color-red: #f91880;
  --color-red-75: #f91880bf;
  --color-yellow: #ffac33;
  --color-light-shade: #ffffff05;
  --color-focusable-toot: #ffffff09;
  --color-light-text: #f7f9f9;
  --color-mud: var(--color-brand-mastodon-mud);
  --color-black-coral: #5a5371;
  --color-profile-button-hover: #f1eff41a;
  --color-column-link-hover: #f7f7f91a;
  --color-modal-overlay: #5b708366;
  --color-dark: var(--color-brand-mastodon-dark);
  --color-thread-line: var(--color-brand-mastodon-threaded-line);
  --color-gainsboro: #dcd9e8;
  --color-light-purple: #9baec8;

  --color-lighter-purple: #a5b8d3;

  --color-dark-electric-blue: #576078;
  --color-button-text: #f7f9f9;
  --color-ghost-button-text: var(--color-button-text);
  --color-verified: #79bd9a;
  --color-destructive: #df405a;
  --color-light-fuchsia-pink: #ff8cfd;
  --color-hashtag: var(--color-accent);
  --color-mention: var(--color-accent);
  --color-link: var(--color-accent);
  --color-bg-compose-form: rgba(65, 65, 65, 0.4);
  --color-bg-compose-form-focus: rgba(63, 63, 63, 0.8);

  /* In the original UI this color is lighten($ui-base-color, 12%) */
  --color-outer-space: #424d5a;

  /* Font related */
  --font-size: 15px;
  --font-size-smaller: 13px;
  --font-size-12: 12px;
  --font-size-mid: 14px;
  --font-size-bigger: 17px;
  --font-size-title: 19px;
  --font-size-heading: 20px;
  --font-weight-regular: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;
  --line-height: 22px;
  --line-height-mid: 20px;

  /* Grids and gaps */
  --gap-default: 12px;
  --gap-column-link: 12px;

  /* Element sizes */
  --size-avatar: 48px;
  --size-avatar-small: 32px;
  --size-icon-notification: 30px;
  --width-main-panel: 600px;
  --width-side-panel: 260px;
  --width-column: 380px;
  --border-radius: 16px;
  --border-radius-badges: 4px;
  --badges-distance-from-edge: 12px;

  /* Misc */
  --active-header-box-shadow: 0 1px 0 rgba(233, 233, 233, 0.3);
  --active-header-radial-gradient: radial-gradient(ellipse, rgba(194, 194, 194, 0.23) 0, rgba(168, 168, 168, 0) 60%);
  --compose-form-linear-gradient: linear-gradient(180deg, rgb(39, 39, 39) 0%, rgb(32, 32, 32) 53%, rgba(31, 31, 31, 0.814) 76%, rgba(39, 39, 39, 0.708) 87%, rgba(34, 34, 34, 0.458) 97%, rgba(34, 34, 34, 0) 100%);
}
body.theme-default.layout-single-column {

  --active-header-radial-gradient: radial-gradient(ellipse,rgb(239, 154, 154 / 25%) 0,rgb(255, 0 ,81 / 0%) 60%);

  --bg-image : url('https://i.imgur.com/YF8Jrld.jpeg');
  --logo: url('https://i.imgur.com/nwR8WJY.png');
  --m-logo: url('https://i.imgur.com/RYTTtkc.png');

  --color-column: rgba(255, 255, 255, 0.4);
  --color-columns: rgba(255, 255, 255, 0.5);

  --color-brand-mastodon: #161474;
  --color-brand-mastodon-links: #9998df;
  --color-accent-dark-50: #2c2abe80;

  --color-accent:#65718d;
  --color-accent-dark: #2f4b91;

  --color-bg: #fff;
  --color-fg: #000;

  --color-border: #dedfe9;
  --color-dim: #727177;
  --color-light-text: #1f1b23;

  --color-green: #17bf63;
  --color-red: #e0245e;
  --color-red-75: #e0245ebf;
  --color-focusable-toot: rgba(0, 0, 0, 0.035);

  --color-light-shade: #a29edb12;
  --color-mud: #c5c5c5;

  --color-black-coral: #9188a6;

  --color-profile-button-hover: #2f4b9140;
  --color-column-link-hover: #59587a40;
  
  --color-modal-overlay: #6a5b8366;
  --color-dark: #f7f9f9;
  --color-thread-line: #e1e8ed;
  --color-gainsboro: #8c88a6;
  --color-light-purple: #7071bb;
  --color-dark-electric-blue: #9088a6;
  --color-bg-75: #ffffffbf;
  --color-accent: var(--color-accent-dark);
  --color-ghost-button-text: var(--color-accent-dark);

  --color-bg-compose-form: rgba(172, 172, 172, 0.2);
  --color-bg-compose-form-focus: rgba(151, 151, 151, 0.4);
  --color-hashtag: var(--color-accent-dark);
  --color-mention: var(--color-accent-dark);

  /* Misc */
  --compose-form-linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 0.8141631652661064) 76%, rgba(255, 255, 255, 0.7077205882352942) 87%, rgba(255, 255, 255, 0.458420868347339) 97%, rgba(255, 255, 255, 0) 100%);
}