Skip to content

PDB Midnight by Winterveil

Screenshot of PDB Midnight
Write a review Install Get Stylus

Details

AuthorWinterveil

LicenseNo License

Categorypersonality-database

Created

Updated

Size18 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

PDB Midnight is a userstyle designed to transform the Personality Database website into a visually stunning and easy-on-the-eyes experience.

Notes

This style is constantly being updated so reinstalling might be necessary after an update. So far most of the site has been modified, but that doesn't mean all of it has. You might see certain parts of the site which still use the original theme's greenish blue colors.

What this theme does:

  • Recolors most of the site to a dark and purple palette.
  • Square icons on frontpage and profile cards, circles everywhere else.
  • New banner for user profiles.
  • Removes ads for the PDB app.
  • Removes Debate Chamber / PDB Community buttons on the frontpage.
  • Replace bullet points with stars.
  • Adds a background mascot which you can change or get rid of by editing the code.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         PDB Midnight
@description  A customizable dark theme for Personality Database
@namespace    personality-database.com
@author       Parakeet
@version      2023420

==/UserStyle== */
@-moz-document domain("personality-database.com") {
/* Frontpage Stuff */
html, body {
  background-color: #0c0c0c !important;
}

/* Replace URL for Custom Mascot - Delete URL here to get rid of mascot */
.page-area{
    background: linear-gradient(rgba(12,12,12,0.6), rgba(12,12,12,0.6)), url(https://winterveil.neocities.org/host/fa869743d08ca95414a50cc0ec1526bd.png);
    background-repeat: no-repeat;
    background-size: 20%;
    background-attachment: fixed !important;
    background-position: bottom 0px right 100px;
}

.progress .progress-bar{
    background: #9971f9;
}

.trending-page .ant-carousel .carousel-container{
    background-image: url("https://winterveil.neocities.org/host/td_bg_stars.png") !important;
}

.trending-page .personality-label::after {
  content: '';
  width: 20px;
  background-position: 7px center;
  border-radius: 4px;
  border: 1px solid #8C8C8C;
  color: #8C8C8C;
}

.trending-page .personality-label{
    font-size:18px;
    color: white;
    text-transform: uppercase;
}

.trending-page .controversial {
  display: none;
}

.trending-page .pdb-community-page {
  display: none;
}

.side .quiz-entry{
    display: none;
}

.profile .category-title .title::before {
  height: 2px;
  background: #9971f9;
}

/* Header */
.header-container{
background: rgb(30,30,30);
    height: 110%;
}

.header-container .user-avatar label {
  color: #ffffff;
  font-weight: 600;
}

.header-container .user-avatar svg path{
    fill: #ffffff;
}

.header-container .logo {
  height: 55px;
  flex: 0 0 175px;
  background-image: url(https://winterveil.neocities.org/host/pdb_dark_purp.svg);
  background-repeat: no-repeat;
}

/* Footer */
.footer .copyright.item::after {
  content: '| Midnight Theme by Parakeet.';
}

.footer .item {
  color: #e3e3e3;
  font-size: 12px;
}

.footer .platforms svg rect{
    stroke: #e3e3e3;
}

.footer .platforms svg path{
    fill: #e3e3e3;
}

.app-download {
    visibility: hidden;
}

/* Sidebar */

.app-link{
    display: none;
}

.side .profile-menu .rc-menu-item.rc-menu-item-selected, .side .profile-menu .rc-menu-item:hover {
  color: #ffffff;
  background-color: #242424;
}

.personality-selector {
  margin-bottom: 20px;
  height: 30px;
  padding: 20px;
  border: 1.5px solid #484848;
  border-radius: 10px;
}

.personality-selector label {
  color:#e3e3e3;
  font-size:15px;
}

.side .split-line{
    display: none;
    background-color: #484848;
}

.side .profile-menu .rc-menu > li.rc-menu-submenu .rc-menu-submenu-title {
  border: 1.5px solid #484848;
  border-radius: 15px;
}

.side .profile-menu .rc-menu-submenu-title {
  color: #e3e3e3;
  font-size: 15px;
  background-color: #0c0c0c;
}

.side .link-item.active, .side .link-item {
  color: #e3e3e3;
}

.side .link-item.active, .side .link-item:hover {
  color: #9971f9;
}

.profile .profile-filter-expand > div{
    background: #090909;
}

.profile .community .edit-wrapper .edit-item::before {
  content: '🟊';
  display: inline-block;
  color: white;
  font-size: 20px;
}

.profile .community .edit-wrapper .edit-item {
  color: #9971f9;
  font-size: 14px;
}

.pdb-tabs .tab.active {
  color: #ffffff;
  background-color: #181818;
}

.pdb-tabs {
  background: #141414;
}

.profile .recommend .scroll-tab-container a:hover, .profile .recommend .scroll-tab-container a.active {
  background-color: #000000;
}

/* Selector */

.profile .filter-from-mobile-filter .selector.active{
    border-color: #e3e3e3;  
}

.profile .filter-from-mobile-filter .selector.active label{
    color: #e3e3e3;
}

.selector.active {
  border-color: #9971f9;
}

.selector.active label{
    color: #9971f9;
}

.selector.active .arrow path {
  fill: #9971f9 !important;
}

/* Profile #1 */

.profile .community {
  border: 2px solid #313131;
}

.profile .community .summary .summary-right .wrp {
  background-color: #1c1c1c;
    border-radius: 10px;
    padding: 15px;
}

.profile .community .community-title {
    font-size: 20px;
    color: #ffffff;
}

/* Profile #2 */
.collection-module .collection-list .create-btn {
  padding: 15px 0;
  border: 2px solid #e3e3e3;
  border-radius: 10px;
}

.collection-module .collection-default .collection-default-item {
  background: #121212;
}

.collection-module .collection-list .create-btn label {
  color:#e3e3e3 !important;
}

.collection-module .collection-list .create-btn-prompt svg path {
  stroke:#e3e3e3;
}

.person .person-top .person-top-level .edit-btn {
  color: #e3e3e3;
  border: 1px solid #e3e3e3;
}

.person .person-top .person-top-level .more-icon {
  color: #e3e3e3;
  border: 1px solid #e3e3e3;
}

.person .person-top {
  background-color: #121212;
  background-image: url("https://winterveil.neocities.org/host/pf_bg_drk.png");
}

.collection-module .collection-module-filter .new-collection-btn rect{
    fill: white;
}

.person .person-top .person-top-level::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #141414;
  border-radius: 10px;
}

.person .person-top .base .personality {
  font-weight: bold;
  color: #9971f9;
}

.person .person-top .avatar-container .personality-page {
  background: rgba(34,34,34,0.3);
  border: 1px solid #e3e3e3;
  color: #e3e3e3;
}

.points .rc-collapse .rc-collapse-content {
  background-color: #181818;
}

.points .points-item .points-info .points-num{
    color: #9971f9;
}

.points .points-item .points-info {
  background: #181818;
}

.points .points-item .points-info:hover {
  background: #141414;
}

.person .person-left .follow .followers::before, .person .person-left .follow .peas::before {
  background-color: #242424;
}

.person .person-left .follow {
  border: 0px solid #000000;
}


.person .person-body .person-body-filter {
  background-color: #0c0c0c;
}

.person .person-body .person-body-filter .person-body-filter-item.active {
  background-color: #181818;
}

/* Pf_Line_Btn */

.btn:not(:disabled):hover {
  background-color: #181818;
}

.added-module .added-module-filter span.active {
  border-bottom: 2px solid #9971f9;
}

.post-module .post-module-filter span.active {
  border-bottom: 2px solid #9971f9;
}

.vote-module .vote-module-filter span.active {
  border-bottom: 2px solid #9971f9;
}

.follow-save-module .follow-save-module-filter span.active {
  border-bottom: 2px solid #9971f9;
}

.collection-module .collection-module-filter span.active {
  border-bottom: 2px solid #9971f9;
}

/* Comment Cards */
.vote-card .quote-profile-1 .character .user {
  display: block;
  font-size: 16px;
  color: #9971f9;
  white-space: pre-line;
}

.add-comment .add-comment-input textarea {
  border: 1px solid #444444;
}

.feed-card .feed-card-expand .reply-comment::before {
    background-color: #444444;
}

.vote-card {
  background-color: #121212;
  border-radius: 16px;
}

.feed-card .main-body.box {
  background-color: #181818;
}

.feed-card-vote-module .quote-profile {
  border: 1px solid #e3e3e3;
}

.feed-card-vote-module .quote-profile .character {
  border-left: 1px solid #e3e3e3;
}

.feed-card-vote-module .quote-profile:hover{
  background-color: #181818;
}

.feed-card-container{
  background-color: #121212;
}

.feed-card-vote-module .quote-profile .character .user {
  color: #9971f9;
  font-weight: 600 ;
}

.vote-card .quote-profile-1:hover {
  background-color: #000000;
}

.vote-card .quote-profile-1 .character {
  border-left: 0px solid #000000;
}

/* User Cards*/

.user-card {
  background: #121212;
}

/* Replies */

.reply-module .reply-module-container .reply-module-item {
  padding: 16px;
  background-color: #121212;
  border-radius: 16px;
}

.reply-module .reply-module-container .reply-module-item .reply-module-subtext {
  background: #181818;
}

.reply-module-from svg path {
  fill:white;
  stroke:white;
}

.reply-module .reply-module-container .reply-module-item .reply-module-subtext .user {
  color: #9971f9;
}

.feed-card .feed-card-vote {
  background-color: #242424;
  color: #9971f9;
  font-style: italic;
  font-size:13px
}

.reply-comment .reply-comment-vote {
  background-color: #242424;
  color: #c6afff;
  font-style: italic;
  font-size:13px
}

.feed-card .feed-card-header .info .personality {
  color: #9971f9;
  font-weight: 600;
}

.reply-comment .reply-comment-header .info .personality {
  color: #9971f9;
  font-weight: 600;
}

.feed-card .feed-card-header .info .username .pinned-icon path{
    stroke: white;
    fill: white;
}

/* Posts */

.feed-card .feed-card-topic::before {
  content: "!";
}

.feed-card .feed-card-topic {
  color: #e3e3e3;
  background-color: #181818;
}

.feed-card .feed-card-topic::before {
  background-color: #242424;
}

/* Pf_Boards */
.topic-card1 {
  background-color: #121212;
}

/* Tooltip */
.rc-tooltip .rc-tooltip-inner {
  max-width: 274px;
  background-color: #2d2d2d;
  -webkit-filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.2));
}
.rc-tooltip .rc-tooltip-arrow {
  border-top-color: #2d2d2d;
}

/* Profile Card */

.profile .filter-from-mobile-filter {
  text-align: right;
  min-height: 20px;
  background-color: #0c0c0c;
  padding: 12px 0;
}

.profile .add-container {
  background-color: #0c0c0c;
}

.profile-card {
  background-color: #141414;
  border-radius: 10px;
  overflow: hidden;
}

.profile-card .avatar img {
  width...

Reviews

No reviews yet.