A straightforward dark theme for AtCoder: covers nav, banners, dropdowns, Ace Editor, Panels, Copy Buttons, Timers, and Pagination.
// ==UserScript==
// @name AtCoder Pure Dark
// @namespace https://github.com/
// @version 1.14
// @description A straightforward dark theme for AtCoder: covers nav, banners, dropdowns, Ace Editor, Panels, Copy Buttons, Timers, and Pagination.
// @author 9Sxy
// @match *://atcoder.jp/*
// @grant GM_addStyle
// @run-at document-start
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const pureDarkCSS = `
/* BASE THEME SETTINGS
Tweak these values to change the overall background/text */
html, body, #main-container, #main-div, .container, .panel, .table, tbody, tr, td, th {
background-color: #000000 !important;
color: #FFFFFF !important;
border-color: #333333 !important;
}
p, h1, h2, h3, h4, h5, h6, li, span, div, label {
color: #FFFFFF !important;
}
/* Link Colors */
a { color: #4da6ff !important; }
a:visited { color: #b366ff !important; }
a:hover { color: #80c1ff !important; }
/* Inputs and Buttons */
input, textarea, select, button, .form-control, .btn-default {
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid #555555 !important;
}
/* System Alerts */
.alert-success, .alert-warning, .alert-danger, .alert-info {
background-color: #111111 !important;
color: #ffffff !important;
border-color: #333333 !important;
}
/* UI COMPONENTS */
/* Dropdown Menus */
.dropdown-menu {
background-color: #111111 !important;
border: 1px solid #333333 !important;
}
.dropdown-menu > li > a {
color: #4da6ff !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: #222222 !important;
color: #ffffff !important;
}
.dropdown-menu .divider {
background-color: #333333 !important;
}
/* Pagination & Pager (Prev/Next buttons) */
.pagination > li > a, .pagination > li > span,
.pager > li > a, .pager > li > span {
background-color: #111111 !important;
color: #4da6ff !important; /* Bright Blue for readability */
border-color: #333333 !important;
}
.pagination > li > a:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > span:focus,
.pager > li > a:hover, .pager > li > span:hover,
.pager > li > a:focus, .pager > li > span:focus {
background-color: #222222 !important;
color: #80c1ff !important;
border-color: #333333 !important;
}
/* Disabled Pagination/Pager elements (Visible Light Grey text) */
.pagination > .disabled > span, .pagination > .disabled > span:hover,
.pagination > .disabled > span:focus, .pagination > .disabled > a,
.pagination > .disabled > a:hover, .pagination > .disabled > a:focus,
.pager > .disabled > span, .pager > .disabled > span:hover,
.pager > .disabled > a, .pager > .disabled > a:hover {
background-color: #0c0c0c !important;
color: #888888 !important; /* Light enough to read, dark enough to look disabled */
border-color: #333333 !important;
}
/* Active Page Number */
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus {
background-color: #333333 !important;
color: #ffffff !important;
border-color: #555555 !important;
}
/* Status Badges */
.badge, .label-default {
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid #333333 !important;
}
/* Floating clock override - Forcing text to BLACK for readability against the grey background */
#txt-server-time, .server-time, #fixed-server-timer, #fixed-server-timer * {
color: #000000 !important;
text-shadow: none !important;
}
/* Popup Notifications (Toastr overlay) */
#toast-container > div, .toast {
background-color: #111111 !important;
color: #ffffff !important;
border: 1px solid #333333 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9) !important;
}
.toast-message, .toast-title {
color: #ffffff !important;
}
/* Banners and Hero Blocks */
.insert-participant-box, .jumbotron {
background-color: #000000 !important;
border: 1px solid #333333 !important;
}
.insert-participant-box h1, .jumbotron h1 {
color: #FFFFFF !important;
}
/* Navigation Tabs */
.nav, .nav-tabs, .nav-pills {
background-color: #000000 !important;
border-bottom: 1px solid #333333 !important;
}
.nav-tabs > li > a, .nav-pills > li > a {
background-color: #111111 !important;
color: #4da6ff !important;
border: 1px solid #333333 !important;
border-radius: 4px 4px 0 0 !important;
}
.nav-tabs > li > a:hover, .nav-pills > li > a:hover {
background-color: #222222 !important; /* Active hover state */
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus,
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
background-color: #000000 !important;
color: #ffffff !important;
border: 1px solid #333333 !important;
border-bottom-color: #000000 !important;
}
.col-sm-12, #contest-nav-tabs, #contest-statement {
background-color: #000000 !important;
}
/* Language Selection Dropdowns (Select2 override) */
.select2-container--bootstrap .select2-selection,
.select2-container--default .select2-selection--single,
.select2-dropdown,
.select2-results__option,
.select2-search input {
background-color: #111111 !important;
color: #ffffff !important;
border: 1px solid #333333 !important;
}
.select2-container--bootstrap .select2-selection__rendered {
color: #ffffff !important;
}
.select2-results__option[aria-selected="true"],
.select2-results__option--highlighted[aria-selected] {
background-color: #333333 !important;
color: #4da6ff !important;
}
/* UI Panels (Headers, Footers, Info Boxes) */
.panel-heading, .panel-title, .panel-footer {
background-color: #000000 !important;
color: #FFFFFF !important;
border-color: #333333 !important;
}
.panel-default > .panel-heading,
.panel-info > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
background-color: #111111 !important;
background-image: none !important;
color: #FFFFFF !important;
border-color: #333333 !important;
}
.panel-footer {
background-color: #0c0c0c !important;
border-top: 1px solid #333333 !important;
}
/* Copy Buttons */
.btn-copy, .btn-pre-copy, .copy-btn {
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid #555555 !important;
}
.btn-copy:hover, .btn-pre-copy:hover, .copy-btn:hover {
background-color: #333333 !important;
}
pre .btn-copy, pre .btn-pre-copy, pre button {
background-color: #1a1a1a !important;
color: #ffffff !important;
}
/* CODE EDITORS AND STATIC BLOCKS */
/* Live Submission Editor (Ace Editor) */
.ace_editor, .ace_editor.ace-tm {
background-color: #0c0c0c !important;
color: #e6e6e6 !important;
border: 1px solid #333333 !important;
}
.ace_gutter {
background-color: #111111 !important;
color: #666666 !important;
border-right: 1px solid #333333 !important;
}
.ace_marker-layer .ace_active-line { background-color: #222222 !important; }
.ace_gutter-active-line {
background-color: #222222 !important;
color: #ffffff !important;
}
.ace_marker-layer .ace_selection { background-color: #444444 !important; }
.ace_print-margin { background-color: #333333 !important; }
.ace_cursor { color: #ffffff !important; }
/* Ace Editor Syntax Highlighting */
.ace_editor.ace-tm .ace_keyword { color: #569cd6 !important; }
.ace_editor.ace-tm .ace_string { color: #ce9178 !important; }
.ace_editor.ace-tm .ace_constant.ace_numeric { color: #b5cea8 !important; }
.ace_editor.ace-tm .ace_comment { color: #6a9955 !important; font-style: italic !important; }
.ace_editor.ace-tm .ace_variable { color: #9cdcfe !important; }
.ace_editor.ace-tm .ace_support.ace_function { color: #dcdcaa !important; }
.ace_editor.ace-tm .ace_identifier { color: #e6e6e6 !important; }
.ace_editor.ace-tm .ace_operator { color: #d4d4d4 !important; }
.ace_editor.ace-tm .ace_meta.ace_tag { color: #c586c0 !important; }
/* Static Code Blocks */
pre, .prettyprint {
background-color: #111111 !important;
color: #e6e6e6 !important;
border: 1px solid #333333 !important;
}
code {
background-color: #222222 !important;
color: #e6e6e6 !important;
border-radius: 3px !important;
padding: 2px 4px !important;
}
pre code {
background-color: transparent !important;
padding: 0 !important;
}
pre ol.linenums, pre.prettyprint ol.linenums {
background-color: transparent !important;
}
pre ol.linenums li,
ol.linenums li.L0, ol.linenums li.L1, ol.linenums li.L2, ol.linenums li.L3,
ol.linenums li.L4, ol.linenums li.L5, ol.linenums li.L6, ol.linenums li.L7,
ol.linenums li.L8, ol.linenums li.L9 {
background: transparent !important;
background-color: transparent !important;
color: #888888 !important;
}
/* Static Code Syntax Highlighting */
.prettyprint span { background-color: transparent !important; }
.pln { color: #d4d4d4 !important; }
.str { color: #ce9178 !important; }
.kwd { color: #569cd6 !important; }
.com { color: #6a9955 !important; font-style: italic !important; }
.typ { color: #4ec9b0 !important; }
.lit { color: #b5cea8 !important; }
.pun { color: #d4d4d4 !important; }
.opn { color: #d4d4d4 !important; }
.clo { color: #d4d4d4 !important; }
.tag { color: #569cd6 !important; }
.atn { color: #9cdcfe !important; }
.atv { color: #ce9178 !important; }
.dec { color: #c586c0 !important; }
/* Webkit Scrollbar Corners */
::-webkit-scrollbar-corner { background-color: #000000 !important; }
pre::-webkit-scrollbar-corner { background-color: #111111 !important; }
`;
GM_addStyle(pureDarkCSS);
})();