A custom theme for Counter Social which inverts the default color scheme and de-inverts the images/videos to compensate. Due to a lack of accessibility options on CoSo, this kind of end-user theme styling is necessary to allow some users to view the site more comfortably.
Counter Social Invert Dark to Light by fernlovebond
Details
Authorfernlovebond
LicenseNo License
Categorycounter.social
Created
Updated
Size1.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
** THINGS THIS THEME DOES **
Inverts the default theme that CoSo normally uses, reversing it from the dark gray-blue to a slightly beige, light color cycle.
De-inverts the images and video placeholders so they retain their original coloration (including user avatars, embedded images, embedded videos, and link preview compactions.
Increases the font sizes for legibility, especially if zoomed out to see more of your columns.
Widens the columns to a more comfortable width for the larger font sizes.
Source code
@name Counter Social Invert Dark to Light
@namespace https://sethharrington.me/
@version 1.0.1 [trying to correct install errors]
@-moz-document domain("counter.social") {
/* DEFAULT INVERT TO THE PAGE */
html body {
filter: invert(1);
}
img,
[class*="status-card-video"] iframe,
[class*="video-player"] video,
.media-gallery__gifv video,
div[class*="account__avatar"]:not(.account__avatar-overlay),
div[class*="status-card"],
.bias,
.status-card,
.compose-form__upload-thumbnail,
.emoji-picker-dropdown__menu {
filter: invert(1);
}
/* CLOSE DEFAULT INVERT TO THE PAGE */
/* COLUMN WIDTHS */
.column {
width: 390px;
}
.drawer {
width: 380px
}
/* END COLUMN WIDTHS */
/* FONT ADJUSTMENTS */
div p,
textarea {
font-size: 15pt !important;
}
/* END FONT ADJUSTMENTS */
/* FANCY DISPLAY COLORS FOR # and @ */
[class*="display-name"],
a[href*="counter.social/@"],
.h-card {
color: #f69c7b;
}
a[href*="tags/"],
.muted .status__content a {
color: #5fb3b9;
}
/* END FANCY DISPLAY COLORS FOR # and @ */
/* COLOR LINKS */
.status__content a:not([href*="tags/"]) {
color: #d38de1;
}
/* END COLOR LINKS */
/* IMPROVE MUTED READABILITY */
.muted {
filter: brightness(1.75);
}
}