trying to make long comment threads more visually separate [UserStyle][Stylus]
i personally sometimes found it a little hard to visually distinguish between comments in really long threads so i made this simple userstyle that remedies the problem for me by adding a semi-transparent background to comments.
you can use this css with a browser extenion like Stylus (officially supports Chrome and Firefoxx and can be installed on most popular Chromium-based browsers including Edge, Vivaldi, and Opera) once you have Stylus installed you can go here and click the “install” button to automate the installation of my css. otherwise you can copy the css below and paste it into a new style in Stylus
my instance also doesn’t automatically change light/dark theme based on browser/system preferences (i’m under the impression some other instances can do that) so this userstyle also changes to light or dark theme based on system preference, it’s made to override Lemmy light themes so you’ll have to manually apply a light theme in your Lemmy settings for the color switching to work properly (the comment contrast feature should work either way, though.)
the css should work for all instances of Lemmy, but i didn’t add the url for all instaces cuz of i was lazy. i did add a few of the most popular instances and the instance i use, though. if you want you can ask me to add your instance and i will, or you can just add it yourself in Stylus.
ok thx bai
<span style="color:#323232;">/* ==UserStyle==
</span><span style="color:#323232;">@name sky's lemmy tweaks
</span><span style="color:#323232;">@version 2023.06.16.04
</span><span style="color:#323232;">@namespace userstyles.world/user/skylestia
</span><span style="color:#323232;">@description some simple tweaks to lemmy that might make comments easier to read for some ppl & automatically changes colors to match system color preferences
</span><span style="color:#323232;">@author skylestia
</span><span style="color:#323232;">@license No License
</span><span style="color:#323232;">
</span><span style="color:#323232;">Last Update:
</span><span style="color:#323232;">--- fixed code blocks being unreadable in dark mode
</span><span style="color:#323232;">--- fixed hrs being invisible in dark mode
</span><span style="color:#323232;">--- increased padding on "content divs" (posts and sidebars)
</span><span style="color:#323232;">--- made base dark mode background color slightly lighter
</span><span style="color:#323232;">--- fix text in input fields being too low contrast in dark mode
</span><span style="color:#323232;">--- fix focused input fields being too bright in dark mode
</span><span style="color:#323232;">
</span><span style="color:#323232;">==/UserStyle== */
</span><span style="color:#323232;">
</span><span style="color:#323232;">@-moz-document domain("lemmy.blahaj.zone"), domain("lemmy.ml"), domain("lemmy.world"), domain("beehaw.org"), domain("lemmy.one"), domain("feddit.de"), domain("lemmy.ca"), domain("lemmygrad.ml") {
</span><span style="color:#323232;">/* this css will automatically adjust Lemmy's color theme to match your system color theme */
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* this mod currently assumes you're using a light theme in your Lemmy settings
</span><span style="color:#323232;"> * so it may not work correctly if you set a dark theme in Lemmy settings
</span><span style="color:#323232;"> * set a light hteme before applying this mod for best results
</span><span style="color:#323232;">*/
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* palette */
</span><span style="color:#323232;">:root {
</span><span style="color:#323232;"> /* dark theme colors */
</span><span style="color:#323232;"> --bg-base-dark: #1e1e21;
</span><span style="color:#323232;"> --bg-commentTree-dark: #8585850f;
</span><span style="color:#323232;"> --bg-highlightedComments-dark: #ffa8001a;
</span><span style="color:#323232;"> --bg-contentDivs-dark: black;
</span><span style="color:#323232;"> --bg-code-dark: #262729;
</span><span style="color:#323232;"> --fg-base-dark: #cdd1d8;
</span><span style="color:#323232;"> --fg-links-dark: #98d6ff;
</span><span style="color:#323232;"> --borders-dark: #2b383f;
</span><span style="color:#323232;"> /* light theme colors */
</span><span style="color:#323232;"> --bg-commentTree-light: #999d9d0f;
</span><span style="color:#323232;"> --bg-highlightedComments-light: #ffa80029;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* layout and functionality tweaks */
</span><span style="color:#323232;">
</span><span style="color:#323232;">.card,.card-body {padding: 1em;}
</span><span style="color:#323232;">.col-12.col-md-8.mb-3 .post-listing .col-12.card.my-2.p-2 > div {
</span><span style="color:#323232;"> padding: 1em 2em !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">.comment {
</span><span style="color:#323232;"> padding: 0 2em 0 0;
</span><span style="color:#323232;"> border-radius: 1em;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">.mark,mark {border-radius: 20px;}
</span><span style="color:#323232;">.comment:not(.ml-1) {
</span><span style="color:#323232;"> margin-top: 20px;
</span><span style="color:#323232;"> padding: 0 2em;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">.comment .ml-1,.comment .mx-1 {
</span><span style="color:#323232;"> margin-left: 1em !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">pre {
</span><span style="color:#323232;"> padding: 1em 2em;
</span><span style="color:#323232;"> border-radius: 1em;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* colors */
</span><span style="color:#323232;">
</span><span style="color:#323232;">@media (prefers-color-scheme: dark) {
</span><span style="color:#323232;"> body {
</span><span style="color:#323232;"> color: var(--fg-base-dark);
</span><span style="color:#323232;"> background-color: var(--bg-base-dark);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6,
</span><span style="color:#323232;"> .navbar-light .navbar-brand,.text-body,
</span><span style="color:#323232;"> .navbar-light .navbar-nav .nav-link,pre {
</span><span style="color:#323232;"> color: var(--fg-base-dark) !important;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .bg-light {background-color: black !important;}
</span><span style="color:#323232;"> .card,.card-body {
</span><span style="color:#323232;"> color: var(--fg-base-dark);
</span><span style="color:#323232;"> background-color: var(--bg-contentDivs-dark);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .form-control {
</span><span style="color:#323232;"> color: var(--fg-base-dark);
</span><span style="color:#323232;"> background-color: black;
</span><span style="color:#323232;"> border: none;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .form-control:focus {
</span><span style="color:#323232;"> color: var(--fg-base-dark);
</span><span style="color:#323232;"> background-color: var(--bg-code-dark);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .comment {
</span><span style="color:#323232;"> background-color: var(--bg-commentTree-dark);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .mark,mark {background-color: var(--bg-highlightedComments-dark);}
</span><span style="color:#323232;"> .border-light {
</span><span style="color:#323232;"> border-color: var(--borders-dark) !important;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .border-secondary {border: none;}
</span><span style="color:#323232;"> .text-info {color: var(--fg-links-dark) !important;}
</span><span style="color:#323232;"> hr {border-color: var(--borders-dark);}
</span><span style="color:#323232;"> pre {background-color: var(--bg-code-dark);}
</span><span style="color:#323232;">}
</span><span style="color:#323232;">@media (prefers-color-scheme: light) {
</span><span style="color:#323232;"> .comment {
</span><span style="color:#323232;"> background-color: var(--bg-commentTree-light);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> .mark,mark {background-color: var(--bg-highlightedComments-light);}
</span><span style="color:#323232;">}
</span><span style="color:#323232;">}
</span>
Add comment