Jisho DeepDark by raitarohikami
Imported and mirrored from https://github.com/RaitaroH/Jisho-DeepDark/raw/master/JishoDeepDark.user.css
Details
Authorraitarohikami
LicenseGNU-V3.0
Created
Updated
Categoryunset
Statistics
Learn how we calculate statistics in the FAQ.
Total views298
Total installs716
Weekly installs13
Description
Learn japanese in the dark. May the dark be kinder on thine eyes. (jisho dark theme)
Notes
Userstyle doesn't have notes.History
Daily snapshots of style statistics.
Source code
/* ==UserStyle==
@name Jisho DeepDark
@namespace gitlab.com/RaitaroH/Jisho-DeepDark
@homepageURL https://gitlab.com/RaitaroH/Jisho-DeepDark
@version 1.0.8
@updateURL https://gitlab.com/RaitaroH/Jisho-DeepDark/raw/master/JishoDeepDark.user.css
@description Learn japanese in the dark. May the dark be kinder on thine eyes. (jisho dark theme)
@author RaitaroH
@license GNU-V3.0
@preprocessor uso
@var select mainColor 'Main color' {
"DeepDark": "#00adee",
"BreezeDark": "#3DAEE9",
"Vertex Dark": "#4080fb",
"Arc Dark": "#5294E2",
"Firefox Dark": "#5675B9",
"Firefox57": "#4080FB",
"Discord": "#7289DA",
"YouTubeDark": "#E52117",
"Mint-Y-Dark": "#9AB87C",
"9anime": "#723f8c",
"Black&White": "#ffffff",
"Yellow_petrocompletions": "#FFC700",
"Yellow2": "#FFC700",
"Ubuntu_grey": "#EF7847",
"Ubuntu_purple": "#EF7847",
"Orange": "#ff6905",
"Jisho_夜明け": "#EF7D6C",
"Custom": "/*[[custom-main-color]]*\/"
}
@var color custom-main-color "Custom main color" "#00adee"
@var select mainBackground 'Main background color' {
"DeepDark": "#111111",
"BreezeDark": "#232629",
"Vertex Dark": "#2B2B2C",
"Arc Dark": "#343944",
"Firefox Dark": "#272B35",
"Firefox57": "#0C0C0D",
"Discord": "#1E2124",
"YouTubeDark": "#111111",
"Mint-Y-Dark": "#2F2F2F",
"9anime": "#0B0A0D",
"Black&White": "#000000",
"Yellow_petrocompletions": "#141414",
"Yellow2": "#0a0800",
"Ubuntu_grey": "#312D2A",
"Ubuntu_purple": "#2C071A",
"Orange": "#0a0400",
"Jisho_夜明け": "#332222",
"Custom": "/*[[custom-main-background]]*\/"
}
@var color custom-main-background "Custom main background" "#111111"
@var select secondBackground 'Second background color' {
"DeepDark": "#181818",
"BreezeDark": "#2a2e32",
"Vertex Dark": "#353638",
"Arc Dark": "#383C4A",
"Firefox Dark": "#181D20",
"Firefox57": "#252526",
"Discord": "#2F3136",
"YouTubeDark": "#232323",
"Mint-Y-Dark": "#383838",
"9anime": "#17151C",
"Black&White": "#0a0a0a",
"Yellow_petrocompletions": "#202222",
"Yellow2": "#0c0a04",
"Ubuntu_grey": "#3D3C38",
"Ubuntu_purple": "#430B28",
"Orange": "#0e0702",
"Jisho_夜明け": "#2A1B1B",
"Custom": "/*[[custom-second-background]]*\/"
}
@var color custom-second-background "Custom second background" "#181818"
@var select hoverBackground 'Hover background color' {
"DeepDark": "#232323",
"BreezeDark": "#31363b",
"Vertex Dark": "#515254",
"Arc Dark": "#414A59",
"Firefox Dark": "#353A44",
"Firefox57": "#323234",
"Discord": "#484B51",
"YouTubeDark": "#343434",
"Mint-Y-Dark": "#404040",
"9anime": "#1E1C25",
"Black&White": "#0f0f0f",
"Yellow_petrocompletions": "#353838",
"Yellow2": "#0f0d05",
"Ubuntu_grey": "#59564D",
"Ubuntu_purple": "#520D30",
"Orange": "#110903",
"Jisho_夜明け": "#863B2F",
"Custom": "/*[[custom-hover-background]]*\/"
}
@var color custom-hover-background "Custom hover background" "#232323"
@var select mainText 'Main text color' {
"DeepDark": "#eff0f1",
"BreezeDark": "#eff0f1",
"Vertex Dark": "#F3F3F5",
"Arc Dark": "#C1C8D1",
"Firefox Dark": "#E3EEF9",
"Firefox57": "#F9F9FA",
"Discord": "#FFFFFF",
"YouTubeDark": "#E1E1E1",
"Mint-Y-Dark": "#FFFFFF",
"9anime": "#B4B4B4",
"Black&White": "#b4b4b4",
"Yellow_petrocompletions": "#EFF0F1",
"Yellow2": "#fffdf5",
"Ubuntu_grey": "#F2F1EF",
"Ubuntu_purple": "#F2F1EF",
"Orange": "#fff9f5",
"Jisho_夜明け": "#EFB26C",
"Custom": "/*[[custom-main-text]]*\/"
}
@var color custom-main-text "main-text" "#eff0f1"
@var select dimmerText 'Secondary text color' {
"DeepDark": "#CCCCCC",
"BreezeDark": "#bdc3c7",
"Vertex Dark": "#AEAFB0",
"Arc Dark": "#B3BAC5",
"Firefox Dark": "#606376",
"Firefox57": "#D0D0D0",
"Discord": "#ADA8AA",
"YouTubeDark": "#7F7F7F",
"Mint-Y-Dark": "#D5DADA",
"9anime": "#747474",
"Black&White": "#828282",
"Yellow_petrocompletions": "#9F9999",
"Yellow2": "#fff8e1",
"Ubuntu_grey": "#E6E5E3",
"Ubuntu_purple": "#E6E5E3",
"Orange": "#ffede1",
"Jisho_夜明け": "#986E3F",
"Custom": "/*[[custom-dimmer-text]]*\/"
}
@var color custom-dimmer-text "dimmer-text" "#CCCCCC"
==/UserStyle== */
@-moz-document domain("jisho.org") {
/*Theme made by RaitaroH @https://gitlab.com/RaitaroH/Jisho-DeepDark*/
/*GNU General Public License v3.0*/
/*Main color variables*/
:root
{
/*User colors*/
--main-color: /*[[mainColor]]*/;
--main-background: /*[[mainBackground]]*/;
--second-background: /*[[secondBackground]]*/;
--hover-background: /*[[hoverBackground]]*/;
--main-text: /*[[mainText]]*/;
--dimmer-text: /*[[dimmerText]]*/;
/*DeepDark colors*/
/*
--main-color: #00adee;
--main-background: #111111;
--second-background: #181818;
--hover-background: #232323;
--main-text: #eff0f1;
--dimmer-text: #CCCCCC;
*/
/*KDE colors*/
/*
--main-color: #3DAEE9;
--main-background: #232629;
--second-background: #2a2e32;
--hover-background: #31363b;
--main-text: #eff0f1;
--dimmer-text: #bdc3c7;
*/
/*Vertex Dark colors*/
/*
--main-color: #4080fb;
--main-background: #2B2B2C;
--second-background: #353638;
--hover-background: #515254;
--main-text: #F3F3F5;
--dimmer-text: #AEAFB0;
*/
/*Arc Dark colors*/
/*
--main-color: #5294E2;
--main-background: #343944;
--second-background: #383C4A;
--hover-background: #414A59;
--main-text: #C1C8D1;
--dimmer-text: #B3BAC5;
*/
/*Firefox Dark colors*/
/*
--main-color: #5675B9;
--main-background: #272B35;
--second-background: #181D20;
--hover-background: #353A44;
--main-text: #E3EEF9;
--dimmer-text: #606376;
*/
/*Firefox57 Dark colors*/
/*
--main-color: #4080FB;
--main-background: #0C0C0D;
--second-background: #252526;
--hover-background: #323234;
--main-text: #F9F9FA;
--dimmer-text: #D0D0D0;
*/
/*Discord colors*/
/*
--main-color: #7289DA;
--main-background: #1E2124;
--second-background: #2F3136;
--hover-background: #484B51;
--main-text: #FFFFFF;
--dimmer-text: #ADA8AA;
*/
/*YouTube dark colors*/
/*
--main-color: #E52117;
--main-background: #111111;
--second-background: #232323;
--hover-background: #343434;
--main-text: #E1E1E1;
--dimmer-text: #7F7F7F;
*/
/*Mint-Y-Dark colors*/
/*
--main-color: #9AB87C;
--main-background: #2F2F2F;
--second-background: #383838;
--hover-background: #404040;
--main-text: #FFFFFF;
--dimmer-text: #D5DADA;
*/
/*9anime colors*/
/*
--main-color: #723f8c;
--main-background: #0B0A0D;
--second-background: #17151C;
--hover-background: #1E1C25;
--main-text: #B4B4B4;
--dimmer-text: #747474;
*/
/*Black and white*/
/*
--main-color: #ffffff;
--main-background: #000000;
--second-background: #0a0a0a;
--hover-background: #0f0f0f;
--main-text: #b4b4b4;
--dimmer-text: #828282;
*/
/*Yellow (colors from petrocompletions)*/
/*
--main-color: #FFC700;
--main-background: #141414;
--second-background: #202222;
--hover-background: #353838;
--main-text: #EFF0F1;
--dimmer-text: #9F9999;
*/
/*Yellow 2*/
/*
--main-color: #ffc700;
--main-background: #0a0800;
--second-background: #0c0a04;
--hover-background: #0f0d05;
--main-text: #fffdf5;
--dimmer-text: #fff8e1;
*/
/*Ubuntu grey colors*/
/*
--main-color: #EF7847;
--main-background: #312D2A;
--second-background: #3D3C38;
--hover-background: #59564D;
--main-text: #F2F1EF;
--dimmer-text: #E6E5E3;
*/
/*Ubuntu purple colors*/
/*
--main-color: #EF7847;
--main-background: #2C071A;
--second-background: #430B28;
--hover-background: #520D30;
--main-text: #F2F1EF;
--dimmer-text: #E6E5E3;
*/
/*Orange*/
/*
--main-color: #ff6905;
--main-background: #0a0400;
--second-background: #0e0702;
--hover-background: #110903;
--main-text: #fff9f5;
--dimmer-text: #ffede1;
*/
/*Jisho 夜明け colors https://userstyles.org/styles/115621/jisho*/
/*
--main-color: #EF7D6C;
--main-background: #332222;
--second-background: #2A1B1B;
--hover-background: #863B2F;
--main-text: #EFB26C;
--dimmer-text: #986E3F;
*/
}
/*Changed text highlight*/
::selection
{
background: var(--main-color) !important;
color: var(--main-text) !important;
}
::-moz-selection
{
background: var(--main-color) !important;
color: var(--main-text) !important;
}
/*Outline for links*/
a
{
outline-color: var(--main-color) !important;
}
body, html
{
background-color: var(--main-background) !important;
color: var(--dimmer-text) !important;
}
a, a:visited
{
color: var(--main-color) !important;
opacity: .9;
text-decoration: none !important;
}
a:hover
{
opacity: 1;
}
header.row, header.page
{
background-color: var(--main-background) !important;
border-color: var(--hover-background) !important;
}
/*Logo*/
h1.logo a
{
background-image: url("https://gitlab.com/RaitaroH/Jisho-DeepDark/raw/master/Images/logo_katakana.png") !important;
}
p, li, h1, h2, h3, h4
{
color: var(--main-text) !important;
}
.icon
{
fill: var(--main-text) !important;
}
.icon:hover
{
fill: var(--main-color) !important;
}
/*Footer*/
footer .ornament
{
display: none !important;
}
footer
{
background-image: url("https://gitlab.com/RaitaroH/Jisho-DeepDark/raw/master/Images/footer.png") !important;
}
/*Search*/
form.search .input_method_button:hover, form.search .input_method_button:hover > .icon, form.search .search-form_clear-button
{
background-color: transparent !important;
fill: var(--main-color) !important;
}
form.search .input_method_button h4
{
color: var(--dimmer-text) !important;
}
form.search .main, form.search .inner, form.search .submit
{
background-color: var(--second-background) !important;
}
form.search .keyword
{
color: var(--main-text) !important;
}
form.search .search_type
{
color: var(--dimmer-text) !important;
}
form.search .search_type
{
border-color: var(--hover-background) !important;
}
.filter.small.button, .button
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.filter.small.button.active, .filter.small.button:hover, form.search .search_type:hover, .button:hover, form.search .input_method_button:hover h4
{
color: var(--main-color) !important;
}
form.search .submit:hover .search-icon
{
fill: var(--main-color) !important;
}
/*Draw*/
.text_input .selected
{
background-color: var(--main-color) !important;
}
.speech_area_active #speech_button, .radical_area_active #radical_button, .handwriting_area_active #handwriting_button
{
border-bottom-color: var(--main-color) !important;
}
form.search .instructions .arrow, form.search .instructions .text
{
color: var(--main-text) !important;
}
.handwriting .panel, form.search .results .result, form.search .results .result_label
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
form.search .results .result:hover, form.search .results .result_label:hover, form.search .results .show_more:hover, form.search .results .show_less:hover
{
color: var(--main-color) !important;
}
form.search .input_methods, form.search .scroll_indicator
{
background: transparent !important;
}
/*Radicals*/
.radical_table
{
background: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.radical_table .number, .radical_table .number:hover
{
background: var(--second-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.radical_table li:hover
{
color: var(--main-color) !important;
}
.radical_table .radical.radical-image
{
background-image: none !important;
}
.radical.area.combined_mode .reset_radicals
{
color: var(--main-color) !important;
}
.radical.area.combined_mode .reset_radicals:hover
{
background: var(--hover-background) !important;
color: var(--main-text) !important;
}
/*Inflection table*/
table caption
{
color: var(--main-text) !important;
}
table tr th, table tr td
{
color: var(--dimmer-text) !important;
}
/*Search results*/
#main_results h4 .result_count, .concept_light-meanings .meaning-tags, .concept_light-meanings .meaning-abstract, .sense-tag.tag-restriction, .concept_light-meanings .meaning-definition-section_divider, .kanji_light .info, .concept_light-meanings .supplemental_info, .concept_light-meanings .sentences
{
color: var(--dimmer-text) !important;
}
.concept_light-meanings .meaning-meaning, .concept_light-status .concept_light-status_link
{
color: var(--main-text) !important;
}
.concept_light-status .concept_light-status_link:hover
{
color: var(--main-color) !important;
}
.concept_light, .kanji_light, .sentences_block .sentence
{
border-color: var(--hover-background) !important;
}
.concept_light-status .concept_light-tag, .concept_light-status .concept_light-tag a
{
background-color: var(--hover-background) !important;
color: var(--main-color) !important;
}
.fact
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
outline: none !important;
}
.fact li
{
text-align: center;
}
.fact.grammar-breakdown h6
{
color: var(--dimmer-text) !important;
}
/*Links dropdown*/
.f-dropdown
{
background-color: var(--second-background) !important;
border-color: var(--hover-background) !important;
}
.f-dropdown li:hover, .f-dropdown li:focus
{
background-color: var(--hover-background) !important;
}
.f-dropdown::before, .f-dropdown::after
{
border-bottom-color: var(--hover-background) !important;
}
.f-dropdown li a
{
color: var(--main-text) !important;
}
.f-dropdown li a:hover
{
color: var(--main-color) !important;
}
.kanji-details__main-readings-list a
{
border: none !important;
}
/*Kanji strokes*/
.stroke_order_diagram--current_path
{
stroke: var(--main-text) !important;
}
.stroke_order_diagram--existing_path
{
stroke: var(--dimmer-text) !important;
opacity: .6;
}
.stroke_order_diagram--path_start
{
fill: var(--main-color) !important;
}
.stroke_order_diagram--bounding_box, .stroke_order_diagram--guide_line
{
stroke: var(--hover-background) !important;
}
.kanji_strokes canvas
{
filter: invert(90%) grayscale(100%);
}
.kanji_strokes .kanji_play_button
{
background: transparent !important;
}
.kanji_strokes.show_actions .actions
{
background-color: var(--second-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.kanji_strokes .actions .ok_button
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.kanji_strokes .actions .ok_button:hover
{
color: var(--main-color) !important;
}
.noUi-base, .noUi-origin
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
border-radius: 0 !important;
}
.noUi-background
{
background-color: var(--main-color) !important;
}
.noUi-handle
{
background-color: var(--main-color) !important;
border-color: var(--main-color) !important;
}
/*Dictionaries and such*/
.tabs dd.active a, .tabs .tab-title.active a, .tabs dd > a, .tabs .tab-title > a, table
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.tabs dd.active a:hover, .tabs .tab-title.active a:hover, .tabs dd > a, .tabs .tab-title > a:hover
{
color: var(--main-color) !important;
}
table tr
{
background-color: var(--second-background) !important;
}
.dic_ref, .dic_name
{
color: var(--main-text) !important;
}
/*Forum*/
.discussion_thread .comment_body .discussion_status, .discussion_thread .comment_body .comment_status
{
background-color: var(--second-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.discussion_thread .comment_body
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.discussion_thread .comment_body .discussion_about
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
/*Forum comments*/
.discussion-username__forum-flair
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.discussion-username__is-admin
{
background-color: var(--main-color) !important;
border-color: var(--main-color) !important;
color: var(--main-text) !important;
}
.discussion_thread .comment_body.discussion__body--started-by-admin
{
outline-color: var(--main-color) !important;
}
code
{
background-color: var(--second-background) !important;
border-color: var(--second-background) !important;
color: var(--main-text) !important;
}
label
{
color: var(--main-text) !important;
}
.pagination span.disabled, .pagination a
{
border-color: var(--hover-background) !important;
}
/*Login*/
.reveal-modal, dialog
{
background-color: var(--main-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.close-reveal-modal
{
color: var(--main-text) !important;
}
.close-reveal-modal:hover
{
color: var(--main-color) !important;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], input[type="submit"], textarea
{
background-color: var(--second-background) !important;
border: 1px solid var(--hover-background) !important;
color: var(--main-text) !important;
box-shadow: none !important;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="submit"]:hover, textarea:hover, input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="submit"]:focus, textarea:focus, input[type="text"]:active, input[type="password"]:active, input[type="date"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="month"]:active, input[type="week"]:active, input[type="email"]:active, input[type="number"]:active, input[type="search"]:active, input[type="tel"]:active, input[type="time"]:active, input[type="url"]:active, input[type="color"]:active, input[type="submit"]:active, textarea:active
{
border-color: var(--main-color) !important;
}
/*Button hover*/
input[type="submit"]:hover
{
color: var(--main-color) !important;
border-color: var(--hover-background) !important;
}
form.search .keyword
{
border: none !important;
}
/*Sign up*/
.auth0-lock.auth0-lock .auth0-lock-tabs
{
background: var(--second-background) !important;
border-color: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-tabs li.auth0-lock-tabs-current
{
box-shadow: none !important;
}
.auth0-lock.auth0-lock .auth0-lock-header-bg, .auth0-lock.auth0-lock .auth0-lock-header, .auth0-lock.auth0-lock .auth0-lock-cred-pane
{
background: var(--main-background) !important;
border-color: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-header-logo
{
filter: grayscale(100%) brightness(300%);
}
.auth0-lock.auth0-lock .auth0-lock-name
{
color: var(--main-text) !important;
}
.auth0-lock.auth0-lock .auth0-lock-overlay
{
background: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-input-wrap
{
background: var(--second-background) !important;
border-color: var(--hover-background) !important;
}
.auth0-lock.auth0-lock .auth0-lock-badge-bottom .auth0-lock-badge:hover svg g#LogoBadge
{
fill: var(--main-color) !important;
}
.auth0-lock-submit
{
background: var(--main-color) !important;
opacity: .9;
}
.auth0-lock-submit:hover
{
opacity: 1;
}
}