Twitter Dark Theme without deep black
/* ==UserStyle==
@name X Grey Theme
@description Twitter Dark Theme without deep black
@namespace x.com
@author look997
@version 0.1.0
@license MIT
==/UserStyle== */
@-moz-document url-prefix("https://x.com") {
:root {
/* hsl */
--xl-bg: 240 4.3% 9%; /* --z-grok-grey: 240, 4.3%, 9% --z-x-grey: 220 5% 12% */
#placeholder.r-kemksi {
background-color: hsl(var(--xl-bg)) !important;
}
}
:root[data-theme="dark"],
:root > body[data-color-scheme="dark"] {
--background: var(--xl-bg);
--color-background: var(--xl-bg);
/* tło. tylko dla body */
&:not(:root[data-theme="dark"]) {
background-color: hsl(var(--background)) !important;
}
/* tło różnych elementów w main? */
.r-kemksi {
background-color: hsl(var(--background));
}
/* baner osi czasu */
/* przycisk Grok (pływający) - który przełącza się w baner popupa Groka */
.r-5zmot {
background-color: hsla(var(--background) / 0.65);
}
/* przycisk proponowanej akcji w Groku */
.r-1qeg2u0 {
background-color: hsl(var(--background)) !important;
}
/* tło różnych elementów w main? w Trend globalny */
.jf-element .j-vdda9x11 {
background-color: hsl(var(--background)); /* rgba(0, 0, 0, var(--jbgo)); */ /* --jbgo: 1; */
}
/* przyciski przewijania poziomego działów w Trend globalny */
.jf-element.bg-black {
background-color: hsl(var(--background)); /* rgb(0 0 0 / var(--tw-bg-opacity, 1)); */ /* --tw-bg-opacity: 1; */
}
/* pole szukania w czacie */
--color-gray-0: 225 9.3% 16.9%; /* */
/*.bg-gray-0 {
background-color: hsl(var(--color-gray-0));
}*/
/* separator w liście w czacie */
--color-gray-50: 0 0% 19.2%; /* 214 10% 14% */
/*.border-gray-50 {
border-color: hsl(var(--color-gray-50));
}*/
/* Uwaga: czasem z projektu X wychodzi jakaś niebieskość np. przy :hover na jakimś przycisku albo elemencie listy albo szukajce. to ciekawostka tylko */
/*
--foreground: 200 7% 91%;
--border: 210 7% 18%;
--color-gray-0: 220 12% 10%;
--color-gray-50: 214 10% 14%;
--color-gray-200: 210 6% 21%;
*/
/* Uwaga: niektóre szare napisy za bardzo się zlewają, powinny być ciemniejsze */
:is(div,a,button,span)[style*="color: rgb(113, 118, 123);"] {
color: rgb(164, 164, 164) !important; /* rgb(160, 160, 160) !important; rgb(164, 164, 164) !important rgb(170, 170, 170) !important */
}
}
/* Uwaga: niektóre elementy, np. przyciski, są teraz ciemniejsze niż tło, a zaprojektowane przez X były na jaśniejsze niż tło */
/* Uwaga: moja szarość wydaje się brązowata, może lepiej ją lekko zmienić, żeby to był bardziej szary szary? */
}