An updated and re-written FP dark mode inspired by the old dark mode made by Kyyh (#7361).
GM's Furry Paws Dark Mode by goldenmeadows
Details
Authorgoldenmeadows
LicenseNo License
Categoryfurry-paws
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
CHANGELOG
V 1.0.3 (January 18th 2024)
= Visibility for dog breed's boosted stats have been improved when choosing new sports
V 1.0.2 (January 17th 2024)
= Selected tabs across the site are no longer brown.
= A bug causing random event pop-ups to appear very far down the page has been fixed.
= Achievements page has been fixed.
= Bookmarks dropdown has been fixed.
= Buttons are no longer brown when hovered.
= Pop-ups now have correctly coloured borders.
= Buttons on dog care pages (quick enter and training) are no longer brown.
= The following images have been fixed to be transparent: tennis ball, all krongs (excluding
black), all basic Lacrima foods
V 1.0.1 (January 16th 2024)
= A bug causing links to revert to their original tan colour has been fixed.
= A bug causing text inputs to be white has been fixed.
= Fixed the ToS and login pages.
= A bug causing random event popups to be white has been fixed.
= Fixed dog pages.
= Fixed search dialogues being white.
= Fixed discoloured text.
= Changed the background filter from invert to brightness to decrease eyestrain.
= Added a matching custom scrollbar.
V 1.0.0
= Added my version of the enhanced overview page.
= Changed the overall site layout to use black and other darkened colours.
= Removed many gradients to make viewing text easier.
= Inverted certain site images to make them match the site's theme.
= Made the bar containing your bookmarks link and currency sticky so it follows you as you
scroll.
And more!
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name GM's Furry Paws Dark Mode
@version 20240117.09.11
@namespace ?
==/UserStyle== */
@-moz-document domain("furry-paws.com") {
/*----------------------------------------VARIABLES--------------------------------------------------*/
:root {
--veryLightBlue: #B9CBE3;
--lightBlue: #9BB5D8;
--midBlue: #99A5B7;
--darkBlue: #6C7E97;
--veryDarkBlue: #404B5A;
--lightGrey: #5F6062;
--darkGrey: #1B1C20;
--veryDarkGrey: #0A0B0C;
}
/*----------------------------------------IMAGES--------------------------------------------------*/
img#fpaw_layout_logo {
filter: brightness(0);
}
/*----------------------------------------SCROLLBAR--------------------------------------------------*/
/* width */
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
background: #000;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--darkBlue);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--veryLightBlue);
}
/*----------------------------------------MAIN PAGE--------------------------------------------------*/
/*Make the patterned background inverted*/
body {
backdrop-filter: brightness(50%);
background-color: #000;
color: var(--lightBlue);
}
div#fpaw_layout_content_holder {
background:none;
}
/*Make content body black instead of white*/
div#fpaw_layout_content {
background: #000;
background-image: none;
border: 5px solid var(--lightBlue);
}
/*Remove the brown border images*/
img#fpaw_layout_content_top, div#fpaw_layout_end {
display:none;
}
/*Navigation on kennel pages*/
.plain_subnav,.forum_navigate, .horizontal_subnav {
background: var(--darkGrey);
border: none;
border-radius: 0;
}
#chat_launch_link, div.forum_holder, .achievement_outer .box {
background: var(--darkGrey);
border: 1px solid var(--darkBlue);
border-radius: 0;
}
/*Remove border around properties*/
.kennel_property_outer {
border: 0;
background: none;
}
/*Make property info black*/
.kennel_property_info {
background: #0F1012;
}
/*Kennel tabs*/
#kennel_tabs div.kennel_tab {
background: transparent;
border-top: none;
}
/*Selected kennel tab*/
#kennel_tabs > ul li.active_tab, #dog_tabs ul li.active_tab {
background: var(--lightGrey);
border: 1px solid var(--lightBlue);
}
/*Selected tab on dog pages*/
#dog_tabs div.dog_tab {
border-top: 3px solid var(--lightBlue);
}
/*Top bar containing bookmarks, money, etc*/
#top_bar {
background: #000;
position: sticky;
top: 0;
border-bottom: 1px solid var(--lightBlue);
box-shadow: 3px 3px 3px black;
}
/*Site footer*/
div#fpaw_layout_footer {
background: #000;
}
/*Random event popups*/
#investigate_window {
background: var(--darkGrey);
border: 1px solid;
color: var(--midBlue);
margin-left: auto;
margin-right: auto;
top: 275px;
margin-top:0;
margin-bottom: 0;
}
#close_modal, .pseudo_link {
color: var(--midBlue);
}
/*Background of ToS page*/
div#fpaw_no_column_holder {
background: #000;
border: 5px solid var(--lightBlue);
}
/**/
.highlight_me, .highlight_me td {
background-color: var(--veryDarkBlue) !important;
}
/*Box with Chili next to it on the log in page*/
#chili_box {
background: var(--darkGrey);
border: 1px solid var(--lightBlue);
}
/*----------------------------------------TEXT--------------------------------------------------*/
/*Text and link colours*/
/*Links and text*/
h4.column_header, a, #top_bar_box div.top_bar_pulldown a, div#fpaw_layout_link_holder a, div.forum_holder_inner a, label, .ui-widget-content, .ui-widget-content a, #top_bar_box div.top_bar_pulldown {
color: var(--midBlue);
}
/*Headers*/
h3, table.info_table th, #fpaw_layout_link_holder div.link_category_header, table.topic_table td.edge, .text_title,.text_large, .info_table td.text_large, .ui-dialog table.info_table th, #main_dog_name, .achievement_outer .box .title {
color: var(--lightBlue);
}
/*Table backgrounds*/
table.info_table td, table.info_table th {
background: #000;
}
/*Subtext*/
.text_small, .bold_small, .list_small {
color: var(--darkBlue);
}
/*Kennel page links that aren't selected*/
.plain_subnav a {
color: var(--darkBlue);
}
/*Kennel sort options*/
.order_by_form input {
background: transparent;
color: var(--darkBlue);
}
/*Dotted borders under certain headers*/
h4.column_header, #fpaw_layout_link_holder div.link_category_header {
border-bottom: 1px dotted var(--darkBlue);
}
/*Dotted borders*/
#top_friend_holder {
border-left: 1px dotted var(--darkBlue);
}
/*Dotted borders*/
#top_friend_holder, #top_message_holder, #top_bookmarks_holder {
border-right: 1px dotted var(--darkBlue);
}
.plain_subnav a:hover {
background: #5F6062;
}
/*Forum topics*/
table.topic_table td.row {
border-bottom: 1px solid var(--lightBlue);
background: var(--darkGrey);
border-radius: 0;
}
/*Forum post content*/
table.topic_table {
background-color: #000;
border: 1px solid var(--darkBlue);
border-radius: 0;
}
/*Forum headers*/
table.topic_table th {
color: #000;
background: var(--darkBlue);
}
table.topic_table td.edge {
background: #000;
}
/*Selected option in vet's offices*/
div.active_link, div.column_links div.active_link_text a {
background: var(--lightBlue);
color: #000;
}
/*Inventory items*/
div.shop_item_holder {
background: var(--darkGrey);
border: 1px solid var(--darkBlue);
padding: 1px;
}
/*Forum post user info*/
table.topic_table td.post_user {
background: var(--darkGrey);
border-right: 1px solid var(--darkBlue);
border-top: 1px solid var(--darkBlue);
}
table.topic_table tbody tr {
border-bottom: 1px solid var(--darkBlue);
}
/*Links on hover*/
a:hover, #top_bar_box div.top_bar_pulldown a:hover, #fpaw_layout_link_holder div.top_bar_pulldown a:hover {
color: var(--veryLightBlue);
text-decoration: underline;
}
/*----------------------------------------DOG PAGES--------------------------------------------------*/
#dog_tabs div.dog_tab {
background: #000;
}
/*Care labels*/
.dog_care_box {
color: var(--lightBlue)
}
/*Styling for care containers*/
.dog_side_container {
border: 1px solid var(--darkGrey);
border-radius: 0;
}
/*Remove white sides on care bars*/
img.bubble_right, img.bubble_left {
visibility: hidden
}
/*Caare loading overlay*/
#care_loading {
background: var(--darkGrey);
}
.ui-widget-content {
background: var(--veryDarkGrey);
border: 1px solid var(--lightBlue);
border-radius: 0;
}
div.normal_holder {
background: var(--darkGrey);
}
/*Dog info panel with name*/
div.dog_overview_holder {
border: 1px solid var(--lightBlue);
border-radius: 0;
}
div.notice {
background: var(--darkGrey);
color: var(--lightBlue);
border: 1px solid var(--lightBlue);
}
div.dog_overview_holder.normal_holder span {
color: var(--lightBlue) !important;
}
/*----------------------------------------BETTER OVERVIEW--------------------------------------------------*/
td:has(img[src*="images/icons/bullet_red.png"]) {
background-color: #330000 !important;
}
td:has(img[src*="images/icons/bullet_orange.png"]) {
background-color: #332100 !important;
}
td:has(img[src*="images/icons/arrow_up.png"]) {
background-color: #001900 !important;
}
/*----------------------------------------BETTER INVENTORY--------------------------------------------------*/
span.item_uses_left:contains("1/20") {
background-color: yellow; /* Set the background color for the highlighted cells */
}
/*----------------------------------------NAVIGATION--------------------------------------------------*/
/*Dropdown links*/
#fpaw_layout_link_holder div.top_bar_pulldown {
background: #000;
border: 5px solid var(--darkBlue);
}
/*Widget headers on dog pages & "building site" label on */
.ui-widget-header, div.slot_label {
background: var(--darkGrey) !important;
border: 1px solid var(--darkGrey);
border-radius: 0;
}
/*Side containers*/
.kennel_side_container {
border: 1px solid var(--darkGrey);
}
div#fpaw_layout_link_holder {
background: #000;
border-left: 5px solid var(--lightBlue);
border-right: 5px solid var(--lightBlue);
border-top: 4px solid var(--lightBlue);
border-bottom: 2px solid var(--lightBlue);
width: inherit;
}
/*Navigation background colours on hover*/
#fpaw_layout_link_holder div.active {
background: var(--lightBlue);
}
/*Navigation links on hover*/
div#fpaw_layout_link_holder a:hover, #fpaw_layout_link_holder div.active > a {
color: var(--darkBlue);
}
#top_bar_box div.top_bar_pulldown {
background: var(--darkGrey);
border: 5px solid var(--lightBlue);
}
/*----------------------------------------INPUTS--------------------------------------------------*/
input[type="submit"] {
padding: revert;
}
input.ui-button, button.ui-button, input.button {
background: var(--darkGrey) !important;
border: 1px solid var(--lightGrey);
padding: 0.3em 1em;
border-radius: 0;
}
input.ui-button.ui-state-hover {
background: var(--lightGrey) !important;
}
input, textarea, select {
background: var(--veryDarkGrey);
color: var(--lightBlue);
}
/*Item search dropdown in Mall*/
.chosen-container-single .chosen-single, .chosen-container-active.chosen-with-drop .chosen-single, .chosen-container .chosen-results, .chosen-container .chosen-drop, .chosen-container-single .chosen-search...