Dark theme for LastPass (firefox)

LastPass.css

/* This dark theme is provided as-is, and it won't be updated (although Lastpass hasn't updated it's UI in a long while,
so it should work for the most part at least). If you want a good password manager with built-in dark mode, you should 
consider other password managers like Bitwarden (which is open source).

To use this dark theme, you either add it on userContent.css, add it to the addons.css provided with Quantum Nox theme,
or add it as an external stylesheet importing it from userContent.css through @import */

/*------ LASTPASS PASSWORD MANAGER ADDON ------*/
@-moz-document url-prefix(moz-extension://TYPE-UUID-OF-LASTPASS-HERE/) {
html, body, .sliderContainer, #backButton, #u_combo, .selectDropdownList li,
#items li, .footer li, .settingsRow, .dialog, #logincontainer, #loginView .dropdownContainer div, 
#menucol, #rightside, #adframe, .actionsbox .menu.light, #vault, #vaultContent, #mainScroll, 
.ui-widget-overlay, .infield-dialog .header, .infield-dialog .footer, #thetree, #thetree li, #main,
.folderContainer, #mainScroll .tour {
	background-color: #444 !important; 
	color: #ccc !important}

#mainMenu {background-color: #444 !important}

.extensionCreateAccount .dialog-title {background-color: #333 !important; color: #ccc !important}

/* select {filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important} */

#loginheader {color: #fff !important}

#rememberpasswordquestion {color: #ccc !important}

a:link:not(.rbtn), a:not(.rbtn), #lp_docwrite_login_small23a, #lp_docwrite_prefs46, #lp_docwrite_reenter_password3, 
#lp_docwrite_reenter_password4, #lp_docwrite_reenter_password5, .lptabs.activetab, 
.tablabel.tabactive, h1, .tabMenuItem.selected, #autoChangePassword {color: #f55 !important}
a:hover, #lp_docwrite_login_small23a:hover, #autoChangePassword:hover {color: #f88 !important}
a:active {color: #c30 !important}

#expandcollapse a:hover {color: transparent !important}

#cpwdialog .dialog_hdr {background: #333 !important}
#cpwdialog {border: 2px solid #333 !important}

.modal-body-content, .prefpane.row, .modal-body:not(#menu) .row-inner.light-gray, #vaultLoadingOverlay,
#lppopup, #tools, #notestype_combo, #group_combo, #navigationMenu, .dialogLeftMenu li:hover {
	background-color: #484848 !important}

.addMenuItem > div {
	filter: invert(70%) hue-rotate(180deg) contrast(150%) saturate(400%) !important}

.itemIcon > .bigIcon {
	filter: invert(62%) hue-rotate(180deg) saturate(400%) !important}

.dropdownContainer li, .childView li, .itemIcon, #lp_docwrite_prefs67, .label, .hr, .lptabs:not(.activetab), p,
div p {
	background-color: transparent !important; 
	color: #ccc !important}

.dropdownContainer li:hover, .childView li:hover, 
.ui-dialog-titlebar-close.ui-state-hover, #notestype_combo .item.focus,
#group_combo .item.focus, #navigationMenu li:hover, #items li:hover {background: rgba(255,255,255,0.1) !important}

.childView li {background-image: none !important}

.content, .dialogContent, .buttons, #sitebody, #searchform .topbar, #tdtabrow #tabrow, #headerli, 
#vaultLoadingOverlay, .ui-dialog, .ui-dialog-buttonpane, .ui-widget-content {
	background: #505050 !important;
	border: 1px solid #222 !important}

.ui-state-default {background-image: linear-gradient(#666, #333) !important}

.ui-dialog-titlebar, .ui-state-hover[type="button"] {
	background-image: linear-gradient(#333, #666) !important;
	border: 1px solid #222 !important}

.ui-state-default[type="button"], #ui-dialog-title-dialog,
#lpusername {color: #fff !important}

#tdtabrow #tabrow, .topborder {border-top: none !important}

.footer, .header, #childViews, #container, .dialogRightPane, 
.dialogLeftPane, .settingsRow, #logincontainer, #treepane, .actionsbox li,
iframe {border: none !important}

#loginView .buttons, .optionButtons, iframe, .addMenuItem span {
	background: transparent !important; border: none !important}

.optionButtons {box-shadow: none !important}

#container #searchContainer, #extensionDropdown, #u_combo, .selectDropdownList li,
.dialogContent, .buttons, #backButton, .dark-gray, #hotkeystable td {
	border: 1px solid #666 !important}

.footer li {border-top: 1px solid #666 !important}

.extensionMenuItem.group, .extensionMenuItem.item, .extensionMenuItem.addCustomItem, #siteheader,
#sitebody, #lppopup, #menucol, .toolsMenuItem {
	border-color: #666 !important}

.itemCheckbox {border-color: #333 !important}

.footer li {border-bottom: none !important}

.modal-body-content .tablerow:not(.tableheader), #hotkeystable tr:nth-child(odd),
.itemContents .tile, .list  {
	background-color: #606060 !important; border: none !important}

.toolsMenuItem:hover, .selectDropdownList li, #userMenuItems li,
#formFillView .row {background: #606060 !important}

#userMenuItems li, #dialogtext, .icon_text.icon.ntooltip,
#notestype_combo .item:not(.focus), #group_combo .item:not(.focus),
#formFillView .row {color: #ccc !important}

.rbtn, #advancedView label, #btnClose:hover, #thetree span {color: #fff !important}

#backButton:hover, .selectDropdownList li:hover, .footer li:hover, .dialogRightPane,
.settingsRow:nth-child(even), .dialogLeftMenu li, .modal-body-content .tablerow.hide, 
#hotkeystable tr:not(.dark-gray):nth-child(even), .selectDropdownList li:hover, 
#userMenuItems li:hover, #advancedView .row.advanced-background, .formFieldsView {background-color: #505050 !important}

.infield-dialog .gradient-to-right:after, .infield-dialog .gradient-to-right {
	background: none !important}

.dialogLeftMenu li.selected, .tileEdit.hoverFadeIn {background-color: #555 !important; color: #f55 !important}

.dialogLeftMenu li, #container .header, #items li {border-bottom: 1px solid #666 !important}

.dialogInput:not(select), #password, #email, #masterpassword, #confmasterpassword, #passwordreminder, #p, #u,
.dropdownHint, .radioContainer, .short-input, #hotkeystable input, #pin, #reenterpassword, 
#loginView input, #q, #url, #name, #group, #username, #notes, #notestype, #notestype_button
#extensionDropdown input:not(.clickToggles), #grpinp, #grpsel, #group_button, input[type="password"] {
	-moz-appearance: none !important; 
	background: #323232 !important; 
	color: #ddd !important;
	border: 1px solid #666 !important}

#container #searchContainer input {background: #222 !important; color: #ddd !important}

.dialogInput.clickToggles, #extensionDropdown .dropdownContainer input {
	background-color: #fff !important; 
	color: #000 !important;
	border: 1px solid #aaa !important;
	filter: invert(80%) hue-rotate(195deg) !important}

.item.focus, .actionsbox li:hover, .actionsbox2 li:hover {
	color: #f55 !important; background-color: rgba(0,0,0,0.1) !important}

#p, #u {box-shadow: inset 3px 4px 5px rgba(255,255,255,.09) !important}
.actionsbox li:hover, .actionsbox2 li:hover,
#thetree li:hover {box-shadow: 0 0 6px rgba(0,0,0,.5) !important}

#keyboardicon, #logoimg, .folderContainer .folderLabel {filter: brightness(200%) !important}
#deleteicon, #u_button, .actionsbox img, #grpsel_button, .folderLabel,
.toolsimg, .delimg, .shareimg, .editimg {filter: invert(80%) !important}

#mainScroll .tour, #mainScroll .tour p, #mainScroll .tour h1 {background-color: #444 !important}

.checkbox + label, .radio + label, #vaultToggle img {
	color: #000 !important; 
	filter: invert(80%) hue-rotate(185deg) saturate(250%) !important}

#page_passwordmeterback {filter: brightness(60%) !important} 

.dialogInput:not(select):active, #password:active {
	border: 1px solid #0050ff !important}

.glow {box-shadow: 0 0 4px #0050ff !important; outline: 1px solid #0050ff !important}

#main #username {background: transparent !important; border: none !important; color: #c30 !important}

#lpexpandimg, #lpcollapseimg, #advsettings img, #passwordtoggleimg,
#upgrade-families-icon img, #try-families-icon img, #siteactions img,
#formFillView .row .icon {filter: invert(70%) hue-rotate(195deg) !important}

a#cancel, a#login, #helptranslate, #f input#ok, #rememberpasswordyes, #rememberpasswordno, #lpfriendemail, a#lpaddattach {
  -moz-appearance: none !important;
  border-radius: 3px !important;
  background: #666 !important;
  color: #ddd !important;
  border: none !important;
  padding: 0.4em !important}

.optionsDropdown, .optionButton, .toggleButton, .wbtn, .gbtn, .remind-btn, a#bcnd, #moreOptions, #formFillView .row button,
#hideOptions {
  background-color: #666 !important;
  color: #ddd !important;
  border: none !important}

.row.advanced-background label {color: #fff !important}

.row.advanced-background, .col-12:not(#headerContainer) {background-color: #505050 !important}

.itemButton, #dynheader, #sortOrderMenu, #orderOption, #actions {background-color: #666 !important; border: none !important}
.itemButton:hover, #container .header {background-color: #333 !important}

.tile .itemButton, .actionButtonContainer .itemButton, .itemButtons .history, .dialogItemButtons .itemButton:not(.favButtonLabel) {
	background-color: #ddd !important;
	filter: invert(80%) brightness(150%) grayscale(100%) !important}

.tile .itemButton:hover, .actionButtonContainer .itemButton:hover, .itemButtons .history:hover, 
.dialogItemButtons .itemButton:not(.favButtonLabel):hover {
	background-color: #bbb !important}

.list .itemButton {background-color: #777 !important}

.list .itemButton:hover, .dialogItemButtons .favButtonLabel:hover {background-color: #888 !important}

.dialogInputOverlay {background-color: rgba(0,0,0,0.5) !important}

#helptranslate, #dynbody {background: #888 !important}

button#cancel {padding: 0.6em !important; background-color: #777 !important}

button#createaccountbtn, a#login, a#createanaccount, #loginView #logInButton {background: #d32d27 !important; color: #fff !important}

#addAttachmentButton, #sortOrderMenu li, #contextMenu li, #extensionDropdown .header div:hover {background-color: #666 !important; color: #ddd !important}
#addAttachmentButton:hover, #sortOrderMenu li:hover, .dialogHeader.dialogHeaderButtonsEnabled.titleEnabled, a#lpaddattach:hover,
#contextMenu li:hover, .optionsDropdown:hover, .optionButton:hover, .toggleButton:hover, a#bcnd:hover, #moreOptions:hover, #hideOptions:hover {
	background-color: #333 !important; 
	color: #fff !important}

a#cancel:hover, a#login:hover, #helptranslate:hover, #rememberpasswordyes:hover, #rememberpasswordno:hover, #lpfriendemail:hover,
#collapseAllToggle:hover, #sizeToggle:hover, #orderOption:hover, .dialog_content input[type="submit"]:hover, #listButton:hover, #gridButton:hover,
.optionButton.selected, #actions:hover, .wbtn:hover, .gbtn:hover {
  background-color: #222 !important;
  color: #fff !important;
  box-shadow: none !important}

button#createaccountbtn:hover, a#login:hover, #loginView #logInButton:hover {background-color: #af0806 !important}

a#cpwbtnmini {background: none !important; box-shadow: none !important}

#mainMenu a {color: #000 !important}

.tileTable, .siteDialogContent .addSiteFavicon {background: #333 !important}
}

/*----- OTHER FIXES FOR BETTER LINUX COMPATIBILITY (By DallasBelt) -----*/
.dialogContent.dialogContentFixed {background: #333 !important}

.addItemCardName, {color: #aaa !important}

.addItemCard:hover {
  box-shadow: none !important;
  background-color: #444 !important}

.addItemCard:hover .addItemCardName {color: #fff !important}

#addItemCustomOptionsLabel {color: rgb(209, 47, 46, .6) !important}

#addItemCustomOptionsLabel:hover {color: rgb(209, 47, 46, 1) !important}

.emptyVaultWrapper {background: #444 !important}

#displayGenerateContainer, .extension-dialog, .history-background {background-color: #505050 !important}

.historyTable > thead > tr > th, .historyTable > tbody > tr > td {
    background-color: #444 !important; 
    color: #aaa !important;
    border-bottom: 1px solid #333 !important;}

.history-background {border-top: 1px solid #333 !important}

#showHistory, #clearHistory {color: rgb(255, 255, 255, 0.6) !important}

#showHistory:hover, #clearHistory:hover {color: rgb(255, 255, 255, 1) !important}

.extension-dialog .content .first-col {border-right-color: #333 !important}

.extension-dialog .content #lengthInput {border-bottom: 1px solid #333 !important}

.extension-dialog #generatePasswordDialogDropdownAdvancedOptions input[type=range]::-moz-range-track {background: #333 !important}

.meter{border-color: #333 !important}

#password, #lengthInput {text-align: center !important}

/*fix for dropdown lists on Account Settings (filter on line 915 not applied, commented)*/
.dialogInput {background-color: #333 !important; color: #ddd !important}

/*fix for dropdown lists on Account Settings (filter on line 1232 not applied, commented)*/
.newstyle select {background-color: #333 !important}

/*----- MORE POPUP FIXES (By DallasBelt) -----*/
#searchContainer {background: #333 !important}

.searchInputContainer input {background: #222 !important; color: #ddd !important}

#mainMenu li, #mainMenu li a, .childView {background-color: #666 !important; color: #ddd !important; border: none !important}

#mainMenu li:hover, #mainMenu li a:hover {background-color: #707070 !important}

.omarSpacer {
    display: none !important}

.feature-omaria .extensionMenuItem.divider, .feature-omaria .extensionMenuItem.hover{border: none !important}

.contextOptionsDropdownElement {background-color: #222 !important; color: #ccc !important}

.contextOptionsDropdownElement:hover {background-color: #333 !important}

/*----- LASTPASS FIXES -----*/
@-moz-document url-prefix(moz-extension://TYPE-UUID-OF-LASTPASS-HERE/contentScript) {
html, body {background: transparent !important}
.arrow-box.a-top, .arrow-box.a-top::before {filter: invert(74%) !important}
}

/*----- LASTPASS IFRAMES -----*/
@-moz-document url-prefix(https://lastpass.com/sites_overview.php) {
html, #firsttop {background: #444 !important; color: #ccc !important}

#custombord {background: #555 !important}

#tilesinner img {filter: invert(70%) saturate(0) !important}

#tilesinner img:hover {filter: invert(70%) hue-rotate(190deg) !important}

.heading, .redtxt {color: #f55 !important}

#step1, #step2 {color: #777 !important}

#step1.selected, #step2.selected {color: #bbb !important}

#custompage2 {color: #ccc !important}
}

@-moz-document url-prefix(https://lastpass.com/acctsiframe.php) {
.tablabels, .settabdesc, .setbody, .setbottomdiv, .dialog_content {
	background: #555 !important; 
	color: #ccc !important}

a:link, a, .tablabel.tabactive, .emptyarr, #myaccount, #paymenthistory, #emailsubs, #googleauthbarcode2,
#googleauthbarcode, #googleauthview, #googleauthregenerate {color: #f55 !important}
a:hover, #myaccount:hover, #paymenthistory:hover, #emailsubs:hover, #googleauthbarcode2:hover,
#googleauthbarcode:hover, #googleauthview:hover, #googleauthregenerate:hover {color: #f88 !important}
a:active {color: #c30 !important}

.tablabels {border-color: #666 !important}

.row.advanced-background label {color: #fff !important}

.row.advanced-background, .col-12:not(#headerContainer) {background-color: #505050 !important}

.settabdesc, .setbody, .setbottomdiv {border-color: #ddd !important}

/* select {filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important} */

.wbtn, .btn_midi.gray {
  border-radius: 3px !important;
  background-color: #666 !important;
  color: #ddd !important;
  border: none !important}

.nbtn {color: #fff !important}

button {border: none !important}

.wbtn:hover, .btn_midi.gray:hover {background-color: #222 !important; color: #fff !important}

.x-panel-tl, .x-panel-tr, .x-panel-tc, .x-panel-header {
	background: #444 !important; 
	color: #fff !important;
	border: none !important}

.x-panel-nofooter, .x-toolbar, .x-panel-ml, .x-panel-mr, .x-panel-mc,
.x-panel-bl, .x-panel-br, .x-panel-bc, #ext-gen45, .x-layer.x-menu, .x-date-bottom,
.x-date-inner th, .x-date-mp-btns {background: #666 !important; border: none !important}
.x-grid3-scroller, .x-panel-body, .x-grid3-viewport, .x-grid3,
.x-grid3-header, .x-date-inner, .x-date-mp {background: #555 !important; border: none !important}

.x-grid3-hd-row td, .x-grid3-hd-row, .x-menu-sep, .x-grid3-header-offset,
.x-date-inner span, .x-date-inner a {border: none !important}

.x-grid3-hd.x-grid3-cell, .x-grid3-header-inner,
.x-btn-with-menu, .x-btn-wrap.x-btn  {background-image: linear-gradient(#666,#333) !important; color: #ccc !important}
.x-grid3-hd.x-grid3-cell:hover {color: #222 !important}

.x-grid3-row, .x-date-inner td {border: none !important}
.x-grid3-row:nth-child(even) {background: rgba(0,0,0,0.1) !important}
.x-grid3-row-over, .x-date-inner a:hover, .x-date-mp-year a:hover,
.x-date-mp-month a:hover {background: rgba(255,255,255,0.1) !important}
.x-grid3-row-selected, .x-date-selected a, .x-date-mp-year.x-date-mp-sel a,
.x-date-mp-month.x-date-mp-sel a {background: rgba(255,255,255,0.2) !important; border: none !important}

.x-menu-list-item  img {filter: invert(100%) hue-rotate(195deg) !important}

.x-menu-list-item a, .x-btn-text, .x-date-inner th, .x-date-inner a, .x-date-mp a {color: #ccc !important}
.x-menu-list-item a:hover, .x-menu-item-active,
.x-grid3-hd.x-grid3-cell.x-grid3-td-0.sort-asc, .x-grid3-hd.x-grid3-cell.x-grid3-td-0.sort-desc,
.x-grid3-hd.x-grid3-cell.x-grid3-td-1.sort-asc, .x-grid3-hd.x-grid3-cell.x-grid3-td-1.sort-desc,
.x-grid3-hd.x-grid3-cell.x-grid3-td-2.sort-asc, .x-grid3-hd.x-grid3-cell.x-grid3-td-0.sort-desc,
.x-grid3-hd.x-grid3-cell.x-grid3-td-3.sort-asc, .x-grid3-hd.x-grid3-cell.x-grid3-td-3.sort-desc,
.x-grid3-hd.x-grid3-cell.x-grid3-td-4.sort-asc, .x-grid3-hd.x-grid3-cell.x-grid3-td-4.sort-desc,
.x-grid3-hd.x-grid3-cell.x-grid3-td-5.sort-asc, .x-grid3-hd.x-grid3-cell.x-grid3-td-5.sort-desc {color: #222 !important}

.x-paging-info {background: transparent !important; color: #fff !important}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, #sharedfoldername, #startinput,
#endinput {
	-moz-appearance: none !important; 
	background: #323232 !important; 
	color: #ddd !important;
	border: 1px solid #666 !important}

.gbtn {
  -moz-appearance: none !important;
  border-radius: 3px !important;
  background: #666 !important;
  color: #ddd !important;
  border: none !important;
  padding: 0.4em !important}

.gbtn:hover {
  background-color: #222 !important;
  color: #fff !important}

p {color: #ccc !important}

.settable {color: #ccc !important; border-color: #666 !important}

.settable tr:nth-child(odd):not(th) {
	background-color: #606060 !important}

.settable tr:nth-child(even) {background-color: #505050 !important}
}

@-moz-document url-prefix(https://lastpass.com/ads.php) {
html, body {background: #444 !important}
}

@-moz-document url-prefix(https://lastpass.com/formfill_overview.php), url-prefix(https://lastpass.com/share_overview.php),
url-prefix(https://lastpass.com/enterprise_overview2.php) {
html, #content, .clearfix, body, br {background: #444 !important}

p {color: #ccc !important}

img {filter: invert(70%) hue-rotate(190deg)}
}