Tangled Neutral

by @956MB(Alexander Bays)Created yesterdayNew
Custom CSS
Screenshot of Tangled Neutral on tangled.org
Neutral greys for Tangled's dark theme.
By Alexander Bays (@956MB). Imported from https://github.com/956MB/boosts under the MIT License.
What this boost changes

Custom CSS

Adds 192 lines of its own CSS. Rules that would load files from the internet are rejected when a boost is submitted.
ShowHide 192 lines · 7.5 KB
/*
 * From https://github.com/956MB/boosts
 *
 * MIT License
 *
 * Copyright (c) 2026 Alexander Bays
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/* Tangled Neutral */
/* https://github.com/956MB/boosts/blob/main/tangled-neutral.css */

/* https://tangled.org/ */

@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1)) !important;
  }
  .dark\:bg-gray-800 {
    background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1)) !important;
  }
  .dark\:bg-gray-800\/50 {
    background-color: rgb(31 31 31 / 0.5) !important;
  }
  .dark\:hover\:bg-gray-700\/50:hover, .dark\:hover\:bg-gray-800:hover {
    background-color: rgb(55 55 55 / 0.5) !important;
  }
  .dark\:border-gray-700, .dark\:md\:border-gray-700, .prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
  }
  .btn {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
    background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1)) !important;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }
  .dark\:bg-gray-700 {
    background-color: rgb(55 55 55 / var(--tw-bg-opacity, 1)) !important;
  }
  .dark\:text-gray-400, .dark\:text-gray-300 {
    color: rgb(175 175 175 / var(--tw-text-opacity, 1)) !important;
  }
   .dark\:text-gray-600 {
    color: rgb(75 75 75 / var(--tw-text-opacity, 1)) !important;
  }
  .dark\:text-gray-200, text-gray-800, .dark\:text-gray-200, placeholder-gray-400, .dark\:placeholder-gray-600 {
    color: rgb(229 229 229 / var(--tw-text-opacity, 1)) !important;
  }
  .text-gray-400, .text-gray-500, .dark\:text-gray-400 {
    color: rgb(175 175 175 / var(--tw-text-opacity, 1)) !important;
  }
  .dark\:border-gray-600 {
    border-color: rgb(75 75 75 / var(--tw-border-opacity, 1)) !important;
  }
  .dark\:\[\&_pre\]\:bg-gray-900 pre {
    background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1)) !important;
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
  }
  .chroma .c, .chroma .c1 {
    color: #6E6E6E !important;
  }
  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
    background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1)) !important;
    color: rgb(209 209 209 / var(--tw-text-opacity, 1)) !important;
  }
  .prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
  }
  .btn-group-item.active {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
    background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1)) !important;
    color: rgb(243 243 243 / var(--tw-text-opacity, 1)) !important;
  }
  .btn-group-item {
    background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1)) !important;
  }
  .btn-group {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
  }
  .btn-group > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(55 55 55 / var(--tw-divide-opacity, 1)) !important;
  }
  .dark\:placeholder-gray-600::placeholder {
    color: rgb(75 75 75 / var(--tw-placeholder-opacity, 1)) !important;
  }
  .hover\:dark\:bg-gray-700\/50:hover {
    background-color: rgb(55 55 55 / 0.5) !important;
  }
  .group:hover .group-hover\:dark\:bg-gray-700\/25 {
    background-color: rgb(55 55 55 / 0.25) !important;
  }
  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(55 55 55 / var(--tw-divide-opacity, 1)) !important;
  }
  input[type="checkbox"] {
    border-color: rgb(75 75 75 / var(--tw-border-opacity, 1)) !important;
  }
  input[type="checkbox"]:hover {
    background-color: rgb(55 55 55 / var(--tw-bg-opacity, 1)) !important;
  }
  input[type="checkbox"]:hover:checked {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important;
  }
  .text-gray-500 {
    color: rgb(107 107 107 / var(--tw-text-opacity, 1)) !important;
  }
  code {
    background-color: rgb(55 55 55 / var(--tw-bg-opacity, 1)) !important;
  }
  input::placeholder {
    color: rgb(145 145 145 / var(--tw-placeholder-opacity, 1)) !important;
  }
  input, textarea {
    filter: saturate(0) !important;
    border-color: rgb(75 75 75 / var(--tw-border-opacity, 1)) !important;
  }
  input:not([type="checkbox"]), textarea {
    background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
    border-color: rgb(75 75 75 / var(--tw-border-opacity, 1)) !important;
  }
  select {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
    background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1)) !important;
  }
  .dark\:text-gray-700 {
    color: rgb(55 55 55 / var(--tw-text-opacity, 1)) !important;
  }
  a:hover {
    color: rgb(209 209 209 / var(--tw-text-opacity, 1)) !important;
  }
  .hover\:dark\:text-gray-400:hover {
    color: rgb(175 175 175 / var(--tw-text-opacity, 1)) !important;
  }
  .md\:dark\:bg-gray-800 {
    background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1)) !important;
  }
  .dark\:bg-blue-950 {
    background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1)) !important;
  }
  .dark\:border-blue-900 {
    border-color: rgb(45 45 45 / var(--tw-border-opacity, 1)) !important;
  }
  .btn-flat:hover {
    background-color: rgb(55 55 55 / var(--tw-bg-opacity, 1)) !important;
    color: rgb(243 243 243 / var(--tw-text-opacity, 1)) !important;
  }
  .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)),
  .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)),
  .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)),
  .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)),
  .prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)),
  .prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)),
  .prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-color: rgb(55 55 55 / var(--tw-border-opacity, 1)) !important;
  }
  .prose {
    --tw-prose-invert-bullets: #4B4B4B !important;
  }
  .md\:dark\:bg-gray-700 {
    background-color: rgb(55 55 55 / var(--tw-bg-opacity, 1)) !important;
  }
  .md\:dark\:border-gray-600 {
    border-color: rgb(75 75 75 / var(--tw-border-opacity, 1)) !important;
  }
  .dark\:bg-gray-600 {
    background-color: rgb(75 75 75 / var(--tw-border-opacity, 1)) !important;
  }
  .btn::before {
    filter: saturate(0) !important;
  }
  .btn-group-item {
    filter: saturate(0) !important;
  }
}
Something wrong with this boost? Sign in to report it.
About this boost

What this boost changes

Custom CSS
