Recolors some elements to be darker, and allows toggling dark mode with a hotkey
目前為
// ==UserScript==
// @name Dark mode - Bonk.io
// @description Recolors some elements to be darker, and allows toggling dark mode with a hotkey
// @author Excigma
// @namespace https://greasyfork.org/users/416480
// @license MIT
// @version 0.0.4
// @match https://bonk.io/*
// @grant GM_addStyle
// @grant unsafeWindow
// @run-at document-body
// ==/UserScript==
(() => {
// Some values are hoisted out from the CSS into the object below, however this was made to create a dark theme
// If you want to make a light theme, you'd need to understand some of the CSS below to find where i darken certain elements and text
// auto_on is used to control whether dark mode is turned on automatically
// key is the hotkey used to toggle, when pressed with ctrl and alt
// brown is used for button colors, I kept it as it gave bonk its distinct feeling
// browndark is used for button hover colors
// accent is used for window title colors
// accentlight is used for text color when your friend is in a room
// brightness_lighter is used to make things that are too dark lighter (votes on maps, usernames in chat)
// brightness_darker is used to make things that are too bright darker (the things about bonk at the bottom of the page)
// replay_opacity is the opacity of the replay
// I just randomly used the other colors lmao idk
const cfg = {
auto_on: true,
key: "d",
brown: "#4f382f",
browndark: "#362620",
accent: "#2b6351",
accentlight: "#40c99e",
brightness_lighter: 2,
brightness_darker: 0.5,
veryverydark: "#111111",
verydark: "#191919",
darker: "#222222",
dark: "#333333",
light: "#444444",
lighter: "#bebebe",
verylight: "#f8fafd",
veryverylight: "#ffffff"
};
if (cfg.auto_on) document.body.classList.add("dark-mode");
// Hotkey to turn the script on and off
document.addEventListener("keydown", evt => {
if (evt.key?.toLowerCase() === cfg.key && evt.ctrlKey && evt.altKey) {
document.body.classList.toggle("dark-mode");
// Detect if we're in maingameframe or the outer bonk.io website
if (unsafeWindow.parent === unsafeWindow) {
const maingameframe = document.getElementById("maingameframe");
maingameframe.contentDocument.body.classList.toggle("dark-mode");
} else {
unsafeWindow.parent.document.body.classList.toggle("dark-mode");
}
}
});
// Please consider forgetting you have ever read the below. It's really bad.
// eslint-disable-next-line no-undef
GM_addStyle(`
/* Page background */
.dark-mode #pagecontainer, body.dark-mode { background-color: ${cfg.veryverydark} !important; }
/* Dark scroll bar tracks on Chromium */
.dark-mode ::-webkit-scrollbar-track-piece { background-color: ${cfg.verydark}; }
.dark-mode #bonkiocontainer,
.dark-mode #friendsToolTip {
background-color: ${cfg.verydark} !important;
}
/* Style a lot of dialogs */
/* I can just do windowShadow, but it might break things if new things are added */
/* It's better to have a new thing visibly light rather than broken */
.dark-mode .dark-container,
.dark-mode #autoLoginContainer,
.dark-mode #guestOrAccountContainer_accountBox,
.dark-mode #guestOrAccountContainer_guestBox,
.dark-mode #guestContainer,
.dark-mode .accountContainer,
.dark-mode #registerwindow_remember_label,
.dark-mode #loginwindow_remember_label,
.dark-mode #loginwindow,
.dark-mode #registerwindow,
.dark-mode #settingsContainer,
.dark-mode .settingsHeading,
.dark-mode .redefineControls_selectionCell:hover,
.dark-mode #newswindow,
.dark-mode #skinmanager,
.dark-mode .skineditor_shapewindow,
.dark-mode .skineditor_shapewindow_imagecontainer,
.dark-mode #skineditor_propertiesbox,
.dark-mode #skineditor_propertiesbox_table,
.dark-mode #skineditor_previewbox,
.dark-mode #skineditor_layerbox,
.dark-mode #skineditor_layerbox_baselabel,
.dark-mode #quickPlayWindow,
.dark-mode #roomlistcreatewindow,
.dark-mode .roomlistcreatewindowlabel,
.dark-mode #roomlistjoinpasswordwindow,
.dark-mode #sm_connectingWindow,
.dark-mode #newbonklobby_specbox,
.dark-mode #newbonklobby_playerbox,
.dark-mode #newbonklobby_chatbox,
.dark-mode #newbonklobby_settingsbox,
.dark-mode #newbonklobby_votewindow,
.dark-mode #newbonklobby_votewindow_maptitle,
.dark-mode #newbonklobby_votewindow_mapauthor,
.dark-mode #leaveconfirmwindow,
.dark-mode #leaveconfirmwindow_text2,
.dark-mode #maploadwindow,
.dark-mode #maploadwindowgreybar,
.dark-mode #maploadwindowstatustext,
.dark-mode #mapeditor_leftbox,
.dark-mode #mapeditor_midbox,
.dark-mode #mapeditor_rightbox,
.dark-mode #mapeditor_save_window,
.dark-mode #kkleeRoot,
.dark-mode #skineditor_colorpicker,
.dark-mode #mapeditor_colorpicker,
.dark-mode #friendsSendWindow,
.dark-mode #roomlistfilterwindow {
background-color: ${cfg.darker} !important;
color: ${cfg.verylight} !important;
}
/* Lighter bg */
.dark-mode .dark-text,
.dark-mode #bonkioheader,
.dark-mode .windowTopBar_classic,
.dark-mode #autoLogin_text,
.dark-mode .guestOrAccountContainerLabelBox,
.dark-mode #guest_nametext,
.dark-mode #loginwindow_username,
.dark-mode #loginwindow_password,
.dark-mode #registerwindow_username,
.dark-mode #registerwindow_password,
.dark-mode #guest_skinbox,
.dark-mode #redefineControls_table,
.dark-mode #redefineControls_table th,
.dark-mode #skineditor_propertiesbox_blocker,
.dark-mode #newswindow_white,
.dark-mode .quickPlayWindowModeDiv,
.dark-mode .quickPlayWindowText1,
.dark-mode .quickPlayWindowText2,
.dark-mode .quickPlayWindowText3,
.dark-mode #roomlist,
.dark-mode #roomlisttableheadercontainer,
.dark-mode .roomlistcreatewindowinput,
.dark-mode .whiteInputField,
.dark-mode #sm_connectingWindow_text,
.dark-mode #friendsContainer,
.dark-mode .friends_table,
.dark-mode .skinmanager_icon,
.dark-mode .newbonklobby_playerentry_menu,
.dark-mode .newbonklobby_playerentry_menu_submenu,
.dark-mode #maploadwindowsearchinput,
.dark-mode .maploadwindowmapdiv,
.dark-mode #mapeditor_midbox_explain,
.dark-mode .mapeditor_rightbox_table_shape_headerfield,
.dark-mode #mapeditor_rightbox_namefield,
.dark-mode .mapeditor_field,
.dark-mode .skineditor_field {
border: none !important;
background-color: ${cfg.dark} !important;
color: ${cfg.verylight} !important;
}
.dark-mode .newbonklobby_playerentry_name,
.dark-mode #newbonklobby_modetext,
.dark-mode #newbonklobby_roundslabel,
.dark-mode .maploadwindowtext_picks,
.dark-mode .maploadwindowtext,
.dark-mode #roomliststatustext,
.dark-mode #roomlisttable,
.dark-mode .mapeditor_rightbox_table_leftcell,
.dark-mode .mapeditor_rightbox_table_rightcell {
color: ${cfg.verylight} !important;
}
.dark-mode .newbonklobby_playerentry_level,
.dark-mode .newbonklobby_playerentry_pingtext,
.dark-mode #newbonklobby_chat_lowerinstruction,
.dark-mode #newbonklobby_chat_lowerline,
.dark-mode .newbonklobby_chat_msg_txt,
.dark-mode #newbonklobby_chat_input,
.dark-mode #newbonklobby_maptext,
.dark-mode #newbonklobby_roundsinput,
.dark-mode #newbonklobby_mapauthortext,
.dark-mode #newbonklobby_votewindow_maptitle_by,
.dark-mode #leaveconfirmwindow_text1 {
color: ${cfg.lighter} !important;
}
.dark-mode .newbonklobby_playerentry_balance,
.dark-mode .newbonklobby_chat_msg_name,
.dark-mode .newbonklobby_chat_status,
.dark-mode .maploadwindowtextvotediff_picks,
.dark-mode .maploadwindowtextvotediff {
filter: brightness(${cfg.brightness_lighter}) !important;
}
.dark-mode #descriptioncontainer,
.dark-mode #gamethumbbox,
.dark-mode #bgreplay {
filter: brightness(${cfg.brightness_darker}) !important;
}
/* Style sliders and buttons */
.dark-mode .compactSlider {
background-color: transparent !important;
color: ${cfg.verylight} !important;
}
.dark-mode .brownButton_classic,
.dark-mode .dropdown_classic,
.dark-mode .skineditor_field_button,
.dark-mode .mapeditor_field_button {
background-color: ${cfg.brown} !important;
color: ${cfg.verylight} !important;
}
.dark-mode .brownButtonDisabled,
.dark-mode .brownButton_disabled_classic {
background-color: ${cfg.light} !important;
color: ${cfg.verylight} !important;
}
.dark-mode .brownButton_classic:hover,
.dark-mode .dropdown_classic:hover {
background-color: ${cfg.browndark} !important;
color: ${cfg.verylight} !important;
}
/* Tables in the game - Skin editor, Map editor and Custom game list*/
.dark-mode #roomlisttable tr:nth-child(odd),
.dark-mode .friends_table>tbody:nth-child(odd),
.dark-mode #skineditor_layerbox_layertable tr:nth-child(odd),
.dark-mode #mapeditor_leftbox_platformtable tr:nth-child(odd),
.dark-mode #mapeditor_leftbox_spawntable tr:nth-child(odd),
.dark-mode .roomlistfilterwindow_a {
background-color: ${cfg.light} !important;
color: ${cfg.verylight} !important;
}
.dark-mode #roomlisttable tr:nth-child(even),
.dark-mode .friends_table tr:nth-child(even),
.dark-mode #skineditor_layerbox_layertable tr:nth-child(even),
.dark-mode #mapeditor_leftbox_platformtable tr:nth-child(even),
.dark-mode #mapeditor_leftbox_spawntable tr:nth-child(even) ,
.dark-mode .roomlistfilterwindow_b {
background-color: ${cfg.dark} !important;
color: ${cfg.verylight} !important;
}
.dark-mode #roomlisttable tr.FRIENDSPRESENT { color: ${cfg.accentlight} !important; }
.dark-mode tr.HOVERUNSELECTED:hover td { background-color: ${cfg.darker} !important; }
.dark-mode tr.HOVERSELECTED td,
.dark-mode tr.SELECTED td {
background-color: ${cfg.veryverydark} !important;
}
/* "popup" color, custom room list top bar */
.dark-mode .windowTopBar_classic,
.dark-mode .classicTopBar,
.dark-mode .friends_topbar,
.dark-mode .newbonklobby_boxtop,
.dark-mode .newbonklobby_boxtop_classic {
background-color: ${cfg.accent} !important;
color: ${cfg.verylight} !important;
}
/* I'm lazy. I'm not gonna style #pretty_bottom */
/* Style the top bar */
.dark-mode #pretty_top_bar {
background-color: ${cfg.dark}c7 !important;
color: ${cfg.lighter} !important;
}
.dark-mode .pretty_top_button {
background-color: ${cfg.dark}c7 !important;
color: ${cfg.lighter} !important;
}
.dark-mode .pretty_top_button:hover {
background-color: ${cfg.light}c7 !important;
color: ${cfg.lighter} !important;
}
/* Other random stuff */
/* Invert the Bonk.io description at the bottom of the page */
.dark-mode #descriptioninner,
.dark-mode #descriptioninner .descriptionthumbr,
.dark-mode #descriptioninner .descriptionthumbl {
filter: invert(1) !important;
}
/* Change settings borders */
.dark-mode #redefineControls_table td,
.dark-mode #redefineControls_table th,
.dark-mode #redefineControls_table {
border: 1px solid ${cfg.light} !important;
}
/* Player in lobby */
.dark-mode .newbonklobby_playerentry {
border-left: 4px solid ${cfg.darker} !important;
border-top: 4px solid ${cfg.darker} !important;
border-right: 4px solid ${cfg.darker} !important;
background-color: ${cfg.darker} !important;
color: ${cfg.verylight} !important;
}
.dark-mode .newbonklobby_playerentry:hover {
border-left: 4px solid ${cfg.dark} !important;
border-top: 4px solid ${cfg.dark} !important;
border-right: 4px solid ${cfg.dark} !important;
background-color: ${cfg.dark} !important;
}
.dark-mode #newbonklobby_chat_lowerline {
border-top: 1px solid ${cfg.light} !important;
}
/* Fix friends list - This value is hardcoded because bonk hardcodes this in the map editor too */
.dark-mode .friends_titles {
background-color: hsl(184 72% 18% / 0.2) !important;
}
#xpbarfill {
background-color: ${cfg.accent} !important;
}
`);
})();