[quote]The built-in “color scheme” customization in the board tries to automatically do a lot of tweaks, but as I’ve found from experimenting, it also creates a lot of problems and things like UI icons and dividers can get their contrast destroyed.
[/quote]
yeah, trying to make a full theme really rattled my skull over the past week
(download images for zoom, Thanks Discourse)
there’s a couple of clear sticking points of usability to the following that I couldn’t riddle out with Inspect- visited links on topics listings, spoilers, and quote link are all almost unreadable in this set-up. less important but still blatant inconsistencies include the colours of site preview links, thread-view subforum links, and these bloody subforum stripes all over.
still, some people seem to like this CGA-style deathcyan + deathmagenta (+ black + off-white), so, in hopes that the above bits can be fixed up by the more-knowledgeable admins, here is a 90%-complete submission (possibly the only submission)
CGA Bubblegum Eyesear
/* index-j's heavy screwing with stylus for selectbutton:
cga-esque. cyan, magenta, key, and pale white.
reference colours: #38d8d8, #d838d8, #050505, #e5e5e5. */
/*
-----------------------
visual sticking points:
-----------------------
* topic listing visited shade
* posts spoilers
* quote blocks
---------------------
big aesthetic issues:
---------------------
* site preview links
* front-page / etc subforum stripes
(why do we even have these, really. probably hard-coded, honestly.)
* thread-view top header subforum listing
-------
luxury:
-------
* postbox background
* private messages post colours (+ add border)
* user panel navigation-button hover icons
*/
/* main background of forums. carries over to odd post #s in default style. */
html {
background-color: #050505;
color: #e5e5e5;
}
/* Default link colours. */
a,
a:hover,
a:visited {
color: #e5e5e5;
}
/* ------------
navigation header
------------ */
/* top header */
.d-header {
background-color: #050505;
box-shadow: 4 2px 4px -1px rgba(229, 229, 229, 0.25);
color: #e5e5e5;
}
.d-head a {
color: #e5e5e5;
}
.extra-info-wrapper {
color: #e5e5e5;
}
.topic-statuses a.topic-link {
color: #e5e5e5;
}
/* search and users panel */
.fa-search,
.fa-bars {
color: #e5e5e5;
}
.show-help,
.categories-link {
color: #e5e5e5;
font-weight: bold;
}
/* notifications-box usernames */
div.notifications ul li a div p span {
font-weight: bold;
}
/* notifications-box topic names and log off */
.notifications ul li a,
.menu-links li a {
color: #e5e5e5;
}
/* unread notifications icon */
a.widget-link.badge-notification.unread-notifications {
background: #e5e5e5;
color: #050505
}
/* Thread title header within thread */
a.widget-link.topic-link span,
.topic-statuses .fa.fa-thumb-tack {
color: #e5e5e5;
}
/* Forums-view action buttons */
ul.nav.nav-pills li.active a,
ul.nav.nav-pills li a:hover,
.notification_options button,
#create-topic {
background: #e5e5e5;
color: #050505;
}
ul.nav.nav-pills li.active a:hover,
#create-topic:hover,
ul.nav.nav-pills li a {
background: #050505;
color: #e5e5e5;
}
.notification-options button ul.dropdown-menu a span.fa {
color: #e5e5e5;
}
/* ------------
topics listing
------------ */
/* topic listings themselves */
.topic-list-item {
color: #050505
}
.topic-list a.title {
color: #050505;
}
/* the "last:" poster for a thread */
td.topic-creator {
color: #050505;
}
/* odd colors on the topic listing, then even */
.topic-list-item:nth-of-type(1n) {
background-color: #38d8d8;
border-top: 1px;
}
.topic-list-item:nth-of-type(1n) td.topic-creator a {
color: #d838d8;
}
.topic-list-item:nth-of-type(2n) {
background-color: #d838d8;
border-top: 1px;
}
.topic-list-item:nth-of-type(2n) td.topic-creator a {
color: #38d8d8;
}
/* reply count, time since last activity */
.topic-list-item td.posts,
.topic-list-item td.age,
.topic-list-item td.posts a,
.topic-list-item td.age a {
color: #050505;
}
/* view count */
.topic-list-item td.views,
.topic-list-item td.views a {
color: #e5e5e5;
}
/* new thread indicator */
.badge.badge-notification.new-topic {
color: #e5e5e5;
}
/* Sticky icon */
.topic-list-item i.fa.fa-thumb-tack,
.topic-list-item i.fa.fa-thumb-tack.unpinned {
color: #050505;
}
/* post count highlights, various colors */
.heatmap-high {
/* also used for the edited marker! */
color: #e5e5e5 !important
}
.heatmap-med {
color: #e5e5e5 !important
}
.heatmap-low {
color: #e5e5e5 !important
}
.coldmap-high a {
color: #e5e5e5 !important
}
.coldmap-med a {
color: #e5e5e5 !important
}
.coldmap-low a {
color: #e5e5e5 !important
}
/* view count colors */
.heatmap-high a {
color: #e5e5e5 !important
}
.heatmap-med a {
color: #e5e5e5 !important
}
.heatmap-low a {
color: #e5e5e5 !important
}
/* color of the little number next to unread posts */
.badge-notification.new-posts,
.badge-notification.unread-posts {
background-color: #e5e5e5;
color: #050505;
font-weight: bold
}
/* new posts display */
.alert.alert-info.clickable {
color: #050505;
background: #e5e5e5;
border-style: solid;
border-width: 1px 0px;
border-color: #050505;
}
/* visited-post fade-ins */
/* XXX: unfortunately, these don't play nice with sharp colours. */
@keyframes background-fade-highlight {
0% {
background-color: #050505
}
}
.custom-body {
background-color: #050505
}
/* ------------
posts
------------ */
div.topic-post {
margin: 4px;
color: #050505;
}
/* username, user title */
div.topic-post .first.username a {
color: #e5e5e5;
text-decoration: underline;
font-weight: bold;
}
div.topic-post .user-title {
color: #e5e5e5;
}
/* post date */
a.post-date,
span.relative-date {
color: #e5e5e5;
}
/* sticky summary box*/
.topic-map {
background: #050505
}
/* post links */
div.topic-post .cooked a {
text-decoration: underline;
}
/* post link clicks icon*/
.badge.badge-notification.clicks {
background: #e5e5e5;
color: #050505
}
/* XXX: quote blocks */
/* XXX: spoilers */
/* XXX: site preview links */
/* odd post #s color, then even */
div.topic-post:nth-of-type(1n) {
background-color: #38d8d8;
color: #050505;
}
div.topic-post:nth-of-type(2n) {
background-color: #d838d8;
color: #050505;
}
/* per-post reply button */
.reply.create.fade-out {
color: #e5e5e5;
}
/* XXX: reply-box stuff.
Would like to change the background... alas. */
.reply-to {
color: #050505;
}
a.cancel,
a.toggle-preview {
color: #e5e5e5;
}
/* reply display */
a.reply-to-tab span {
color: #e5e5e5;
}
/* other post actions */
div.actions .like-count {
color: #e5e5e5;
}
div.actions button:hover,
div.actions button.delete:hover {
background: #050505;
color: #e5e5e5
}
/* thread post progress (requires split) */
#topic-progress {
color: #38d8d8;
border-color: #e5e5e5;
}
#topic-progress .bg {
background-color: #e5e5e5;
}
/* ------------
thread footer
------------ */
/* most bottom thread buttons */
#topic-footer-buttons button,
.notification-options button {
color: #050505;
background: #e5e5e5;
}
#topic-footer-buttons button:hover {
color: #e5e5e5;
background: #050505;
}
#topic-footer-buttons .fa,
.notification-options button .fa {
color: #050505;
}
#topic-footer-buttons button:hover .fa,
.notification-options button:hover .fa {
color: #e5e5e5;
}
/* post reply button (bottom of thread, then in reply box) */
#topic-footer-buttons button.btn-primary,
button.btn-primary {
background: #38d8d8;
color: #d838d8;
}
#topic-footer-buttons button.btn-primary:hover,
button.btn-primary:hover {
background: #d838d8;
color: #38d8d8;
}
/* topic tracking menu */
#topic-footer-buttons .dropdown-menu .icon.fa {
color: #e5e5e5;
}
/* suggested link */
#suggested-topics h3 a {
color: #38d8d8
}
a find-replace in that bloc once said issues are addressed could do with some other colours, but finding all of those cases spent most of my interest in anything much further than find-replace in that mess I made. I’m surprised there’s not much of themes suggestions besides “IC colours” and “something not so dark” (at least, as far as I can remember), but the notion of forum themes feels like it’s from a different decade anyway.
