This Style makes Deepl finally dark! Enjoy working with one of the best translators out there without getting any eye strain!
Version 2.0 Update: The whole thing has been reworked to be consistent with the rest. Enjoy!
Deepl Darkmode by trgamer-tech
Details
Authortrgamer-tech
LicenseCC Zero
Categorydeepl
Created
Updated
Size48 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Deepl Darkmode
@namespace github.com/TRGamer-Tech/openstyles
@version 2.2.5
@description This Style makes Deepl finally dark! Enjoy working with one of the best translators out there without getting any eye strain! <br> <strong>Version 2.0 Update:</strong> The whole thing has been reworked to be consistent with the rest. Enjoy!
@author TRGYT
@license CC Zero
==/UserStyle== */
@-moz-document domain("deepl.com") {
:root {
--mainbg: #121212;
--secbg: #1d1d1d;
--thirdbg: #474747;
--quotebg: #313e48;
--errbg: #332626;
--mainfont: #fff;
--secfont: #dbdbdb;
--placeholder: #bcbcbc;
--link: #70e9ff;
--linkhov: #0090d6;
--seclink: #0098b3;
--seclinkhov: #006494;
--border: 1px solid #8c8c8c;
--borderclr: #8c8c8c;
--border-l: 15px;
--border-m: 10px;
--border-s: 5px;
}
}
@-moz-document regexp("https?:\\/\\/www.deepl\\.com.*\\/translator.*") {
.dl_body--redesign {
background-color: var(--mainbg)!important;
}
/*============================= HEADER =============================*/
.dl_header,
.dl_header:before {
background-color: var(--secbg)!important;
}
.lmt__stickyMenubar .dl_header--sticky.dl_header--has-shadow {
box-shadow: 0px 4px 10px rgb(78 121 173 / 50%);
}
.dl_header_menu_v2__links__item,
.dl_header_menu_v2__links__item:visited,
.dl_header_menu_v2__links__item:active,
.dl_header_menu_v2__links__item:focus,
.dl_header_menu_v2__login_button_simple>button,
.dl_header_menu_v2__buttons__menu>button::before,
.dl_header_menu_v2__buttons__menu>button::after {
color: var(--link);
}
.dl_header_menu_v2__links__item.dl_translator_link .dl_logo_text {
filter: invert(0.5);
}
/*============================= HEADER =============================*/
/*============================ SIDE BAR ============================*/
.sideMenu_module_menuContainer__9792bc21 {
background-color: var(--secbg);
}
.container--3RqjU a {
color: var(--link);
}
.container--3RqjU a:hover {
color: var(--linkhov);
}
.button_module_button__db2f9982.button_module_color_primary__db2f9982 {
color: var(--seclink);
}
.button_module_button__db2f9982.button_module_color_primary__db2f9982:hover {
color: var(--seclinkhov);
}
.input_module_inputWrapper__3e8dc037 .input_module_input__3e8dc037 {
background: transparent;
color: var(--mainfont);
}
/*============================ SIDE BAR ============================*/
/*==================== Main Translation Field ======================*/
.dl_body, .dl_body--text_page {
color: var(--secfont);
}
.Tab_module_cardButton__9d9d30b8 {
background-color: var(--secbg);
border: var(--border);
border-radius: var(--border-s);
}
.Tab_module_active__9d9d30b8 .Tab_module_textUpper__9d9d30b8,
.Tab_module_textUpper__9d9d30b8,
.lmt--web .lmt__language_select>button strong,
.lmt__language_select__opener,
.docTrans_document__target_lang_select button.docTrans_document__target_lang_select__entry,
.docTrans_document .docTrans_document__download_button,
.docTrans_document .docTrans_document__download_again_button{
color: var(--link);
}
.dl_header_menu_v2__links__item.dl_translator_link:not(.nohover):hover,
.dl_header_menu_v2__links__item:not(.nohover):hover,
.dl_header_menu_v2__links__item.is-active,
.dl_header_menu_v2__login_button_simple>button:hover,
.dl_header_menu_v2__buttons__menu>button:hover::before,
.dl_header_menu_v2__buttons__menu>button:hover::after,
.lmt--web .lmt__language_select>button:hover strong,
.docTrans_document__download_again_button:hover,
.button_module_button__db2f9982.button_module_color_secondary__db2f9982:hover {
color: var(--linkhov)!important;
}
.Tab_module_active__9d9d30b8 .Tab_module_logo__9d9d30b8,
.Tab_module_logo__9d9d30b8,
.iconButton--13nrA,
.lmt__rating button,
.lmt--web .lmt__language_container .lmt__language_container_switch svg>path {
color: var(--link);
stroke: var(--link);
fill: var(--link);
}
.iconButton--13nrA:hover,
.lmt__rating button:hover svg,
.lmt--web .lmt__language_container .lmt__language_container_switch:hover svg>path,
.lmt--web .lmt__language_container .lmt__language_container_switch:focus svg>path{
color: var(--linkhov);
stroke: var(--linkhov);
fill: var(--linkhov);
}
.Tab_module_textLower__9d9d30b8,
.docTrans_document__cancel_button.docTrans_document__cancel_button {
color: var(--secfont);
}
.Tab_module_cardButton__9d9d30b8:not(.Tab_module_active__9d9d30b8):hover {
background-color: var(--quotebg);
}
.integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container {
background-color: var(--secbg);
border: var(--border);
border-radius: var(--border-m);
}
.integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__language_container,
.dl_body--redesign .lmt--web .lmt__textarea_container {
background-color: var(--secbg);
}
.integratedLanguageSelectors .dl_translator_page_container .lmt--web .lmt__text .lmt__textarea_container {
border-top: var(--border)!important;
}
.lmt--web .lmt__source_textarea,
.lmt--web .lmt__target_textarea,
.docTrans__help_popup_text,
.docTrans_document .docTrans_document__filename_label {
color: var(--mainfont);
}
.lmt--web .lmt__textarea_placeholder_text,
.lmt--web .lmt__translations_as_text h2,
.dl_body--redesign .lmt--web .lmt__language_select .lmt__language_select__active,
.dl_help-popup_assist-text {
color: var(--placeholder);
}
button,
.docTrans_document__target_lang_select h2,
.docTrans_document__document_ready_label,
.docTrans_document__status_label {
color: var(--secfont);
}
.integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container--target .lmt__language_container_switch {
background-color: var(--secbg);
border: var(--border);
}
.lmt--web .docTrans_document__target_block,
.lmt--web .docTrans_document__source_block,
.lmt--web .docTrans__help_popup {
border: var(--border);
border-radius: var(--border-m);
background-color: var(--secbg);
}
.docTrans_document__target_block .error__container {
background-color: var(--errbg);
}
.dl_hr_with_arrow,
.dl_hr_with_arrow::before {
background-color: var(--borderclr);
border-top: var(--border);
}
.docTrans_document__upload_progress,
.docTrans_document__progress,
.lmt__language_select__menu.lmt__language_select__menu_three_columns{
background-color: var(--thirdbg);
}
.modalDialog_module_dialog__2b2cc9f9 {
background-color: var(--secbg);
border-radius: var(--border-m);
box-shadow: 0px 4px 10px rgb(78 121 173 / 50%);
}
.ModalDialogTitle_module_title__2418a8c4 {
background-color: var(--secbg);
color: var(--secfont);
}
.lmt__language_select__menu.lmt__language_select__menu_three_columns{
border-radius: var(--border-m);
}
.lmt__language_select__menu .lmt__dropdown_item_inside_container,
.lmt__language_select__menu .lmt__formalitySwitch__menu_items>div button,
.lmt__formalitySwitch__menu_items>div .lmt__language_select__menu button,
.lmt__language_select__menu>div button {
color: var(--mainfont);
}
@media (min-device-width: 651px) {
.lmt__dict .lmt__dict__inner, .lmt__dict .lmt__dict__empty_state {
background-color: var(--secbg);
}
.lmt__dict.lmt--is-dict-ready .lmt__dict__inner {
border: var(--border);
}
.lmt__dict .tag_lemma a {
color: var(--link);
}
.buttonContainer--3fFBN button {
color: var(--link);
stroke: var(--link);
fill: var(--link);
}
.buttonContainer--3fFBN button:hover svg {
color: var(--linkhov);
stroke: var(--linkhov);
fill: var(--linkhov);
}
.lmt__dict .tag_trans {
color: var(--secfont);
}
}
@media (max-device-width: 650px), (max-device-height: 650px) and (hover: none) {
.lmt--web .lmt__translations_as_text,
.lmt__dict,
.lmt__dict .lmt__dict__inner,
.lmt__dict .lmt__dict__empty_state,
.item--1bMpF,
.lmt__source_toolbar {
background-color: var(--secbg);
}
.lmt__dict .tag_lemma a {
color: var(--link);
}
.lmt__dict .tag_trans {
color: var(--secfont);
}
.buttonContainer--3fFBN button {
color: var(--link);
stroke: var(--link);
fill: var(--link);
}
.buttonContainer--3fFBN button:hover svg {
color: var(--linkhov);
stroke: var(--linkhov);
fill: var(--linkhov);
}
.lmt--web .lmt__translations_as_text>.lmt__translations_as_text__item .lmt__translations_as_text__copy_button,
.lmt__mobile_share_container>button {
filter: invert(0.5);
}
}
/*==================== Main Translation Field ======================*/
/*============================== MAIN ==============================*/
.dl_pro__banner--2021--wrapper,
.dl_app_ad .dl_app_ad__commonContent {
background-color: var(--secbg);
}
.dl_pro__banner--2021--lockitem {
filter: invert(1);
...