A Dark Theme for the DnDBeyond Character Sheet! (WIP)
当前为
// ==UserScript==
// @name Beyond Dark
// @namespace http://tampermonkey.net/
// @version 0.7
// @description A Dark Theme for the DnDBeyond Character Sheet! (WIP)
// @author You
// @match https://www.dndbeyond.com/*characters/*
// @grant GM_addStyle
// ==/UserScript==
//pSBC Color Shade/Blend/Convert tool (V4). Source: https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)
const pSBC=(p,c0,c1,l)=>{
let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
if(!this.pSBCr)this.pSBCr=(d)=>{
let n=d.length,x={};
if(n>9){
[r,g,b,a]=d=d.split(","),n=d.length;
if(n<3||n>4)return null;
x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
}else{
if(n==8||n==6||n<4)return null;
if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
d=i(d.slice(1),16);
if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
}return x};
h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
if(!f||!t)return null;
if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
}
(function () {
'use strict';
// Userscript Globals
var accentColor;
var accentColorMuted;
/**
* @type {CSSStyleSheet}
*/
var sheet;
// // Change BgColor
// var bodyElems = document.getElementsByTagName('body');
// for (let i = 0; i < bodyElems.length; i++) {
// bodyElems[i].style.background = "#222222";
// console.log("Changing BG Color. " + i);
// }
const colorReplacements = {
"#ffffff": "#353535",
"#ededed": "#282828",
"#e0e3e3": "#323232",
"#838383": "#ababab",
"#faf8f7": "#3a3d3e",
}
initStyleSheet();
// Called ONCE after DOMContentLoaded
function onLoad() {
var startTime = performance.now();
console.info("Starting Userscript.");
accentColor = getCharColor();
accentColorMuted = pSBC(-0.8, accentColor, "#383838");
restyleSvgs();
sheet.insertRule(
`.ddbc-tab-options--layout-pill div.ddbc-tab-options__header-heading--is-active {
background-color: ${accentColor} !important;
}`);
restyleQuickRollAreas();
fixSlotManagerColors();
restyleImgIcons();
console.log(`DarkMode main exec time: ${performance.now()-startTime} ms`);
}
function getCharColor() {
return window.getComputedStyle(document.querySelectorAll(".body-rpgcharacter-sheet .site-bar")[0]).getPropertyValue('border-color');;
}
function initStyleSheet() {
// Create Stylesheet
sheet = createStyleSheet('dark-mode-userscript');
// Background
sheet.insertRule(`body {
background: #222222 !important;
}`);
// Text Color
const content_container = document.getElementById('content');
content_container.style.color = '#d4d5d7';//'#e4e5e7';
// Initiative
// document.getElementsByClassName('ct-combat__summary-label--outline')[0].style.textShadow = 'none';
// Inspiration
// document.getElementsByClassName('ct-inspiration__label')[0].style.textShadow = 'none';
sheet.insertRule(`div.ct-combat__summary-label--outline, div.ct-inspiration__label {
text-shadow: none;
}`)
// Sidebar Recolor
sheet.insertRule(`div.ct-sidebar__pane-gap, div.ct-sidebar__pane-content {
background-color: #303030;
}`);
// Ability Scores Recolor
sheet.insertRule(
`.ddbc-ability-summary__primary,
.ct-proficiency-bonus-box__value .ddbc-signed-number.ddbc-signed-number--large,
.ct-proficiency-bonus-box .ct-proficiency-bonus-box__heading,
.ddbc-item-name--rarity-common,
.ddbc-tab-list__nav-item:hover,
.ddbc-tab-list__nav-item--is-active,
.ddbc-spell-name,
.ddbc-checkbox__label,
.ct-spell-manager__filter-heading,
.ct-class-spell-manager__heading,
.ct-inventory-filter__input,
.ct-spells-filter__input,
.ct-feats-manage-pane__feat-heading-name,
.ct-sidebar__heading,
.ct-health-summary__adjuster-field-input
{
color: #e4e5e7 !important;
}`);
sheet.insertRule(
`.ct-class-spell-manager__info,
.ddbc-html-content p,
.ct-sidebar__pane-content > *,
.ct-campaign-pane a {
color: #d4d5d7 !important;
}`);
// Restyling Accent/Element bg colors
// #f1f1f1 -> #434343
sheet.insertRule(
`div.ddbc-collapsible__header {
background-color: #434343;
}`);
// #f2f2f2 -> #424242;
sheet.insertRule(
`.ddbc-tab-options--layout-pill div.ddbc-tab-options__header-heading,
div.ct-spell-detail__tag,
div.ct-item-detail__tag {
background-color: #424242;
}`);
// Attacks per Action text: convert to secondary color
sheet.insertRule(
`span.ct-actions__attacks-per-action {
color: #838383;
}`
);
// BG #ffffff -> #353535
sheet.insertRule(
`.site button.ct-health-summary__adjuster-button,
input.ct-health-summary__adjuster-field-input {
background-color: ${colorReplacements["#ffffff"]} !important;
}`);
// Tables
//#fff -> #353535
sheet.insertRule(
`.ct-sidebar td {
background: ${colorReplacements["#ffffff"]} !important;
}`)
//#faf8f7 ->
sheet.insertRule(
`.ct-sidebar tr:nth-child(odd) td {
background: ${colorReplacements["#faf8f7"]} !important;
}`)
// Collapsible Content Bg
sheet.insertRule(
`.ddbc-collapsible__content {
background-color: #383838 !important;
}`);
// SVG Backgrounds
sheet.insertRule(`
svg > path,
.ct-combat__statuses polygon,
.ct-initiative-box polygon,
#InspirationBoxSvg-Fill-1,
.ddbc-svg.ddbc-ability-score-box-svg > path:nth-child(2),
.ct-proficiency-groups-box polygon,
.ct-sidebar__pane-top path,
.ct-sidebar__pane-bottom path,
svg.ddbc-svg.ddbc-manage-level-svg.ddbc-svg--themed path
{
fill: #303030 !important;
}`);
sheet.insertRule(`
.ddbc-svg.ddbc-proficiency-svg.ddbc-proficiency-icon.ddbc-proficiency-level-icon circle
{
fill: #cbcbcb !important;
}`);
// const no_prof_circles = document.getElementsByClassName('ddbc-no-proficiency-icon');
// for (let circle of no_prof_circles) {
// circle.style.backgroundColor = "inherit";
// }
sheet.insertRule(`span.ddbc-no-proficiency-icon {
background-color: inherit;
}`)
}
// function recolorElements(elems) {
// let matchCount = 0;
// for (let i = 0; i < elems.length; i++) {
// //console.log("Userscript: test");
// let el = elems[i];
// let bgColorRGB = getRGBValues(window.getComputedStyle(el, null).getPropertyValue("background-color"));
// let bgColor = rgbToHex(bgColorRGB[0], bgColorRGB[1], bgColorRGB[2]);
// if (!el.classList.contains('ddbc-no-proficiency-icon')) {
// const colorMatch = colorReplacements[bgColor];
// if (colorMatch) {
// el.style.backgroundColor = colorMatch;
// matchCount++;
// console.log(el);
// }
// }
// }
// console.log(`matchCount: ${matchCount}`);
// }
function fixSlotManagerColors() {
document.querySelectorAll('.ct-slot-manager__slot.ct-slot-manager__slot--interactive').forEach(e => e.style.backgroundColor = "");
}
function restyleQuickRollAreas() {
sheet.insertRule(`.beyond20-quick-roll-area {
border: 1px solid ${accentColor.toString()};
border-radius: 6px;
box-sizing: border-box;
margin-right: 5px;
}`);
sheet.insertRule(`.ct-spells-spell__action.beyond20-quick-roll-area {
padding-right: 0 !important;
}`)
sheet.insertRule(//.ct-skills__col--modifier
`.beyond20-quick-roll-area:hover {
background-color: ${accentColorMuted};
}
`);
}
function restyleSvgs() {
// const svgs = document.getElementsByClassName('ddbc-svg');
//console.log(svgs);
//console.log("I'm Confused");
// for (let svg of svgs) {
// let paths = svg.getElementsByTagName("*");
// //paths[0].setAttribute("fill", "#383838");
// for (let j = 0; j < paths.length; j++) {
// //console.log("elems test" +j);
// let c_path_fill = paths[j].getAttribute("fill")
// if (c_path_fill === "#FEFEFE") {
// paths[j].setAttribute("fill", "#373737");
// } else if (c_path_fill === "#383838") {
// paths[j].setAttribute("fill", "#cbcbcb");
// }
// }
// }
// Some css selectors grabbed from https://github.com/Azmoria/dndbeyonddark
// Borders
sheet.insertRule(`
svg > path + path,
.ct-combat__statuses path,
.ct-initiative-box path,
.ct-inspiration path,
.ct-proficiency-groups-box path,
.ddbc-attunement-slot.ddbc-attunement-slot--empty path
{
fill: ${accentColor} !important;
}`);
}
function restyleImgIcons() {
sheet.insertRule(`.i-hamburger, .i-concentration, .i-homebrew, .i-spell-melee, .i-spell-ranged, .i-favorite, .i-strength-save, .i-dexterity-save, .i-constitution-save, .i-charisma-save, .i-wisdom-save, .i-intelligence-save, .i-type-acid, .i-type-bludgeoning, .i-type-cold, .i-type-fire, .i-type-force, .i-type-lightning, .i-type-necrotic, .i-type-piercing, .i-type-poison, .i-type-psychic, .i-type-radiant, .i-type-slashing, .i-type-thunder, .i-condition-blinded, .i-condition-charmed, .i-condition-deafened, .i-condition-exhaustion, .i-condition-exhausted, .i-condition-frightened, .i-condition-grappled, .i-condition-incapacitated, .i-condition-invisible, .i-condition-paralyzed, .i-condition-petrified, .i-condition-poisoned, .i-condition-prone, .i-condition-restrained, .i-condition-stunned, .i-condition-unconscious, .i-condition-white-blinded, .i-condition-white-charmed, .i-condition-white-deafened, .i-condition-white-exhaustion, .i-condition-white-exhausted, .i-condition-white-frightened, .i-condition-white-grappled, .i-condition-white-incapacitated, .i-condition-white-invisible, .i-condition-white-paralyzed, .i-condition-white-petrified, .i-condition-white-poisoned, .i-condition-white-prone, .i-condition-white-restrained, .i-condition-white-stunned, .i-condition-white-unconscious, .i-aoe-cone, .i-aoe-cube, .i-aoe-cylinder, .i-aoe-line, .i-aoe-sphere, .i-aoe-square, .i-artificer, .i-bard, .i-cleric, .i-druid, .i-paladin, .i-ranger, .i-sorcerer, .i-warlock, .i-wizard, .i-barbarian, .i-fighter, .i-monk, .i-rogue, .i-aberration, .i-beast, .i-celestial, .i-construct, .i-dragon, .i-elemental, .i-fey, .i-fiend, .i-giant, .i-humanoid, .i-monstrosity, .i-ooze, .i-plant, .i-undead, .i-ritual, .i-req-attunement, .i-legendary-monster, .i-checkmark, .i-partnered-content-small, .i-partnered-content-medium, .i-partnered-content-large, .i-copy, .i-download, .i-gift, .i-radio-checked, .i-radio-empty, .i-radio-checked-light
, .ddbc-healing-icon__icon, .ddbc-combat-attack__icon-img, .ddbc-combat-attack__icon-img--action-attack-weapon-melee
{
filter: invert(100%);
}`)
}
function restyleSidebar() {
let sidebarCapSvgs = document.getElementsByClassName('ddbc-sidebar-cap-svg');
// let sidebarGap = document.getElementsByClassName('ct-sidebar__pane-gap');
// let sidebarContent = document.getElementsByClassName('ct-sidebar__pane-content');
for (let svg of sidebarCapSvgs) {
svg.children[0].setAttribute("fill", "#303030");
}
// for (let el of sidebarGap) {
// el.style.backgroundColor = "#383838";
// }
// for (let el of sidebarContent) {
// el.style.backgroundColor = "#383838";
// }
}
// Bind Event Listeners
window.addEventListener('load', () => setTimeout(onLoad, 500), false);
window.addEventListener('resize', () => setTimeout(() => {
restyleSidebar();
restyleSvgs();
}, 0));
document.body.addEventListener('click', () => setTimeout(() => {
restyleSidebar();
// restyleQuickRollAreas();
}, 0));
//=========
// Utility
//=========
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function getRGBValues(rgbString) {
rgbString = rgbString.substring(rgbString.indexOf('(') + 1, rgbString.indexOf(')'));
// Notice here that we don't know how many digits are in each value,
// but we know that every value is separated by a comma.
// So split the three values using comma as the separator.
// The split function returns an object.
let rgbColors = rgbString.split(',', 3);
// Convert redValue to integer
rgbColors[0] = parseInt(rgbColors[0]);
// Convert greenValue to integer
rgbColors[1] = parseInt(rgbColors[1]);
// Convert blueValue to integer
rgbColors[2] = parseInt(rgbColors[2]);
return rgbColors;
}
function createStyleSheet(id, media) {
var el = document.createElement('style');
// WebKit hack
el.appendChild(document.createTextNode(''));
// el.type = 'text/css';
el.rel = 'stylesheet';
el.media = media || 'screen';
el.id = id;
document.head.appendChild(el);
return el.sheet;
}
})();