HugoBDesigner's Mastodon Avocado Theme (WIP)

avocado.css

:root {
    /* DEFAULT HUE */
    /* --hue: 240deg; */
    /* AVOCADO HUE */
    /* --hue: 90deg; */
    /* BLUEBERRIES HUE - brodokk's theme */
    /* --hue: 300deg; */
    /* CURRENT HUE */
    --hue: 90deg;
}

.navigation-panel a.column-link.column-link--logo:after {
    content: "🥑";
    font-size: 14px;
    vertical-align: top;
    padding: 3px;
    opacity: 50%;
}

.admin-wrapper .sidebar .logo {
    filter: hue-rotate(calc(var(--hue) - 260deg));
}

.media-modal__page-dot:first-of-type.active:not(:only-child):before {
    content: "";
    display: block;
    border-radius: .5rem;
    width: .4rem;
    height: 1.5rem;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 0px;
    left: 0px;
    margin-top: calc(-50vh + 15%);
    margin-left: calc(-50vw + 50%);
    transform: translateY(-50%) translateX(calc(30px - 1rem));
}

.media-modal__page-dot:last-of-type.active:not(:only-child):before {
    content: "";
    display: block;
    border-radius: .5rem;
    width: .4rem;
    height: 1.5rem;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 0px;
    left: 0px;
    margin-top: calc(-50vh + 15%);
    margin-left: calc(50vw + 50%);
    transform: translateY(-50%) translateX(calc(-30px + .5rem));
}

body {
    /* background: #191b22; */
    /* background: hsl(227, 15%, 12%); */
    background: hsl(var(--hue), 15%, 12%);
}

.tabs-bar__wrapper {
    /* background: #17191f; */
    /* background: hsl(225, 15%, 11%); */
    background: hsl(var(--hue), 15%, 11%);
}

body.admin {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.admin-wrapper .sidebar-wrapper__inner {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.admin-wrapper .sidebar ul ul {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.compose-panel hr,
.navigation-panel hr {
    /* border-color: #313543; */
    /* border-color: hsl(227, 16%, 23%); */
    border-color: hsl(var(--hue), 16%, 23%);
}

.getting-started__trends h4 {
    /* border-bottom-color: #393f4f; */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.getting-started__trends h4 a {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.focusable:focus {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.detailed-status {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.detailed-status__action-bar {
    /* background: #313543; */
    /* border-top-color: #393f4f; */
    /* border-bottom-color: #393f4f; */
    /* background: hsl(227, 16%, 23%); */
    /* border-top-color: hsl(224, 16%, 27%); */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 23%);
    border-top-color: hsl(var(--hue), 16%, 27%);
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.detailed-status__meta {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.detailed-status__display-name {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.column-header > .column-header__back-button {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.column-header__collapsible, .column-header {
/*     border-bottom-color: #393f4f; */
/*     border-bottom-color: hsl(224, 16%, 27%); */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.button,
.button.logo-button,
.simple_form .block-button,
.simple_form .button,
.simple_form button {
    /* background-color: #595aff; */
    /* background-color: hsl(240, 100%, 67%); */
    /* background-color: hsl(var(--hue), 100%, 67%); */
    /* Manually changed for readibility */
    background-color: hsl(var(--hue), 60%, 47%);
}

.button:active,
.button:hover,
.button:focus,
.button.logo-button:active,
.button.logo-button:focus,
.button.logo-button:hover,
.simple_form .block-button:active,
.simple_form .block-button:focus,
.simple_form .block-button:hover,
.simple_form .button:active,
.simple_form .button:focus,
.simple_form .button:hover,
.simple_form button:active,
.simple_form button:focus,
.simple_form button:hover {
    /* background-color: #6364ff; */
    /* background-color: hsl(240, 100%, 69%); */
    /* background-color: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 60%, 69%);
}

.button.disabled,
.button:disabled {
    /* background-color: #9baec8; */
    /* background-color: hsl(215, 29%, 70%); */
    background-color: hsl(var(--hue), 29%, 70%);
}

.poll__input {
    /* border-color: #9baec8; */
    /* border-color: hsl(215, 29%, 70%); */
    border-color: hsl(var(--hue), 29%, 70%);
}

.poll__option input[type="text"] {
    /* color: #282c37; */
    /* background: #fff; */
    /* border: 1px solid #dbdbdb; */
    /* color: hsl(224, 16%, 19%); */
    /* backgroud: hsl(0, 0%, 100%); */
    /* border: 1px solid hsl(0, 0%, 86%);*/
    /* Manually changed for readability */
    color: hsl(var(--hue), 70.8%, 82.5%);
    background: hsl(var(--hue), 25.4%, 27.8%);
    border: 1px solid hsl(var(--hue), 16%, 45%);
}

.poll__option input[type="text"]:focus {
    /* border-color: #8c8dff; */
    /* border-color: hsl(239, 100%, 77%); */
    /* border-color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    border-color: hsl(var(--hue), 70%, 47%);
}

.compose-form__poll-wrapper .button.button-secondary {
    /* color: #606984; */
    /* border-color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    /* border-color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
    border-color: hsl(var(--hue), 16%, 45%);
}

.icon-button.inverted.active {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    /* color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 70%, 47%);
}

.privacy-dropdown.active .privacy-dropdown__value {
/*     background: #fff; */
/*     background: hsl(0, 0%, 100%); */
/*     background: hsl(var(--hue), 0%, 100%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 70%, 39%);
}

.privacy-dropdown.active .privacy-dropdown__value.active {
    /* background: #6364ff; */
    /* background: hsl(240, 100%, 69%); */
    /* background: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 70%, 39%);
}

.privacy-dropdown__option.active,
.privacy-dropdown__option:hover {
    /* background: #6364ff; */
    /* background: hsl(240, 100%, 69%); */
    /* background: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 70%, 39%);
}

.privacy-dropdown__option.active:hover {
    /* background: #7778ff; */
    /* background: hsl(240, 100%, 73%); */
    /* background: hsl(var(--hue), 100%, 73%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 70%, 43%);
}

.text-icon-button {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.text-icon-button.active {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.language-dropdown__dropdown__results__item.active {
    /* background: #6364ff; */
    /* background: hsl(240, 100%, 69%); */
    background: hsl(var(--hue), 100%, 69%);
}

.language-dropdown__dropdown__results__item.active,
.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name {
    /*     color: #fff; */
    /*     color: hsl(0, 0%, 100%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 16%, 38%);
}

.language-dropdown__dropdown__results__item.active:hover {
    /* background: #7778ff; */
    /* background: hsl(240, 100%, 73%); */
    background: hsl(var(--hue), 100%, 73%);
}

.language-dropdown__dropdown__results__item {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 46%, 75.3%);
}

.language-dropdown__dropdown__results__item__common-name {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.language-dropdown__dropdown__results__item:active,
.language-dropdown__dropdown__results__item:focus,
.language-dropdown__dropdown__results__item:hover {
/*     background: #d9e1e8; */
/*     background: hsl(208, 25%, 88%); */
/*     background: hsl(var(--hue), 25%, 88%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 25%, 37%);
}

.emoji-button img {
    filter: grayscale(100%) sepia(50%) hue-rotate(calc(var(--hue) - 50deg));
}

.emoji-mart-anchor-selected {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    /* color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 80%, 37%);
}

.emoji-mart-anchor-selected:hover {
    /* color: #7778ff; */
    /* color: hsl(240, 100%, 73%); */
    /* color: hsl(var(--hue), 100%, 73%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 80%, 33%);
}

.emoji-mart-anchors {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.emoji-mart-anchor {
/*     color: #606984; */
/*     color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.emoji-mart-anchor:hover {
/*     color: #a8b9cf; */
/*     color: hsl(214, 29%, 74%); */
    color: hsl(var(--hue), 29%, 74%);
}

.emoji-mart-bar {
    /* border-color: #c0cdd9; */
    /* border-color: hsl(209, 25%, 80%); */
    border-color: hsl(var(--hue), 25%, 80%);
}

.emoji-mart-bar:first-child {
    /* background: #d9e1e8; */
/*         border-color: #c0cdd9; */
    /* background: hsl(208, 25%, 88%); */
/*         border-color: hsl(209, 25%, 80%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 17%, 15%);
    border-color: hsl(var(--hue), 16%, 27%);
}

.emoji-mart-anchor-bar {
    /* background-color: #8c8dff; */
    /* background-color: hsl(239, 100%, 77%); */
    /* background-color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    background-color: hsl(var(--hue), 80%, 37%);
}

.emoji-mart-search input {
    /* background: rgba(217,225,232,.3); */
    /* color: #282c37; */
    /* border-color: #d9e1e8; */
    /* background: hsla(208, 25%, 88%, .3); */
    /* color: hsl(224, 16%, 19%); */
    /* border-color: hsl(208, 25%, 88%); */
    /* Manually changed for readability */
    background: hsla(var(--hue), 17%, 15%, .3);
    /* Manually changed for readability */
    color: hsl(var(--hue), 16%, 72%);
    border-color: hsl(var(--hue), 16%, 27%);
}

.emoji-mart-search input::placeholder {
    /* Manually changed for readability */
    color: hsl(var(--hue), 25%, 88%);
}

.emoji-mart-search-icon svg {
/*     fill: #606984; */
/*     fill: hsl(225, 16%, 45%); */
/*     fill: hsl(var(--hue), 16%, 45%); */
    /* Manually changed for readability */
    fill: hsl(var(--hue), 25%, 88%);
}

.emoji-mart-category .emoji-mart-emoji:hover::before {
    /* background-color: rgba(217,225,232,.7); */
    /* background-color: hsla(208, 25%, 88%, .7); */
/*     background-color: hsla(var(--hue), 25%, 88%, .7); */
    /* Manually changed for readability */
    background-color: hsla(var(--hue), 25.4%, 27.8%, .7);
}

/* .dismissable-banner { */
    /* background: #282c37; */
    /* border-bottom: 1px solid #393f4f; */
    /* background: hsl(224, 16%, 19%); */
    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
/*     background: hsl(var(--hue), 16%, 19%); */
/*     border-bottom: 1px solid hsl(var(--hue), 16%, 27%); */
/* } */

.dismissable-banner, .warning-banner {
/*     background-color: rgba(140,141,255,.15); */
/*     border-color: #8c8dff; */
/*     background-color: hsla(239, 100%, 77%, .15); */
/*     border-color: hsl(239, 100%, 77%); */
    background-color: hsla(var(--hue), 100%, 77%, .15);
    border-color: hsl(var(--hue), 100%, 77%);
}

.empty-column-indicator,
.follow_requests-unlocked_explanation {
    /* color: #606984; */
    /* background: #282c37; */
    /* color: hsl(225, 16%, 45%); */
    /* background: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 16%, 45%);
    background: hsl(var(--hue), 16%, 19%);
}

.column-header__back-button {
    /* background: #313543; */
    /* color: #8c8dff; */
    /* background: hsl(227, 16%, 23%); */
    /* color: hsl(239, 100%, 77%); */
    background: hsl(var(--hue), 16%, 23%);
    color: hsl(var(--hue), 100%, 77%);
}

.column-inline-form {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.column-link--transparent.active {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.column-link:not(.column-link--transparent, .column-link--logo) {
/*     background: #393f4f; */
/*     background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.icon-with-badge__badge {
    /* background: #6364ff; */
    /* background: hsl(240, 100%, 69%); */
    /* background: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 80%, 39%);
}

#logo-symbol-wordmark > path:first-of-type {
    filter: hue-rotate(calc(var(--hue) - 260deg));
}

.column-header.active .column-header__icon {
    /* color: #8c8dff; */
    /* text-shadow: 0 0 10px rgba(140,141,255,.4); */
    /* color: hsl(239, 100%, 77%); */
    /* text-shadow: 0 0 10px hsla(239, 100%, 77%, .4); */
    color: hsl(var(--hue), 100%, 77%);
    text-shadow: 0 0 10px hsla(var(--hue), 100%, 77%, .4);
}

.load-more {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.trends__item__sparkline path:first-child {
    /* fill: rgba(140,141,255,.25) !important; */
    /* fill: hsla(239, 100%, 77%, .25) !important; */
    fill: hsla(var(--hue), 100%, 77%, .25) !important;
}

.trends__item__sparkline path:last-child {
    /* stroke: #aaabff !important; */
    /* stroke: hsl(239, 100%, 83%) !important; */
    stroke: hsl(var(--hue), 100%, 83%) !important;
}

.icon-button.active {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.dropdown-menu__item a:active,
.dropdown-menu__item a:focus,
.dropdown-menu__item a:hover,
.dropdown-menu__item button:active,
.dropdown-menu__item button:focus,
.dropdown-menu__item button:hover {
    /* background: #6364ff; */
    /* background: hsl(240, 100%, 69%); */
    /* background: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 60%, 39%);
}

.column-header__wrapper.active::before {
    /* background: radial-gradient(ellipse,rgba(99,100,255,.23) 0,rgba(99,100,255,0) 60%); */
    /* background: radial-gradient(ellipse,hsla(240, 100%, 69%, .23) 0,hsla(240, 100%, 69%, 0) 60%); */
    background: radial-gradient(ellipse, hsla(var(--hue), 100%, 69%, .23) 0, hsla(var(--hue), 100%, 69%, 0) 60%);
}

.column-header__wrapper.active {
    /* box-shadow: 0 1px 0 rgba(140,141,255,.3); */
    /* box-shadow: 0 1px 0 hsla(239, 100%, 77%, .3); */
    box-shadow: 0 1px 0 hsla(var(--hue), 100%, 77%, .3);
}

.reply-indicator__content a.unhandled-link,
.status__content a.unhandled-link {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.poll__chart.leading {
    /* background: #6364ff; */
    /* background: hsl(240, 100%, 69%); */
    background: hsl(var(--hue), 100%, 69%);
}

.poll__chart {
    /* background: #8ba1bf; */
    /* background: hsl(215, 29%, 65%); */
    background: hsl(var(--hue), 29%, 65%);
}

.column-header,
.column-header__button {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.column-header__button {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.column-header__button:hover {
    /* color: #b2c1d5; */
    /* color: hsl(214, 29%, 77%); */
    color: hsl(var(--hue), 29%, 77%);
}

.load-gap {
    /* border-bottom-color: #393f4f; */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.load-more:hover {
    /* background: #2c313d; */
    /* background: hsl(222, 16%, 21%); */
    background: hsl(var(--hue), 16%, 21%);
}

.column > .scrollable {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.status {
    /* border-bottom-color: #393f4f; */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.status__relative-time {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status__display-name {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.icon-button {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.icon-button:focus {
    /* background-color: rgba(96,105,135,.3); */
    /* background-color: hsla(226, 17%, 45%, .3); */
    background-color: hsla(var(--hue), 17%, 45%, .3);
}

.icon-button:active,
.icon-button:focus,
.icon-button:hover {
    /* color: #707b97; */
    /* color: hsl(223, 16%, 52%); */
    color: hsl(var(--hue), 16%, 52%);
}

.icon-button.inverted:active,
.icon-button.inverted:focus,
.icon-button.inverted:hover {
    /* color: #51596f; */
    /* background-color: rgba(96,105,132,.15); */
    /* color: hsl(224, 16%, 38%); */
    /* background-color: hsla(225, 16%, 45%, .15); */
    color: hsl(var(--hue), 16%, 38%);
    background-color: hsla(var(--hue), 16%, 45%, .15);
}

.muted .status__content,
.muted .status__content a,
.muted .status__content p,
.muted .status__display-name strong {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.reply-indicator__content a,
.status__content a {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.notification__message {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.status__content__spoiler-link {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 16%, 19%);
}

.reply-indicator__content .status__content__spoiler-link,
.status__content .status__content__spoiler-link {
    /* background: #606984; */
    /* background: hsl(225, 16%, 45%); */
    background: hsl(var(--hue), 16%, 45%);
}

.reply-indicator__content .status__content__spoiler-link:focus,
.reply-indicator__content .status__content__spoiler-link:hover,
.status__content .status__content__spoiler-link:focus,
.status__content .status__content__spoiler-link:hover {
    /* background: #707b97; */
    /* background: hsl(223, 16%, 52%); */
    background: hsl(var(--hue), 16%, 52%);
}

html {
    /* scrollbar-color: #313543 rgba(0,0,0,.1); */
    /* scrollbar-color: hsl(227, 16%, 23%) rgba(0,0,0,.1); */
    scrollbar-color: hsl(var(--hue), 16%, 23%) rgba(0, 0, 0, .1);
}

.account__section-headline a.active::after,
.account__section-headline button.active::after,
.notification__filter-bar a.active::after,
.notification__filter-bar button.active::after {
    /* border-color: transparent transparent #282c37; */
    /* border-color: transparent transparent hsl(224, 16%, 19%); */
    border-color: transparent transparent hsl(var(--hue), 16%, 19%);
}

.account__section-headline,
.notification__filter-bar {
    /* background: #1f232b; */
    /* border-bottom-color: #393f4f; */
    /* background: hsl(220, 16%, 15%); */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 15%);
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.account__section-headline button,
.notification__filter-bar button {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.account__section-headline a.active::after,
.account__section-headline a.active::before,
.account__section-headline button.active::after,
.account__section-headline button.active::before,
.notification__filter-bar a.active::after,
.notification__filter-bar a.active::before,
.notification__filter-bar button.active::after,
.notification__filter-bar button.active::before {
    /* border-color: transparent transparent #393f4f; */
    /* border-color: transparent transparent hsl(224, 16%, 27%); */
    border-color: transparent transparent hsl(var(--hue), 16%, 27%);
}

.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar a.active,
.notification__filter-bar button.active {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.column-link--transparent {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.getting-started__trends h4 {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.trends__item__name a {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.trends__item__name {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status__prepend .status__display-name strong {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status__prepend {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status-card.compact {
    /* border-color: #313543; */
    /* border-color: hsl(227, 16%, 23%); */
    border-color: hsl(var(--hue), 16%, 23%);
}

.status-card__image {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.status-card {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

a.status-card.compact:hover {
    /* background-color: #313543; */
    /* background-color: hsl(227, 16%, 23%); */
    background-color: hsl(var(--hue), 16%, 23%);
}

a.status-card:hover {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.status-card__title {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.poll__link {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.poll__link:active,
.poll__link:focus {
    /* background-color: rgba(96,105,132,.1); */
    /* background-color: hsla(225, 16%, 45%, .1); */
    background-color: hsla(var(--hue), 16%, 45%, .1);
}

.poll__footer {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.search__input::placeholder {
    /* color: #a8b9cf; */
    /* color: hsl(214, 29%, 74%); */
    color: hsl(var(--hue), 29%, 74%);
}

.search__input {
    /* background: #282c37; */
    /* color: #9baec8; */
    /* background: hsl(224, 16%, 19%); */
    /* color: hsl(215, 29%, 70%); */
    background: hsl(var(--hue), 16%, 19%);
    color: hsl(var(--hue), 29%, 70%);
}

.search__input:focus {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.search__icon .fa-times-circle {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.search__icon .fa {
    /* color: rgb(217, 225, 232); */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.search__icon .fa-times-circle:hover {
    /* color: #707b97; */
    /* color: hsl(223, 16%, 52%); */
    color: hsl(var(--hue), 16%, 52%);
}

.search-popout h4,
.search-popout {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.search-popout em {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 16%, 19%);
}

.navigation-bar a {
    /* color: rgb(155, 174, 200); */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.dropdown-menu__item {
    /* color: rgb(40, 44, 55);  */
    /* color: hsl(224, 16%, 19%);  */
    color: hsl(var(--hue), 16%, 19%);
}

.dropdown-menu {
    /* background: #d9e1e8; */
    /* background: hsl(208, 25%, 88%); */
    background: hsl(var(--hue), 25%, 88%);
}

.dropdown-menu__arrow.bottom {
    /* border-bottom-color: #d9e1e8; */
    /* border-bottom-color: hsl(208, 25%, 88%); */
    border-bottom-color: hsl(var(--hue), 25%, 88%);
}

.dropdown-menu__item a,
.dropdown-menu__item button {
    /* background: #d9e1e8; */
    /* background: hsl(208, 25%, 88%); */
    background: hsl(var(--hue), 25%, 88%);
}

.dropdown-menu__item a:active,
.dropdown-menu__item a:focus,
.dropdown-menu__item a:hover,
.dropdown-menu__item button:active,
.dropdown-menu__item button:focus,
.dropdown-menu__item button:hover {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.dropdown-menu__separator {
    /* border-bottom-color: #c0cdd9; */
    /* border-bottom-color: hsl(209, 25%, 80%); */
    border-bottom-color: hsl(var(--hue), 25%, 80%);
}

.link-footer p {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.link-footer p a {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.column-back-button {
    /* background: #313543; */
    /* color: #8c8dff; */
    /* background: hsl(227, 16%, 23%); */
    /* color: hsl(239, 100%, 77%); */
    background: hsl(var(--hue), 16%, 23%);
    color: hsl(var(--hue), 100%, 77%);
}

.account__header__tabs__buttons .icon-button {
    /* border-color: #42485a; */
    /* border-color: hsl(225, 15%, 31%); */
    border-color: hsl(var(--hue), 15%, 31%);
}

.icon-button:active,
.icon-button:focus,
.icon-button:hover {
    /* background-color: rgba(96,105,132,.15); */
    /* background-color: hsla(225, 16%, 45%, .15); */
    background-color: hsla(var(--hue), 16%, 45%, .15);
}

.account__header__bio .account__header__fields a {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.account__header__tabs__name h1 small {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__extra__links a {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__bio .account__header__fields dt {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.account__header__bio .account__header__fields dd {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__bio .account__header__fields dl {
    /* border-bottom-color: #313543; */
    /* border-bottom-color: hsl(227, 16%, 23%); */
    border-bottom-color: hsl(var(--hue), 16%, 23%);
}

.account__header__fields dl {
    /* border-bottom-color: #42485a; */
    /* border-bottom-color: hsl(225, 15%, 31%); */
    border-bottom-color: hsl(var(--hue), 15%, 31%);
}

.account__header__bio .account__header__fields {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.account__header {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.account__header__bar {
    /* border-bottom-color: #42485a; */
    /* border-bottom-color: hsl(225, 15%, 31%); */
    border-bottom-color: hsl(var(--hue), 15%, 31%);
}

.video-player__volume__current {
    /* background: #8c8dff; */
    /* background: hsl(239, 100%, 77%); */
    background: hsl(var(--hue), 100%, 77%);
}

.video-player__volume__handle {
    /* background: #8c8dff; */
    /* background: hsl(239, 100%, 77%); */
    background: hsl(var(--hue), 100%, 77%);
}

.video-player__seek__buffer {
    /* background: #8c8dff; */
    /* background: hsl(239, 100%, 77%); */
    background: hsl(var(--hue), 100%, 35%);
}

.video-player__seek__progress,
.video-player__seek__handle {
    /* background: #8c8dff; */
    /* background: hsl(239, 100%, 77%); */
    background: hsl(var(--hue), 100%, 77%);
}

.media-modal__overlay .picture-in-picture__footer .icon-button.active {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.media-modal__overlay .picture-in-picture__footer .icon-button.active:active,
.media-modal__overlay .picture-in-picture__footer .icon-button.active:focus,
.media-modal__overlay .picture-in-picture__footer .icon-button.active:hover {
    /* background: rgba(140,141,255,.15); */
    /* background: hsla(239, 100%, 77%, .15); */
    background: hsla(var(--hue), 100%, 77%, .15);
}

.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]),
.media-gallery__gifv video:not([title]),
.media-gallery__item-thumbnail img[alt=""],
.audio-player__canvas[title=""],
.video-player video[title=""],
.media-gallery__gifv video[title=""] {
    /* border-color: #1da1f2; */
    /* border-color: hsl(203, 89%, 53%); */
    border-color: hsl(var(--hue), 89%, 53%);
}

.account__header__account-note textarea::placeholder {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.account__header__account-note label {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__account-note textarea:focus {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.account__header__account-note textarea {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.account__header__bar .avatar .account__avatar {
    /* border-color: #313543; */
    /* background: #17191f; */
    /* border-color: hsl(227, 16%, 23%); */
    /* background: hsl(225, 15%, 11%); */
    border-color: hsl(var(--hue), 16%, 23%);
    background: hsl(var(--hue), 15%, 11%);
}

.admin-wrapper .content h4 {
    /* color: #9baec8; */
    /* border-bottom-color: #393f4f; */
    /* color: hsl(215, 29%, 70%); */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    color: hsl(var(--hue), 29%, 70%);
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.simple_form p.hint,
.simple_form .hint {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.admin-wrapper .sidebar ul a.selected {
    /* background: #242731; */
    /* background: hsl(226, 15%, 17%); */
    background: hsl(var(--hue), 15%, 17%);
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
    /* background-color: #595aff; */
    /* background-color: hsl(240, 100%, 67%); */
    /* background-color: hsl(var(--hue), 100%, 67%); */
    /* Manually changed for readability */
    background-color: hsl(var(--hue), 70%, 37%);
}

.admin-wrapper .sidebar ul a {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.admin-wrapper .sidebar ul a:hover {
    /* background-color: #1d2028; */
    /* background-color: hsl(224, 16%, 14%); */
    background-color: hsl(var(--hue), 16%, 14%);
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
    /* background-color: #6364ff; */
    /* background-color: hsl(240, 100%, 69%); */
    background-color: hsl(var(--hue), 100%, 69%);
}

.simple_form .hint a {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.admin-wrapper .content .muted-hint a,
body .muted-hint a {
    /* color: #8c8dff; */
    /* color: hsl(240, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.admin-wrapper .content .muted-hint,
body .muted-hint {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.admin-wrapper .content h6 {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.simple_form input[type="datetime-local"]::placeholder,
.simple_form input[type="email"]::placeholder,
.simple_form input[type="number"]::placeholder,
.simple_form input[type="password"]::placeholder,
.simple_form input[type="text"]::placeholder,
.simple_form input[type="url"]::placeholder,
.simple_form textarea::placeholder {
    /* color: #a8b9cf; */
    /* border-color: #0a0b0e; */
    /* color: hsl(214, 29%, 74%); */
    /* border-color: hsl(225, 17%, 5%); */
    color: hsl(var(--hue), 29%, 74%);
    border-color: hsl(var(--hue), 17%, 5%);
}

.simple_form input[type="datetime-local"],
.simple_form input[type="email"],
.simple_form input[type="number"],
.simple_form input[type="password"],
.simple_form input[type="text"],
.simple_form input[type="url"],
.simple_form textarea {
    /* background: #131419; */
    /* background: hsl(230, 14%, 9%); */
    background: hsl(var(--hue), 14%, 9%);
}

.simple_form input[type="datetime-local"]:active,
.simple_form input[type="datetime-local"]:focus,
.simple_form input[type="email"]:active,
.simple_form input[type="email"]:focus,
.simple_form input[type="number"]:active,
.simple_form input[type="number"]:focus,
.simple_form input[type="password"]:active,
.simple_form input[type="password"]:focus,
.simple_form input[type="text"]:active,
.simple_form input[type="text"]:focus,
.simple_form input[type="url"]:active,
.simple_form input[type="url"]:focus,
.simple_form textarea:active,
.simple_form textarea:focus {
    /* border-color: #8c8dff; */
    /* background: #17191f; */
    /* border-color: hsl(239, 100%, 77%); */
    /* background: hsl(225, 15%, 11%); */
    border-color: hsl(var(--hue), 100%, 77%);
    background: hsl(var(--hue), 15%, 11%);
}

.input-copy {
    /* background: #131419; */
    /* border-color: #0a0b0e; */
    /* background: hsl(230, 14%, 9%); */
    /* border-color: hsl(225, 17%, 5%); */
    background: hsl(var(--hue), 14%, 9%);
    border-color: hsl(var(--hue), 17%, 5%);
}

.simple_form .hint code {
    /* background: #0e1014; */
    /* background: hsl(220, 18%, 7%); */
    background: hsl(var(--hue), 18%, 7%);
}

.admin-wrapper .content hr {
    /* border-bottom-color: rgba(96,105,132,.6); */
    /* border-bottom-color: hsla(225, 16%, 45%, .6); */
    border-bottom-color: hsla(var(--hue), 16%, 45%, .6);
}

.card__bar {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.card > a:active .card__bar,
.card > a:focus .card__bar,
.card > a:hover .card__bar {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.card__bar .display-name span {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.modal-layout {
/*     background-color: #282c37; */
/*     background-color: hsl(224, 16%, 19%); */
    background-color: hsl(var(--hue), 16%, 19%);
}

.account-header {
/*     border-bottom-color: #282c37; */
/*     border-bottom-color: hsl(224, 16%, 19%); */
    /* Manually changed for readability */
    border-bottom-color: hsl(var(--hue), 16%, 15%);
}

.follow-prompt, .oauth-prompt, .post-follow-actions {
/*     color: #9baec8; */
/*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.filters .filter-subset a.selected {
    /* color: #8c8dff; */
    /* border-bottom-color: #6364ff; */
    /* color: hsl(239, 100%, 77%); */
    /* border-bottom-color: hsl(240, 100%, 69%); */
    color: hsl(var(--hue), 100%, 77%);
    border-bottom-color: hsl(var(--hue), 100%, 69%);
}

.filters .filter-subset a {
    /* color: #9baec8; */
    /* border-bottom-color: #282c37; */
    /* color: hsl(215, 29%, 70%); */
    /* border-bottom-color: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 29%, 70%);
    border-bottom-color: hsl(var(--hue), 16%, 19%);
}

a.table-action-link,
button.table-action-link {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.accounts-table__count small {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account .account__display-name {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.accounts-table .fa.active {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.batch-table__toolbar {
    /* border-color: #17191f; */
    /* background: #282c37; */
    /* border-color: hsl(225, 15%, 11%); */
    /* background: hsl(224, 16%, 19%); */
    border-color: hsl(var(--hue), 15%, 11%);
    background: hsl(var(--hue), 16%, 19%);
}

.batch-table__row {
    /* background: #1f232b; */
    /* border-color: #17191f; */
    /* background: hsl(220, 16%, 15%); */
    /* border-color: hsl(225, 15%, 11%); */
    background: hsl(var(--hue), 16%, 15%);
    border-color: hsl(var(--hue), 15%, 11%);
}

.batch-table__row:nth-child(2n) {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.batch-table__row:hover {
    /* background: #242731; */
    /* background: hsl(226, 15%, 17%); */
    background: hsl(var(--hue), 15%, 17%);
}

.batch-table__row:nth-child(2n):hover {
    /* background: #2c313d; */
    /* background: hsl(222, 16%, 21%); */
    background: hsl(var(--hue), 16%, 21%);
}

.announcements__item__content a.unhandled-link {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.announcements {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.column-header__button.active,
.column-header__button.active:hover {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.column-header__collapsible-inner {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.reactions-bar__item {
    /* background: #42485a; */
    /* background: hsl(225, 15%, 31%); */
    background: hsl(var(--hue), 15%, 31%);
}

.reactions-bar__item.active {
    /* background-color: #494e7b; */
    /* background-color: hsl(234, 26%, 38%); */
    background-color: hsl(var(--hue), 26%, 38%);
}

.reactions-bar__item.active .reactions-bar__item__count {
    /* color: #b5b5ff; */
    /* color: hsl(240, 100%, 85%); */
    color: hsl(var(--hue), 100%, 85%);
}

.flash-message {
    /* background: #393f4f; */
    /* color: #9baec8; */
    /* background: hsl(224, 16%, 27%); */
    /* color: hsl(215, 29%, 70%); */
    background: hsl(var(--hue), 16%, 27%);
    color: hsl(var(--hue), 29%, 70%);
}

.form-footer a {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.applications-list__item,
.filters-list__item {
    /* background: #282c37; */
    /* border-color: #313543; */
    /* background: hsl(224, 16%, 19%); */
    /* border-color: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 19%);
    border-color: hsl(var(--hue), 16%, 23%);
}

.announcements-list__item__meta,
.filters-list__item__meta {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.permissions-list__item {
    /* border-bottom-color: #313543; */
    /* border-bottom-color: hsl(227, 16%, 23%); */
    border-bottom-color: hsl(var(--hue), 16%, 23%);
}

.permissions-list__item__text__type {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.table > tbody > tr:nth-child(2n+1) > td,
.table > tbody > tr:nth-child(2n+1) > th {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.table td,
.table th {
    /* border-top-color: #282c37; */
    /* background: #1f232b; */
    /* border-top-color: hsl(224, 16%, 19%); */
    /* background: hsl(220, 16%, 15%); */
    border-top-color: hsl(var(--hue), 16%, 19%);
    background: hsl(var(--hue), 16%, 15%);
}

.button.button-secondary {
    /* color: #9baec8; */
    /* border-color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    /* border-color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
    border-color: hsl(var(--hue), 29%, 70%);
}

.button.button-secondary:active,
.button.button-secondary:focus,
.button.button-secondary:hover {
    /* border-color: #a8b9cf; */
    /* color: #a8b9cf; */
    /* border-color: hsl(214, 29%, 74%); */
    /* color: hsl(214, 29%, 74%); */
    border-color: hsl(var(--hue), 29%, 74%);
    color: hsl(var(--hue), 29%, 74%);
}

.button.button-secondary {
    background: transparent;
}

.link-button {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    /* color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 80%, 47%);
}

.reply-indicator {
    /* background: #9baec8; */
    /* background: hsl(215, 29%, 70%); */
    background: hsl(var(--hue), 29%, 70%);
}

.icon-button.inverted {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.attachment-list__list a {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.attachment-list.compact .fa {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.compose-form .autosuggest-textarea__suggestions {
    /* background: #d9e1e8; */
    /* background: hsl(208, 25%, 88%); */
    background: hsl(var(--hue), 25%, 88%);
}

.compose-form .autosuggest-textarea__suggestions__item.selected,
.compose-form .autosuggest-textarea__suggestions__item:active,
.compose-form .autosuggest-textarea__suggestions__item:focus,
.compose-form .autosuggest-textarea__suggestions__item:hover {
    /* background: #b9c8d5; */
    /* background: hsl(208, 25%, 78%); */
    background: hsl(var(--hue), 25%, 78%);
}

.compose-form .autosuggest-textarea__suggestions {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 16%, 19%);
}

.compose-form__sensitive-button .checkbox {
    /* border-color: #9baec8; */
    /* border-color: hsl(215, 29%, 70%); */
    border-color: hsl(var(--hue), 29%, 70%);
}

.link-button:disabled {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.character-counter {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.actions-modal,
.block-modal,
.boost-modal,
.compare-history-modal,
.confirmation-modal,
.mute-modal,
.report-modal {
    /* background: #f2f5f7; */
    /* color: #282c37; */
    /* background: hsl(204, 24%, 96%); */
    /* color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 24%, 96%);
    color: hsl(var(--hue), 16%, 19%);
}

.muted .poll__chart.leading {
    /* background: rgba(99,100,255,.2); */
    /* background: hsla(240, 100%, 69%, .2); */
    background: hsla(var(--hue), 100%, 69%, .2);
}

.muted .poll__chart {
    /* background: rgba(109,137,175,.2); */
    /* background: hsla(215, 29%, 56%, .2); */
    background: hsla(var(--hue), 29%, 56%, .2);
}

.muted .poll {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.notification.unread::before,
.status__wrapper.unread::before {
    /* border-left-color: #8c8dff; */
    /* border-left-color: hsl(239, 100%, 77%); */
    border-left-color: hsl(var(--hue), 100%, 77%);
}

.notification__message .fa {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.picture-in-picture__footer,
.picture-in-picture__header {
    /* background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.picture-in-picture__header .display-name span {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.explore__search-header {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.explore__search-header .search__input {
    /* border-color: #393f4f; */
    /* border-color: hsl(224, 16%, 27%); */
    border-color: hsl(var(--hue), 16%, 27%);
}

.explore__search-header .search .fa {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.trends__item {
    /* border-bottom-color: #393f4f; */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.story {
    /* border-bottom-color: #393f4f; */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.story__details__publisher {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.story__details__shared {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.story:active,
.story:focus,
.story:hover {
    /* background-color: #313543; */
    /* background-color: hsl(227, 16%, 23%); */
    background-color: hsl(var(--hue), 16%, 23%);
}

.scrollable .account-card {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.account-card__title .display-name {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account-card__bio a {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.account-card__counters__item small {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.scrollable .account-card__bio::after {
    /* background: linear-gradient(270deg,#393f4f,transparent); */
    /* background: linear-gradient(270deg,hsl(224, 16%, 27%),transparent); */
    background: linear-gradient(270deg, hsl(var(--hue), 16%, 27%), transparent);
}

.column-header__collapsible {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.column-settings__section {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.setting-toggle__label {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.react-toggle--checked .react-toggle-track {
    /* background-color: #595aff; */
    /* background-color: hsl(240, 100%, 67%); */
    /* background-color: hsl(var(--hue), 100%, 67%); */
    /* Manually changed for readability */
    background-color: hsl(var(--hue), 70%, 37%);
}

.react-toggle-thumb {
    /* border-color: #282c37; */
    /* border-color: hsl(224, 16%, 19%); */
    border-color: hsl(var(--hue), 16%, 19%);
}

.react-toggle--checked .react-toggle-thumb {
    /* border-color: #6364ff; */
    /* border-color: hsl(240, 100%, 69%); */
    /* border-color: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    border-color: hsl(var(--hue), 70%, 39%);
}

.react-toggle-track {
    /* background-color: #282c37; */
    /* background-color: hsl(224, 16%, 19%); */
    background-color: hsl(var(--hue), 16%, 19%);
}

.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
/*     background-color: #6364ff; */
/*     background-color: hsl(240, 100%, 69%); */
    /* Manually changed for readability */
    background-color: hsl(var(--hue), 80%, 59%);
}

.dropdown-menu__container__header {
    /* border-bottom-color: #c0cdd9; */
    /* color: #282c37; */
    /* border-bottom-color: hsl(209, 25%, 80%); */
    /* color: hsl(224, 16%, 19%); */
    border-bottom-color: hsl(var(--hue), 25%, 80%);
    color: hsl(var(--hue), 16%, 19%);
}

.dropdown-menu__item.edited-timestamp__history__item {
    /* border-bottom-color: #c0cdd9; */
    /* border-bottom-color: hsl(209, 25%, 80%); */
    border-bottom-color: hsl(var(--hue), 25%, 80%);
}

.compare-history-modal .report-modal__target {
    /* border-bottom-color: #d9e1e8; */
    /* border-bottom-color: hsl(208, 25%, 88%); */
    border-bottom-color: hsl(var(--hue), 25%, 88%);
}

.compare-history-modal .status__content {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 16%, 19%);
}

.poll__input.disabled:active,
.poll__input.disabled:focus,
.poll__input.disabled:hover {
    /* border-color: #606984; */
    /* border-color: hsl(225, 16%, 45%); */
    border-color: hsl(var(--hue), 16%, 45%);
}

.timeline-hint {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.timeline-hint a {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.upload-progress {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.upload-progress__backdrop {
    /* background: #606984; */
    /* background: hsl(225, 16%, 45%); */
    background: hsl(var(--hue), 16%, 45%);
}

.upload-progress__tracker {
    /* background: #6364ff; */
    /* background: hsl(240, 100%, 69%); */
    background: hsl(var(--hue), 80%, 49%);
}

.block-modal__cancel-button,
.confirmation-modal__cancel-button,
.confirmation-modal__secondary-button,
.mute-modal__cancel-button {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.block-modal__cancel-button:active,
.block-modal__cancel-button:focus,
.block-modal__cancel-button:hover,
.confirmation-modal__cancel-button:active,
.confirmation-modal__cancel-button:focus,
.confirmation-modal__cancel-button:hover,
.confirmation-modal__secondary-button:active,
.confirmation-modal__secondary-button:focus,
.confirmation-modal__secondary-button:hover,
.mute-modal__cancel-button:active,
.mute-modal__cancel-button:focus,
.mute-modal__cancel-button:hover {
    /* color: #576078; */
    /* color: hsl(224, 16%, 41%); */
    color: hsl(var(--hue), 16%, 41%);
}

.block-modal__action-bar,
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar {
    /* background: #d9e1e8; */
    /* background: hsl(208, 25%, 88%); */
    background: hsl(var(--hue), 25%, 88%);
}

.loading-bar {
    /* background-color: #8c8dff; */
    /* background-color: hsl(239, 100%, 77%); */
    /* background-color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    background-color: hsl(var(--hue), 70%, 57%);
}

.circular-progress {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status-card {
    /* border-color: #393f4f; */
    /* border-color: hsl(224, 16%, 27%); */
    border-color: hsl(var(--hue), 16%, 27%);
}

.status-card__description {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    /* color: hsl(var(--hue), 29%, 70%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 10%, 60%);
}

.navigation-bar strong {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.column-header__setting-btn:focus,
.column-header__setting-btn:hover {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    /* color: hsl(var(--hue), 29%, 70%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 19%, 90%);
}

.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.reply-indicator__content {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 16%, 19%);
}

.reply-indicator__display-name {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 16%, 19%);
}

.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.text-icon-button:active,
.text-icon-button:focus,
.text-icon-button:hover {
    /* color: #51596f; */
    /* background-color: rgba(96,105,132,.15); */
    /* color: hsl(224, 16%, 38%); */
    /* background-color: hsla(225, 16%, 45%, .15); */
    color: hsl(var(--hue), 16%, 38%);
    background-color: hsla(var(--hue), 16%, 45%, .15);
}

.compose-panel .compose-form__autosuggest-wrapper {
    background: none;
}

.compose-form .compose-form__warning {
    /* color: #282c37; */
    /* background: #9baec8; */
    /* color: hsl(224, 16%, 19%); */
    /* background: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 16%, 19%);
    background: hsl(var(--hue), 29%, 70%);
}

.compose-form .compose-form__warning a {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.timeline-hint a:active,
.timeline-hint a:focus,
.timeline-hint a:hover {
    /* color: #a0a1ff; */
    /* color: hsl(239, 100%, 81%); */
    color: hsl(var(--hue), 100%, 81%);
}

.column-title p {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__image {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.reactions-bar__item__count {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.reactions-bar__item:active,
.reactions-bar__item:focus,
.reactions-bar__item:hover {
    /* background: #4a5266; */
    /* background: hsl(223, 16%, 35%); */
    background: hsl(var(--hue), 16%, 35%);
}

.announcements__pagination {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.interaction-modal__icon {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.interaction-modal__lead p,
.interaction-modal__choices__choice p {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.copypaste input {
    /* background: #17191f; */
    /* border-color: #8c8dff; */
    /* color: #9baec8; */
    /* background: hsl(225, 15%, 11%); */
    /* border-color: hsl(239, 100%, 77%); */
    /* color: hsl(215, 29%, 70%); */
    background: hsl(var(--hue), 15%, 11%);
    border-color: hsl(var(--hue), 100%, 77%);
    color: hsl(var(--hue), 29%, 70%);
}

.copypaste input:focus {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.interaction-modal {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.compare-history-modal .status__content a {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    /* color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 70%, 47%);
}

.filter-form {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.radio-button__input {
    /* border-color: #9baec8; */
    /* border-color: hsl(215, 29%, 70%); */
    border-color: hsl(var(--hue), 29%, 70%);
}

.radio-button__input.checked {
    /* border-color: #7778ff; */
    /* background: #7778ff; */
    /* border-color: hsl(240, 100%, 73%); */
    /* background: hsl(240, 100%, 73%); */
    border-color: hsl(var(--hue), 100%, 73%);
    background: hsl(var(--hue), 100%, 73%);
}

.getting-started__trends .trends__item__current {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.keyboard-shortcuts kbd {
    /* background-color: #393f4f; */
    /* border-color: #1f232b; */
    /* background-color: hsl(224, 16%, 27%); */
    /* border-color: hsl(220, 16%, 15%); */
    background-color: hsl(var(--hue), 16%, 27%);
    border-color: hsl(var(--hue), 16%, 15%);
}

.skeleton {
    /* background-color: #393f4f; */
    /* background-image: linear-gradient(90deg, #393f4f, #42485a, #393f4f); */
    /* background-color: hsl(224, 16%, 27%); */
    /* background-image: linear-gradient(90deg, hsl(224, 16%, 27%), hsl(225, 15%, 31%), hsl(224, 16%, 27%)); */
    background-color: hsl(var(--hue), 16%, 27%);
    background-image: linear-gradient(90deg, hsl(var(--hue), 16%, 27%), hsl(var(--hue), 15%, 31%), hsl(var(--hue), 16%, 27%));
}

.landing .hero-widget__footer {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.landing .hero-widget h4 {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.landing .hero-widget__counter span {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.landing .simple_form .user_agreement .label_input > label,
.landing .simple_form p.lead {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.simple_form .label_input__append {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.simple_form .input.boolean label a {
    /* color: #2b90d9; */
    /* color: hsl(205, 70%, 51%); */
    color: hsl(var(--hue), 70%, 51%);
}

.box-widget {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.brand__tagline {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.landing__brand svg,
.logo-container h1 svg {
    filter: hue-rotate(calc(var(--hue) - 220deg));
}

body.lighter {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.icon-button.inverted.disabled {
    /* color: #707b97; */
    /* color: hsl(223, 16%, 52%); */
    color: hsl(var(--hue), 16%, 52%);
}

.compose-form .autosuggest-account .display-name__account {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status__info__icons {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.account__action-bar__tab.active {
    /* border-bottom-color: #6364ff; */
    /* border-bottom-color: hsl(240, 100%, 69%); */
    border-bottom-color: hsl(var(--hue), 100%, 69%);
}

.account__action-bar__tab {
    /* border-left-color: #393f4f; */
    /* border-left-color: hsl(224, 16%, 27%); */
    border-left-color: hsl(var(--hue), 16%, 27%);
}

.account__action-bar {
    /* border-top-color: #393f4f; */
    /* border-bottom-color: #393f4f; */
    /* border-top-color: hsl(224, 16%, 27%); */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    border-top-color: hsl(var(--hue), 16%, 27%);
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.account__action-bar__tab > span {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__bio .account__header__joined {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__bar {
    /* background: #313543; */
    /* border-bottom-color: #42485a; */
    /* background: hsl(227, 16%, 23%); */
    /* border-bottom-color: hsl(225, 15%, 31%); */
    background: hsl(var(--hue), 16%, 23%);
    border-bottom-color: hsl(var(--hue), 15%, 31%);
}

.translate-button {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.reactions-bar .emoji-button {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.reactions-bar .emoji-button:active, .reactions-bar .emoji-button:focus, .reactions-bar .emoji-button:hover {
    /* color: #a8b9cf; */
    /* color: hsl(214, 29%, 74%); */
    color: hsl(var(--hue), 29%, 74%);
}

.announcements__item__content a {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.conversation--unread {
    /* background: #2c313d; */
    /* background: hsl(222, 16%, 21%); */
    background: hsl(var(--hue), 16%, 21%);
}

.conversation {
    /* border-bottom-color: #393f4f; */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.conversation__content__relative-time {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.conversation__unread {
    /* background: #8c8dff; */
    /* background: hsl(239, 100%, 77%); */
    background: hsl(var(--hue), 100%, 77%);
}

.empty-column-indicator a, .follow_requests-unlocked_explanation a {
    /* color: #8c8dff; */
    /* color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.conversation__content__names {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account--panel {
    /* background: #313543; */
    /* border-top-color: #393f4f; */
    /* border-bottom-color: #393f4f; */
    /* background: hsl(227, 16%, 23%); */
    /* border-top-color: hsl(224, 16%, 27%); */
    /* border-bottom-color: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 23%);
    border-top-color: hsl(var(--hue), 16%, 27%);
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.account__header__content {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.limited-account-hint p {
    /* color: #d9e1e8; */
    /* color: hsl(208, 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.hashtag-bar {
/*     color: #9baec8; */
/*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.dismissable-banner__message h1, .warning-banner__message h1,
.dismissable-banner__action .icon-button, .warning-banner__action .icon-button {
/*     color: #8c8dff; */
/*     color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

.account__section-headline a.active::before, .account__section-headline button.active::before, .notification__filter-bar a.active::before, .notification__filter-bar button.active::before {
/*     background-color: rgb(140, 141, 255); */
/*     background-color: hsl(239, 100%, 77%); */
    background-color: hsl(var(--hue), 100%, 77%);
}

.status__content__read-more-button, .status__content__translate-button {
/*     color: #8c8dff; */
/*     color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}

a.status-card:active .status-card__author, a.status-card:active .status-card__description, a.status-card:active .status-card__host, a.status-card:active .status-card__title, a.status-card:focus .status-card__author, a.status-card:focus .status-card__description, a.status-card:focus .status-card__host, a.status-card:focus .status-card__title, a.status-card:hover .status-card__author, a.status-card:hover .status-card__description, a.status-card:hover .status-card__host, a.status-card:hover .status-card__title {
/*     color: #8c8dff; */
/*     color: hsl(239, 100%, 77%); */
    color: hsl(var(--hue), 100%, 77%);
}



/* ================= */
/* brodokk's patches */
/* ================= */
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder {
    /* color: #d9e1e8; */
    /* color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
    /* color: #d9e1e8; */
    /* color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form .compose-form__modifiers {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.compose-form .compose-form__buttons-wrapper {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 15%, 13%);
}

.drawer__inner.darker {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.search-results__header {
    /* background: #2c313d; */
    /* background: hsl(222, 16%, 21%); */
    background: hsl(var(--hue), 16%, 21%);
}

.search-results__header {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.search-results__section h5 {
    /* background: #1f232b; */
    /* background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.search-results__section h5 {
    /* border-bottom: 1px solid #393f4f; */
    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
}

.search-results__section h5 {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status__content__read-more-button {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.public-layout .header,
.public-layout .public-account-bio,
.directory__tag > a:active,
.directory__tag > a:focus,
.directory__tag > a:hover {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.activity-stream .entry,
.hero-widget__text,
.directory__tag > a,
.directory__tag > div {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 15%, 13%);
}

.public-layout .header .nav-link,
.hero-widget__text p,
.trends-widget h4,
.public-layout .footer h4,
.public-layout .public-account-header__tabs__tabs .counter,
.public-layout .public-account-bio .roles,
.public-layout .public-account-bio__extra,
.placeholder-widget,
.directory__tag h4 .fa,
.endorsements-widget h4 {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.directory__tag h4 small {
    /* color: #9baec8; */
    color: hsl(var(--hue), 20%, 70%);
}

.hero-widget__text a,
.trends__item__current {
    /* color: #d9e1e8; */
    /* color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.public-layout .footer .grid .column-2 h4 a,
.public-layout .footer,
.public-layout .footer .legal-xs a,
.public-layout .footer ul a {
    /* color: #737d99; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 20%, 52%);
}

.public-layout .footer .brand svg {
    /* color: #7f88a2; */
    /* color: hsl(215, 29%, 70%); */
    fill: hsl(var(--hue), 20%, 52%);
}

.public-layout .public-account-header__bar::before {
    /* border-color: #313543; */
    /* border-color: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.public-layout .public-account-header__bar .avatar img {
    /* background: #17191f; */
    /* border: 4px solid #313543; */
    /* background: hsl(225, 15%, 11%); */
    /* border: 4px solid hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 15%, 11%);
    border: 4px solid hsl(var(--hue), 16%, 23%);
}

.public-layout .public-account-header__tabs__tabs .counter {
    /* border-right: 1px solid #313543; */
    /* border-right: 1px solidhsl(227, 16%, 23%); */
    border-right: 1px solid hsl(var(--hue), 16%, 23%);
}

.public-layout .public-account-header__tabs__tabs .counter.active::after {
    /* border-bottom: 4px solid #2b90d9; */
    border-bottom: 4px solid hsl(var(--hue), 60%, 50%);
}

.public-layout .public-account-header__tabs__tabs .counter::after {
    /* border-bottom: 4px solid #9baec8; */
    border-bottom: 4px solid hsl(var(--hue), 29%, 70%);
}

.placeholder-widget {
    /* border: 2px dashed #606984; */
    /* border: 2px dashedhsl(225, 16%, 45%); */
    border: 2px dashed hsl(var(--hue), 16%, 45%);
}

.notice-widget a,
.placeholder-widget a {
    /* color: #2b90d9; */
    color: hsl(var(--hue), 60%, 50%);
}

.public-layout .public-account-bio .account__header__fields a {
    /* color: #2b90d9; */
    color: hsl(var(--hue), 50%, 50%);
}

.public-layout .header .nav-button {
    /* background-color: #595aff; */
    background-color: hsl(var(--hue), 29%, 47%);
}

.public-layout .header .nav-button:active,
.public-layout .header .nav-button:focus,
.public-layout .header .nav-button:hover {
    /* background-color: #535b72; */
    background-color: hsl(var(--hue), 40%, 47%);
}

.account__header__fields dd {
    /* color: #9baec8; */
    color: hsl(var(--hue), 29%, 70%);
}

.account__header__fields {
    /* border-color: #42485a currentcolor; */
    border-color: hsl(var(--hue), 15%, 31%) currentcolor;
}

.public-layout .header .brand:active,
.public-layout .header .brand:focus,
.public-layout .header .brand:hover {
    /* background: #42485a; */
    background: hsl(var(--hue), 15%, 31%);
}

.icon-button.disabled {
    /* color: #444b5d; */
    color: hsl(var(--hue), 16%, 32%);
}

.sign-in-banner p {
    /* color: #9baec8; */
    color: hsl(var(--hue), 29%, 70%);
}

.button.button-tertiary {
    /* color: #8c8dff; */
    /* border-color: #8c8dff; */
    color: hsl(var(--hue), 100%, 77%);
    border-color: hsl(var(--hue), 100%, 77%);
}

.button.button-tertiary:active,
.button.button-tertiary:focus,
.button.button-tertiary:hover {
    /* background: #6364ff; */
    /* background: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 60%, 49%);
}

.server-banner h4 {
    /* color: #9baec8; */
    color: hsl(var(--hue), 29%, 70%);
}

.server-banner__number-label {
    /* color: #9baec8; */
    color: hsl(var(--hue), 29%, 70%);
}

.server-banner__introduction {
    /* color: #9baec8; */
    color: hsl(var(--hue), 29%, 70%);
}

.about__meta h4 {
    /* color: #9baec8; */
    color: hsl(var(--hue), 29%, 70%);
}

.about__meta {
    /* background: #313543; */
    background: hsl(var(--hue), 16%, 23%);
}

.about__meta__divider {
    /* border-color: #393f4f; */
    border-color: hsl(var(--hue), 16%, 27%);
}

.about__section__title {
    /* background: #313543; */
    /* color: #8c8dff; */
    background: hsl(var(--hue), 16%, 23%);
    color: hsl(var(--hue), 100%, 77%);
}

.about__section__body {
    /* border-color: #313543; */
    border-color: hsl(var(--hue), 16%, 23%);
}

.prose {
    /* color: #d9e1e8; */
    color: hsl(var(--hue), 25%, 88%);
}

.prose ul > li::before {
    /* background-color: #9baec8; */
    background-color: hsl(var(--hue), 29%, 70%);
}

.prose a {
    /* color: #8c8dff; */
    color: hsl(var(--hue), 100%, 77%);
}

.prose hr {
    /* border-top-color: #313543; */
    border-top-color: hsl(var(--hue), 16%, 23%);
}

.about__header p {
    /* color: #9baec8; */
    color: hsl(var(--hue), 29%, 70%);
}

.about__footer {
    /* color: #606984; */
    color: hsl(var(--hue), 16%, 45%);
}

.rules-list li::before {
    /* background: #8c8dff; */
    /* color: #282c37; */
    background: hsl(var(--hue), 100%, 77%);
    color: hsl(var(--hue), 16%, 19%);
}

.rules-list li {
    /* border-bottom-color: #393f4f; */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.account {
    /* border-bottom-color: #393f4f; */
    border-bottom-color: hsl(var(--hue), 16%, 27%);
}

.page-header {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 19%);
}

.page-header p {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.status .graze-toot-container, .detailed-status .graze-toot-container {
    /* border: 1px solid #606984; */
    /* background: #383d4c; */
    /* border: 1px solid hsl(225, 16%, 45%); */
    /* background: hsl(225, 15%, 26%); */
    border: 1px solid hsl(var(--hue), 16%, 45%);
    background: hsl(var(--hue), 15%, 26%);;
}

.status .graze-toot-container.site h2, .detailed-status .graze-toot-container {
    /* color: rgba(255, 255, 255, 0.6); */
    /* color: hsla(255, 0%, 100%, 0.6); */
    color: hsla(var(--hue), 0%, 100%, 0.6);
}

.trends__header {
    /* color: #606984; */
    /* background: #2c313d; */
    /* border-bottom: 1px solid #1f232b; */
    /* color:  hsl(225, 16%, 45%); */
    /* background: hsl(222, 16%, 21%); */
    /* border-bottom: 1px solid hsl(220, 16%, 15%); */
    color: hsl(var(--hue), 16%, 45%);
    background: hsl(var(--hue), 16%, 21%);
    border-bottom: 1px solid #1f232b;
    border-bottom: 1px solid hsl(var(--hue), 16%, 15%);
}

.getting-started, .getting-started__footer p, .getting-started__footer p a {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.nothing-here {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.admin-wrapper .content-heading {
    /* border-bottom: 1px solid #393f4f; */
    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
}

.getting-started__footer a, .getting-started__trends .trends__item__current, .setting-text, .icon-button.disabled, .account__header__bio .account__header__joined, .nothing-here {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 29%, 20%);
}

.setting-text {
    /* border-bottom: 2px solid #9baec8; */
    /* border-bottom: 2px solid hsl(215, 29%, 70%); */
    border-bottom: 2px solid hsl(var(--hue), 29%, 70%);
}

.setting-text:focus {
/*     border-color: #a0a1ff; */
/*     border-color: hsl(239, 100%, 81%); */
    border-color: hsl(var(--hue), 100%, 81%);
}

.account__header__bar {
    /* border-color: #313543; */
    /* border-color: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.account__header__bio .account__header__fields {
    /*   border-top: 1px solid #42485a; */
    /*   border-top: 1px solid hsl(225, 15%, 31%); */
    border-top: 1px solid hsl(var(--hue), 15%, 31%);
}

.batch-table .nothing-here {
    /* background: #17191f; */
    /* background: hsl(225, 15%, 11%); */
    background: hsl(var(--hue), 15%, 11%);
}

/* Add suport on instance information when connected */

.rules-list li {
    /*    border-bottom: 1px solid #393f4f; */
    /*    border-bottom: 1px solid hsl(224, 16%, 27%); */
    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
}

.about__domain-blocks {
    /* background: #1f232b; */
    /* border: 1px solid #313543; */
    /* background: hsl(220, 16%, 15%); */
    /* border: 1px solid hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 15%);
    border: 1px solid hsl(var(--hue), 16%, 23%);
}

.about__domain-blocks__domain {
    /* color: #9baec8; */
    /* border-bottom: 1px solid #313543; */
    /* color: hsl(215, 29%, 70%); */
    /* border-bottom: 1px solid hsl(227, 16%, 23%); */
    color: hsl(var(--hue), 29%, 70%);
    border-bottom: 1px solid hsl(var(--hue), 16%, 23%);
}

.about__domain-blocks__domain h6 {
    /* color: #d9e1e8; */
    /* color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.about__domain-blocks__domain:nth-child(2n) {
    /* background: #242731; */
    /* background: hsl(226, 15%, 17%); */
    background: hsl(var(--hue), 15%, 17%);
}

/* search fixes */

.search-results__info {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.account {
    /* border-bottom: 1px solid #393f4f; */
    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
}

/* Add fixes for profile directory */

.account-card__header img {
    /* background: #17191f; */
    /* background: hsl(225, 15%, 11%); */
    background: hsl(var(--hue), 15%, 11%);
}

/* start brodokk bonus fixes */

.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder {
    /* color: #d9e1e8; */
    /* color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
    /* color: #d9e1e8; */
    /* color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-form .compose-form__modifiers {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.compose-form .compose-form__buttons-wrapper {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 15%, 13%);
}

/* Add support page not found when connected */

.regeneration-indicator {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.regeneration-indicator {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.regeneration-indicator__label strong {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.error-column {
    /*    background: rgb(40, 44, 55);  */
    /*    background: hsl(224, 16%, 19%);  */
    background: hsl(var(--hue), 16%, 19%);
}

.error-column__message {
    /* color: rgb(155, 174, 200); */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.notification.unread::before, .status.unread::before {
    /* -webkit-border-start: 4px solid #8c8dff; */
    /* -webkit-border-start: 4px solid hsl(239, 100%, 77%); */
    -webkit-border-start: 4px solid hsl(var(--hue), 100%, 77%);
    /* border-inline-start: 4px solid #8c8dff; */
    /* border-inline-start: 4px solid hsl(239, 100%, 77%); */
    border-inline-start: 4px solid hsl(var(--hue), 100%, 77%);
}

.drawer__header > * {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.pillbar-button:not([disabled]):focus, .pillbar-button:not([disabled]):hover {
    /* background-color: #131419; */
    /* background-color: hsl(230, 14%, 9%); */
    background-color: hsl(var(--hue), 14%, 9%);
}

.pillbar-button {
    /* background-color: #282c37; */
    /* background-color: hsl(224, 16%, 19%); */
    background-color: hsl(var(--hue), 16%, 19%);
}

.pillbar-button:not([disabled]).active {
    /* background-color: #595aff; */
    /* background-color: hsl(240, 100%, 67%); */
    /* background-color: hsl(var(--hue), 100%, 67%); */
    /* Manually changed for readibility */
    background-color: hsl(var(--hue), 60%, 47%);
}

.pillbar-button:not([disabled]).active:focus, .pillbar-button:not([disabled]).active:hover {
    /* background-color: #6364ff; */
    /* background-color: hsl(240, 100%, 69%); */
    /* background-color: hsl(var(--hue), 100%, 69%); */
    /* Manually changed for readability */
    background-color: hsl(var(--hue), 60%, 69%);
}

.mbstobon-0 .drawer__inner__mastodon {
    /* background-color: #444b5d; */
    /* background-color: hsl(223, 16%, 32%); */
    /* background-color: hsl(240deg, 16%, 32%); */
    background-color: hsl(calc(var(--hue) -120deg), 16%, 32%);
}

.compose-form .autosuggest-input label .autosuggest-textarea__textarea,
.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea {
    /* color: #d9e1e8; */
    /* background: #282c37; */
    /* color: hsl(208, 25%, 88%); */
    /* background: hsl(224, 16%, 19%); */
    color: hsl(var(--hue), 25%, 88%);
    background: hsl(var(--hue), 16%, 19%);
}

.compose-form .autosuggest-input label .autosuggest-textarea__textarea::placeholder,
.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea::placeholder {
    /* color: #d9e1e8; */
    /* color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.poll__input:active,
.poll__input:focus,
.poll__input:hover {
    /* border-color: #acd6c1; */
    /* border-color: hsl(150, 34%, 76%); */
    border-color: hsl(var(--hue), 34%, 76%);
}

.compose-form__poll-wrapper .icon-button.disabled {
/* 		color: #dbdbdb; */
    /* color: hsl(0, 0%, 86%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 16%, 45%);
}

.poll__cancel .icon-button {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    /* Manually changed for readability */
    color: hsl(var(--hue),  80%, 88.2%);
}

.poll__cancel .icon-button:active,
.poll__cancel .icon-button:focus,
.poll__cancel .icon-button:hover {
    /* color: #707b97; */
    /* color: hsl(223, 16%, 52%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 62.6%, 82.2%);
}

.compose-form__poll-wrapper .poll__footer button:focus,
.compose-form__poll-wrapper .poll__footer select:focus {
    /* border-color: #8c8dff; */
    /* border-color: hsl(239, 100%, 77%); */
    /* border-color: hsl(var(--hue), 100%, 77%); */
    /* Manually changed for readability */
    border-color: hsl(var(--hue), 70%, 47%);
}

.compose-form__poll-wrapper .poll__footer,
.compose-form__poll-wrapper {
/* 		border-color: #ebebeb; */
/* 		border-color: hsl(0, 0%, 92%); */
/* 		border-color: hsl(var(--hue), 0%, 92%); */
    /* Manually changed for readability */
    border-color: hsl(var(--hue), 16%, 27%);
}

.compose-form__poll-wrapper select {
    /* color: #282c37; */
    /* background-color: #fff; */
    /* border: 1px solid #dbdbdb; */
    /* color: hsl(224, 16%, 19%); */
    /* backgroud-color: hsl(0, 0%, 100%); */
    /* border: 1px solid hsl(0, 0%, 86%);*/
    /* Manually changed for readability */
    color: hsl(var(--hue), 70.8%, 82.5%);
    background-color: hsl(var(--hue), 25.4%, 27.8%);
    border: 1px solid hsl(var(--hue), 16%, 45%);
}

/*  Apparently an HTML "select" element cannot be properly styled in its expanded form.
    So this exists to mitigate contrast issues with the (unstylable) selected item. */
.compose-form__poll-wrapper select option {
    background-color: hsl(var(--hue), 16%, 19%);
/*     color: hsl(var(--hue), 17%, 15%); */
}

.emoji-picker-dropdown__menu {
    /* background: #fff; */
    /* background: hsl(0, 0%, 100%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 15.9%, 21%);
    /*box-shadow: 4px 4px 6px rgba(0,0,0,.4);*/
}

.emoji-mart-scroll {
    /* background: #fff; */
    /* background: hsl(0, 0%, 100%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 15.9%, 21%);
}

.emoji-mart-category-label span {
    /* background: #fff; */
    /* background: hsl(0, 0%, 100%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 15.9%, 21%);
}

.emoji-mart {
    /* color: #282c37; */
    /* color: hsl(224, 16%, 19%); */
    /* Manually changed for readability */
    color: hsl(var(--hue), 45.8%, 76.9%);
}

.emoji-mart-search {
    /* background: #fff; */
    /* background: hsl(0, 0%, 100%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 15.9%, 21%);
}

.emoji-picker-dropdown__modifiers__menu {
    /* background: #fff; */
    /* background: hsl(0, 0%, 100%); */
    /* Manually changed for readability */
    background: hsl(var(--hue), 15.9%, 21%);
}

.emoji-picker-dropdown__modifiers__menu button:active,
.emoji-picker-dropdown__modifiers__menu button:focus,
.emoji-picker-dropdown__modifiers__menu button:hover {
    /* background: rgba(217,225,232,.4); */
    /* background: hsla(208, 25%, 88%, 0.4); */
    /* Manually changed for readability */
    background: hsla(var(--hue), 25%, 88%, 0.4);
}

/* ======================== */
/* end of brodokk's patches */
/* ======================== */



/* Hue rotate for complex backgrounds */
.simple_form select {
    filter: hue-rotate(calc(var(--hue) - 240deg));
}

button.icon-button.disabled:hover i.fa-retweet,
button.icon-button.disabled i.fa-retweet {
    filter: hue-rotate(calc(var(--hue) - 240deg));
}

button.icon-button i.fa-retweet {
    filter: hue-rotate(calc(var(--hue) - 240deg));
}

button.icon-button:hover i.fa-retweet {
    filter: hue-rotate(calc(var(--hue) - 240deg));
}

.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet {
    filter: hue-rotate(calc(var(--hue) - 240deg));
}



/* Advanced Web Interface */
.drawer__header {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.drawer__header a:hover {
    /* background: #2e3340; */
    /* background: hsl(223, 16%, 22%); */
    background: hsl(var(--hue), 16%, 22%);
}

.drawer__tab {
    /* color: #9baec8; */
    /* color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.drawer__inner {
    /* background: #444b5d; */
    /* background: hsl(223, 16%, 32%); */
    background: hsl(var(--hue), 16%, 32%);
}

.drawer__inner__mastodon {
    /* background-color: #444b5d; */
    /* background-color: hsl(223, 16%, 32%); */
    background-color: hsl(var(--hue), 16%, 32%);
}

.drawer__inner__mastodon {
    /* background-color: #444b5d; */
    /* background-color: hsl(223, 16%, 32%); */
    /* background-color: hsl(240deg, 16%, 32%); */
    /* Strangely, I need to remove the space between the - and 120deg */
    background-color: hsl(calc(var(--hue) -120deg), 16%, 32%);
}

.drawer__inner__mastodon {
    filter: hue-rotate(calc(var(--hue) - 240deg));
}

.drawer__inner__mastodon > img {
    filter: hue-rotate(calc(var(--hue) - 300deg));
}

.flex-spacer,
.getting-started,
.getting-started__wrapper {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.column-subheading {
    /* color: #606984; */
    /* color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.column-link__badge,
.column-subheading {
    /* background: #282c37; */
    /* background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.getting-started__wrapper .column-link {
    /* background: #393f4f; */
    /* background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.getting-started__wrapper .column-link:active,
.getting-started__wrapper .column-link:focus,
.getting-started__wrapper .column-link:hover {
    /* background: #404657; */
    /* background: hsl(224, 15%, 30%); */
    background: hsl(var(--hue), 15%, 30%);
}

.follow-request-banner, .moved-account-banner {
    /*background: #313543; */
    /* background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.follow-request-banner__message, .moved-account-banner__message {
    color: #9baec8;
    color: hsl(215, 29%, 70%);
    color: hsl(var(--hue), 29%, 70%);
}



@media screen and (max-width: 1174px) {
    .ui__header,
    .layout-single-column .ui__header {
        /* background: #282c37; */
        /* border-bottom-color: #393f4f; */
        /* background: hsl(224, 16%, 19%); */
        /* border-bottom-color: hsl(224, 16%, 27%); */
        background: hsl(var(--hue), 16%, 19%);
        border-bottom-color: hsl(var(--hue), 16%, 27%);
    }

    .columns-area__panels__pane--navigational .navigation-panel {
        /* background: #282c37; */
        /* border-left-color: #393f4f; */
        /* background: hsl(224, 16%, 19%); */
        /* border-left-color: hsl(224, 16%, 27%); */
        background: hsl(var(--hue), 16%, 19%);
        border-left-color: hsl(var(--hue), 16%, 27%);
    }
}

Ok so i'v made some fixes because it was not seems to work well on my end in mastodon advanced mode. Not you sure if you was using it.

.drawer__tab {
    /*     color: #9baec8; */
    /*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.drawer__header, .drawer__inner__mastodon, .drawer__inner {
    /*     background: #393f4f; */
    /*     background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.drawer__header a:hover {
    /*     color: #8c8dff; */
    /*     color: hsl(var(--hue), 15%, 21%);; */
    background: hsl(var(--hue), 15%, 21%);;
}

.getting-started, .getting-started__footer p, .getting-started__footer p a, .column-subheading {
    /*     color: #606984; */
    /*     color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.flex-spacer, .getting-started, .getting-started__wrapper, .column-link__badge, .column-subheading, .nothing-here {
    /*     background: #282c37; */
    /*     background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.column-link {
    /*     background: #393f4f; */
    /*     background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.admin-wrapper .content-heading {
    /*     border-bottom: 1px solid #393f4f; */
    /*     border-bottom: 1px solid hsl(224, 16%, 27%); */
    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
}

.getting-started__footer a, .getting-started__trends .trends__item__current, .setting-text, .icon-button.disabled, .account__header__bio .account__header__joined, .nothing-here {
    /*     color: #9baec8; */
    /*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.setting-text {
    /*     border-bottom: 2px solid #9baec8; */
    /*     border-bottom: 2px solid hsl(215, 29%, 70%); */
    border-bottom: 2px solid hsl(var(--hue), 29%, 70%);
}

.account__header__bar {
    /*     border-color: #313543; */
    /*     border-color: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.account__header__bio .account__header__fields {
    /*       border-top: 1px solid #42485a; */
    /*       border-top: 1px solid hsl(225, 15%, 31%); */
    border-top: 1px solid hsl(var(--hue), 15%, 31%);
}

.account__header__fields {
    /*       border-color: #42485a currentcolor; */
    /*       border-color:  hsl(225, 15%, 31%) currentcolor; */
    border-color: hsl(var(--hue), 15%, 31%) currentcolor;
}


.batch-table .nothing-here {
    /*     background: #17191f; */
    /*     background: hsl(225, 15%, 11%); */
    background: hsl(var(--hue), 15%, 11%);
}

I also customize a bit, as a bonus, the "post" box:

.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder {
    /*     color: #d9e1e8; */
    /*     color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
    /*     color: #d9e1e8; */
    /*     color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-form .compose-form__modifiers {
    /*     color: #282c37; */
    /*     color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.compose-form .compose-form__buttons-wrapper {
    /*     color: #282c37; */
    /*     color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 15%, 13%);
}

A bit more fixes

.drawer__inner.darker {
    /*     background: #282c37; */
    /*         background: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 16%, 19%);
}

.search-results__header  {
    /*     background: #2c313d; */
    /*         background: hsl(222, 16%, 21%); */
    background: hsl(var(--hue), 16%, 21%);
}

.search-results__header  {
    /*     color: #606984; */
    /*     color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.search-results__section h5 {
    /*     background: #1f232b; */
    /*     background: hsl(220, 16%, 15%); */
    background: hsl(var(--hue), 16%, 15%);
}

.search-results__section h5 {
    /* border-bottom: 1px solid #393f4f; */
    /* border-bottom: 1px solid hsl(224, 16%, 27%); */
    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
}

.search-results__section h5 {
    /*     color: #606984; */
    /*     color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

.status__content__read-more-button {
    /*     color: #9baec8; */
    /*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

Ok iv added a bit more a user page (https://meow.social/@brodokk/) and a post focus on another instance (https://meow.social/@brodokk/105553672060718035). The last one will maybe be out of scope for you tho

.public-layout .header, .public-layout .public-account-bio, .directory__tag > a:active, .directory__tag > a:focus, .directory__tag > a:hover {
    /*     background: #393f4f; */
    /*     background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 27%);
}

.activity-stream .entry, .hero-widget__text, .directory__tag > a, .directory__tag > div{
    /*     color: #282c37; */
    /*     color: hsl(224, 16%, 19%); */
    background: hsl(var(--hue), 15%, 13%);
}

.public-layout .header .nav-link, .hero-widget__text p, .trends-widget h4, .public-layout .footer h4, .public-layout .public-account-header__tabs__tabs .counter, .public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra, .placeholder-widget, .directory__tag h4 .fa, .endorsements-widget h4 {
    /*     color: #9baec8; */
    /*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.directory__tag h4 small {
    /*     color: #9baec8; */
    color: hsl(var(--hue), 20%, 70%);
}

.hero-widget__text a, .trends__item__current {
    /*     color: #d9e1e8; */
    /*     color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.public-layout .footer .grid .column-2 h4 a, .public-layout .footer, .public-layout .footer .legal-xs a, .public-layout .footer ul a {
    /*     color: #737d99; */
    /*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 20%, 52%);
}

.public-layout .footer .brand svg {
    /*     color: #7f88a2; */
    /*     color: hsl(215, 29%, 70%); */
    fill: hsl(var(--hue), 20%, 52%);
}

.public-layout .public-account-header__bar::before {
    /*     border-color: #313543; */
    /*     border-color: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.public-layout .public-account-header__bar .avatar img {
    /*     background: #17191f; */
    /*      border: 4px solid #313543; */
    /*     background: hsl(225, 15%, 11%); */
    /*      border: 4px solid hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 15%, 11%);
    border: 4px solid hsl(var(--hue), 16%, 23%);  
}

.public-layout .public-account-header__tabs__tabs .counter {
    /*     border-right: 1px solid #313543; */
    /*     border-right: 1px solidhsl(227, 16%, 23%); */
    border-right: 1px solid hsl(var(--hue), 16%, 23%);
}

.public-layout .public-account-header__tabs__tabs .counter.active::after {
    /* border-bottom: 4px solid #2b90d9; */
    border-bottom: 4px solid hsl(var(--hue), 60%, 50%);
}

.public-layout .public-account-header__tabs__tabs .counter::after {
      /* border-bottom: 4px solid #9baec8; */
      border-bottom: 4px solid hsl(var(--hue), 29%, 70%);
}

.placeholder-widget {
    /* border: 2px dashed #606984; */
    /* border: 2px dashedhsl(225, 16%, 45%); */
    border: 2px dashed hsl(var(--hue), 16%, 45%);
}

.notice-widget a, .placeholder-widget a {
    /* color: #2b90d9; */
    color: hsl(var(--hue), 60%, 50%);
}

.public-layout .public-account-bio .account__header__fields a {
    /* color: #2b90d9; */
    color: hsl(var(--hue), 50%, 50%);
}

.public-layout .header .nav-button {
    /*     background-color: #595aff; */
    background-color: hsl(var(--hue), 29%, 47%);
}

.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover {
    /*     background-color: #535b72; */
    background-color: hsl(var(--hue), 40%, 47%);
}

And a bit more patches :3

Add support for tag list page

.page-header {
    /*     background: #393f4f; */
    /*     background: hsl(224, 16%, 27%); */
    background: hsl(var(--hue), 16%, 19%);
}

.page-header p {
    /*     color: #9baec8; */
    /*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

Support for instance information when logged on the current instance, for mastodon 4.x i think

.about__meta {
    /*     background: #313543; */
    /*     background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.about__header p, .about__meta h4 {
    /*     color: #9baec8; */
    /*     color: hsl(215, 29%, 70%); */
    color: hsl(var(--hue), 29%, 70%);
}

.about__section__title {
    /*     background: #313543; */
    /*     background: hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 23%);
}

.about__meta__divider {
    /*    border-color: #393f4f; */
    /*     border-color: hsl(224, 16%, 27%); */
    border-color: hsl(var(--hue), 16%, 27%);
}

.about__section__body {
    /*     border: 1px solid #313543; */
    /*     border: 1px solid hsl(227, 16%, 23%); */
    border: 1px solid hsl(var(--hue), 16%, 23%);
}

.rules-list li {
    /*    border-bottom: 1px solid #393f4f; */
    /*    border-bottom: 1px solid hsl(224, 16%, 27%); */
    border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
}

.about__domain-blocks {
    /*     background: #1f232b; */
    /*     border: 1px solid #313543; */
    /*     background: hsl(220, 16%, 15%); */
    /*     border: 1px solid hsl(227, 16%, 23%); */
    background: hsl(var(--hue), 16%, 15%);
    border: 1px solid hsl(var(--hue), 16%, 23%);
}

.about__domain-blocks__domain {
    /*     color: #9baec8; */
    /*     border-bottom: 1px solid #313543; */
    /*     color: hsl(215, 29%, 70%); */
    /*     border-bottom: 1px solid hsl(227, 16%, 23%); */
    color: hsl(var(--hue), 29%, 70%);
    border-bottom: 1px solid hsl(var(--hue), 16%, 23%);
}

.about__domain-blocks__domain h6 {
    /*     color: #d9e1e8; */
    /*     color: hsl(var(--hue), 25%, 88%); */
    color: hsl(var(--hue), 25%, 88%);
}

.about__domain-blocks__domain:nth-child(2n) {
    /*     background: #242731; */
    /*     background: hsl(226, 15%, 17%); */
    background: hsl(var(--hue), 15%, 17%);
}

.about__footer {
    /*     color: #606984; */
    /*     color: hsl(225, 16%, 45%); */
    color: hsl(var(--hue), 16%, 45%);
}

Hey! Thks again for this updates, I notice recently their is a problem with the graze thingy (the preview for links) not having the theme apply on it so here is a patch:

/* Graze toot fixes */

.graze-toot-container.site {
    /* border: 1px solid #606984; */
    /* background: #383d4c; */
    /* border: 1px solid hsl(225, 16%, 45%); */
    /* background: hsl(225, 15%, 26%); */
    border: 1px solid hsl(var(--hue), 16%, 45%);
    background: hsl(var(--hue), 15%, 26%);;
}

.graze-toot-container.site h2 {
    /* color: rgba(255, 255, 255, 0.6); */
    /* color: hsla(255, 0%, 100%, 0.6); */
    color: hsla(var(--hue), 0%, 100%, 0.6);
}

Before

After

Another fix for the "You might be interested in" when you do a search

.trends__header {
    /* color: #606984; */
    /* background: #2c313d; */
    /* border-bottom: 1px solid #1f232b; */
    /* color:  hsl(225, 16%, 45%); */
    /* background: hsl(222, 16%, 21%); */
    /* border-bottom: 1px solid hsl(220, 16%, 15%); */
    color: hsl(var(--hue), 16%, 45%);
    background: hsl(var(--hue), 16%, 21%);
    border-bottom: 1px solid #1f232b;
    border-bottom: 1px solid hsl(var(--hue), 16%, 15%);
}

Hey! Thks again for this updates, I notice recently their is a problem with the graze thingy (the preview for links) not having the theme apply on it so here is a patch:

/* Graze toot fixes */

.graze-toot-container.site {
    /* border: 1px solid #606984; */
    /* background: #383d4c; */
    /* border: 1px solid hsl(225, 16%, 45%); */
    /* background: hsl(225, 15%, 26%); */
    border: 1px solid hsl(var(--hue), 16%, 45%);
    background: hsl(var(--hue), 15%, 26%);;
}

.graze-toot-container.site h2 {
    /* color: rgba(255, 255, 255, 0.6); */
    /* color: hsla(255, 0%, 100%, 0.6); */
    color: hsla(var(--hue), 0%, 100%, 0.6);
}

Before

After

Update on this patch

    .status .graze-toot-container {
        /* border: 1px solid #606984; */
        /* background: #383d4c; */
        /* border: 1px solid hsl(225, 16%, 45%); */
        /* background: hsl(225, 15%, 26%); */
        border: 1px solid hsl(var(--hue), 16%, 45%);
        background: hsl(var(--hue), 15%, 26%);;
    }

    .status .graze-toot-container.site h2 {
        /* color: rgba(255, 255, 255, 0.6); */
        /* color: hsla(255, 0%, 100%, 0.6); */
        color: hsla(var(--hue), 0%, 100%, 0.6);
    }

Cross-post seems to not be handled otherwise (not sure it's cross post)

@brodokk Thank you so much for the extra fixes and updates! I have updated the theme now :)