New Themes and Stylesheets

Sudrian Engineer

Perfectly Normal Day

Whoever decided on purple as one of the options, thank you. It looks AMAZING, and I think it will now be my theme of choice!

Posted about a month ago Report
Edited about a month ago

Link Quote Reply

Autumn_Rosewood

Done flew the coop

Pink Derpi go BRRRR!
^3^

Been hoping for such a lil’ change to themes for ages, This is awesome staff. <3

Posted about a month ago Report

Link Quote Reply

Background Pony #10E7

@Vapor Trail, @Background Pony #0A97
This is only a rough start, because a lot of the site’s interface (and therefore colors) weren’t visible in screenshots I could find. So, if you set your theme to dark gray or dark orange, and then use this in a userstyle, you get close-ish:

Updated with exact values from byte[]:

i.favicon-home {
	mask-image: none !important;
	-webkit-mask-image: none !important;
	background-color: transparent !important;
	top: 0;
	
	background-image: url("/preenhub.svg") !important;
	background-position: 50%;
	font-size: 20px;
	vertical-align: middle;
}

@media (min-width: 1150px) {
	.header__link .fa__text { display: none; }
	
	i.favicon-home {
		background-image: none !important;
		font-family: inherit !important;
		
		display: flex;
		align-items: center;
		flex-direction: row;
		font-weight: bold;
		font-size: calc(var(--header-height) - 8px);
	}

	i.favicon-home::before {
		content: "Preen";
	}
	i.favicon-home::after {
		content: "hub";
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: var(--base-color);
		border: 1px solid var(--base-color);
		border-radius: 4px;
		color: var(--background-color);
		height: calc(var(--header-height) - 8px);
		margin-top: 4px;
	}
}

a.interaction--upvote:active, a.interaction--upvote:hover { color: var(--background-color); }
a.interaction--downvote:active, a.interaction--downvote:hover { color: var(--background-color); }
a.interaction--hide:active, a.interaction--hide:hover { color: var(--background-color); }
a.interaction--comments { color: var(--base-color); }
a.interaction--comments:hover { background: var(--base-color); }

:root {
    --background-color: #050505;
    --page-background-color: #000000;
    --foreground-color: #e0e0e0;
    --base-color: #ff9900;
    --primary-light-color: #6b5f1a;
    --success-light-color: #144714;
    --danger-light-color: #66211f;
    --warning-light-color: #7d4825;
    --destroyed-content-color: #382c2f;
    --header-color: #101010;
    --header-field-color: #2a2a2a;
    --header-secondary-color: #1f1f1f;
    --header-admin-color: #3b1d1d;
    --block-header-color: #202020;
    --block-header-link-text-color: var(--base-color);
    --block-header-light-color: #1a1a1a;
    --block-header-light-link-text-color: var(--base-color);
    --border-color: var(--block-header-color);
    --media-box-color: #4e4e4e;
    --link-color: var(--base-color);
    --link-hover-color: #ffe0b3;
    --fave-color: var(--base-color);
    --vote-up-color: var(--base-color);
    --vote-down-color: var(--base-color);
    --hide-color: var(--base-color);
    --assistant-color: #511b4e;
    --tag-normal-color: #4aa158;
    --tag-category-rating-color: #418dd9;
    --tag-category-spoiler-color: #d49b39;
    --tag-category-origin-color: #6f66d6;
    --tag-category-oc-color: #b157b7;
    --tag-category-error-color: #d45460;
    --tag-category-character-color: #4aaabf;
    --tag-category-content-official-color: #b9b541;
    --tag-category-content-fanmade-color: #cc8eb5;
    --tag-category-species-color: #b16b50;
    --tag-category-body-type-color: #b8b8b8;
    --commission-category-color: #e07b27;
    --site-notice-color: #07070a;
    --image-overlay-background-color: #000000;
    --text-light-color: var(--foreground-color);
    --meta-color: #101010;
    --meta-border-color: #4e4e4e;
    --primary-color: #83731c;
    --success-color: #185718;
    --danger-color: #7a2725;
    --warning-color: #95562c;
    --header-hover-color: black;
    --header-field-hover-color: black;
    --header-secondary-hover-color: #151515;
    --header-admin-hover-color: #2a1515;
    --block-header-hover-color: #171515;
    --block-header-link-text-hover-color: #d89e18;
    --block-header-light-hover-color: #110e0e;
    --block-header-light-link-text-hover-color: #e9ae0c;
    --media-box-hover-color: #444444;
    --media-box-header-link-text-color: var(--link-color);
    --media-box-header-link-text-hover-color: #cc7a00;
    --link-dark-color: #f6ae43;
    --link-dark-hover-color: #f6e0c1;
    --image-show-link-color: var(--link-dark-color);
    --image-show-link-hover-color: var(--link-dark-hover-color);
    --image-overlay-color: var(--foreground-color);
    --image-overlay-background: black;
    --assistant-border-color: #70256b;
    --admin-links-color: #301e04;
    --admin-links-hover-color: #7d4c03;
    --background-odd-color: black;
    --background-even-color: var(--background-color);
    --success-odd-color: #0f320f;
    --success-even-color: #114011;
    --warning-odd-color: #4f2a11;
    --warning-even-color: #663718;
    --danger-odd-color: #3a1413;
    --danger-even-color: #4f1918;
    --foreground-half-color: #737373;
    --sparkline-color: #ffa31a;
    --input-text-color: var(--foreground-color);
    --input-color: var(--meta-color);
    --input-border: var(--meta-border-color);
    --input-color-active: #1d1d1d;
    --input-border-active: #f39b16;
    --tag-normal-background: #1b3c21;
    --tag-normal-border: #2d6236;
    --tag-category-rating-background: #113456;
    --tag-category-rating-border: #275a8d;
    --tag-category-spoiler-background: #4f3811;
    --tag-category-spoiler-border: #7d591b;
    --tag-category-origin-background: #1d1858;
    --tag-category-origin-border: #4c4884;
    --tag-category-oc-background: #451f47;
    --tag-category-oc-border: #833a87;
    --tag-category-error-background: #4f181d;
    --tag-category-error-border: #93252f;
    --tag-category-character-background: #193f47;
    --tag-category-character-border: #2b6a78;
    --tag-category-content-official-background: #4b491c;
    --tag-category-content-official-border: #6e6b26;
    --tag-category-content-fanmade-background: #622c4e;
    --tag-category-content-fanmade-border: #9c5883;
    --tag-category-species-background: #362118;
    --tag-category-species-border: #634438;
    --tag-category-body-type-background: #393939;
    --tag-category-body-type-border: #5a5a5a;
    --commission-category-background: #45250a;
    --commission-category-border: #763f11;
    --site-notice-link-color: #eaa53e;
    --site-notice-link-hover-color: #e6941a;
    --button-text-color: var(--foreground-color);
    --button-background-color: rgba(16, 16, 16, 0.2);
    --button-hover-background-color: var(--input-color-active);
    --button-hover-border-color: var(--input-border-active);
    --button-border-color: var(--meta-border-color);
    --button-primary-background-color: var(--primary-light-color);
    --button-success-background-color: var(--success-light-color);
    --button-warning-background-color: var(--warning-light-color);
    --button-danger-background-color: var(--danger-light-color);
    --button-primary-border-color: #bba211;
    --button-success-border-color: #177217;
    --button-warning-border-color: #b76128;
    --button-danger-border-color: #b3312e;
    --button-primary-hover-background: #564d15;
    --button-primary-hover-border: #a48e0f;
    --button-success-hover-background: #0e330e;
    --button-success-hover-border: #135c13;
    --button-warning-hover-background: #653a1e;
    --button-warning-hover-border: #9e5422;
    --button-danger-hover-background: #521b19;
    --button-danger-hover-border: #9f2c28;
    --downvote-disabled-color: #5f4012;
    --dnp-warning-hover-color: #ffad33;
    --poll-form-label-background: #343434;
    --tag-dropdown-hover-background: #060606;
}

@Princess Celestia
Re: FliegerFaustToP47’s report: solved by
i.favicon-home { mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } (root cause is .fa-fw having width: 1.25em)

Posted about a month ago Report
Edited about a month ago

Link Quote Reply

Sudrian Engineer

Perfectly Normal Day

@Background Pony #10E7
DANG, you are smart!

Posted about a month ago Report

Link Quote Reply

byte[]

Philomena Contributor

@Background Pony #10E7
You may find this helpful

Posted about a month ago Report

Link Quote Reply

Background Pony #0F18

This is awesome and I love it

Posted about a month ago Report

Link Quote Reply

Background Pony #79B2

@Princess Celestia
Mods can identify BPs by IP address?

Posted about a month ago Report

Link Quote Reply

Background Pony #8DC7

How do I switch back to white?

Posted about a month ago Report

Link Quote Reply

𝕭𝖆𝖉𝖍𝖊𝖆𝖗𝖙

PPBTFWASYMFA

@Background Pony #8DC7
Upper left corner with the three bars, hit settings.

Posted about a month ago Report

Link Quote Reply

Mr.Myoozik

Music/Charts Enthusiast

Nice, I’m choosing dark green and that’s gonna be my default color from now on. Also, the logo change looks cool.

Posted about a month ago Report

Link Quote Reply

♬𝕸𝖊𝖑𝖑𝖔𝖜 𝕽𝖍𝖞𝖙𝖍𝖒♪

Glass Sight's My Bae💙

My two cents: The logo hardly looks different at all, and that’s good! It’s simple, to the point, and uncomplicated.
Also, cool to have a more sort of “DIY” mix-and-match approach to the themes. I’m personally fine with the light theme (so shoot me, dark theme nerds :P), but I can see this as being fun for users in general!

Posted about a month ago Report

Link Quote Reply

WanderingHolyKnight

Pretty cool that new colors are added!😁 That said, I was gonna try dark teal, but I’m comfortable with just dark blue, as it’s easy on my eyes.

Posted about a month ago Report

Link Quote Reply

Icicle Niceicle 1517

Ocs,Boops,Tickles&Memes

~~the trixie logo should be yellow like the rest of the text when using the red theme reeeeee~~
Very good quality of life change for this site, i like it, here’s hoping for more themes/customisation in the future

Posted about a month ago Report

Link Quote Reply

dualreason

@Princess Celestia
forest, desert, table, evening at the improv…

So many choices :3

Posted about a month ago Report

Link Quote Reply

WanderingHolyKnight

@♬𝕸𝖊𝖑𝖑𝖔𝖜 𝕽𝖍𝖞𝖙𝖍𝖒♪
Nah, not gonna shoot ya. I prefer the sword anyway. :P
Joking aside, you do you.🙂 I prefer my dark theme, as it makes the text pop more and it’s easy on my eyes, compared to the stark white of the light theme.

Posted about a month ago Report

Link Quote Reply

♬𝕸𝖊𝖑𝖑𝖔𝖜 𝕽𝖍𝖞𝖙𝖍𝖒♪

Glass Sight's My Bae💙

@WanderingHolyKnight
I’m the opposite, believe it or not. If I’m focusing hard on text on a dark theme and look away, I see light patterns of text lines in my eyes and the bugs me. But I know that people’s vision and preferences can vastly differ, so despite my own joke above in the brackets, I say you do you as well :)

Posted about a month ago Report

Link Quote Reply

Background Pony #8DC7

@𝕭𝖆𝖉𝖍𝖊𝖆𝖗𝖙

There’s nothing in settings that allows me to switch back. Do I really have to be signed in to be able to do so?

Posted about a month ago Report

Link Quote Reply

byte[]

Philomena Contributor

@Background Pony #8DC7
If you’re not signed in, the site follows your device theme. (If it doesn’t, you’re using a really old browser)

Posted about a month ago Report

Link Quote Reply