Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dark Nord Material Theme for WallaBag by J. Scott Elblein
/* A Dark Nord Material Theme for WallaBag - by J. SCOTT ELBLEIN ( https://geekdrop.com )
*
* v1.0.0
*
* This is based on the excellent Nord Theme color palette: https://www.nordtheme.com
*
* WallaBag theme based off of it's Material theme. Switch your Wallabag theme to it first.
*
* I've also included some of the other Nord palette colors in the comments where they all looked great to me & I couldn't really decide
* which I truly liked best there, (but I wanted to keep it mostly dark), so I (or you) could easily swap around later at will.
*
*/
/* [1] Following line is only required for Stylus/Stylish, to let it know where to enable the style */
@-moz-document regexp(".*/wallabag/web/.*") {
.logo { background-color: #B48EAD; } /* Logo Backgounds: Other cool colors: 4C566A B48EAD A3BE8C BF616A */
.logo:hover { background-color: #3B4252 !important; }
html { color: #D8DEE9; } /* Default font color */
body { background: #434C5E; }
a { color: #81A1C1; } /* Links (cards): Other cool colors: 8FBCBB 88C0D0 BF616A D08770 EBCB8B A3BE8C B48EAD */
.select-wrapper span.caret { color: #4C566A; }
.tooltipped { color: #4C566A; }
/* Only seen on the API Docs page AFAICT */
h1 { color: #E5E9F0; }
h5 { margin: 2rem 0 .656rem; color: #EBCB8B; }
/* Overall text color */
.grey-text { color: #D8DEE9; color: rgba(216, 222, 233, .7) !important; }
.nav { color: #ECEFF4; }
/**************
* Header Bar *
**************/
.cyan, .cyan.darken-1 { background-color: #3B4252 !important; }
/************
* Side Bar *
************/
.side-nav { background-color: #2E3440; }
.side-nav li>a, .results .nb-results, .nav-panel-item .material-icons { color: #E5E9F0; }
.side-nav li>a:hover, .side-nav .collapsible-header:hover, .side-nav.fixed .collapsible-header:hover { background-color: #3B4252; } /* Hover color */
.side-nav .collapsible-body, .side-nav.fixed .collapsible-body { background-color: #434C5E; } /* Backgound color for items like the Share item when expanded (i.e. Article Page) */
.border-bottom { border-bottom: 1px solid #3B4252; }
.nav-panels { background-color: #3B4252; }
/* Main content background */
#content { background-color: #434C5E; }
/* Search field */
#search_entry_term { background-color: inherit !important; }
/********
* Tabs *
********/
.tabs .tab a { color: #D8DEE9; }
.tabs .tab a.active, .tabs .tab a:hover { color: #E5E9F0; }
.tabs .indicator { background-color: #81A1C1; }
/* Collection. i.e. on the Untagged Entries page */
.collection .collection-item, .card, .card-panel, .tabs { background-color: #2E3440; border-bottom: 1px solid #3B4252; }
.collection { border: 1px solid #3B4252; border-radius: 4px; } /* Outer Border */
/* Results icons */
.results a { color: #81A1C1; }
/****************************
* "Cards" a.k.a. Bookmarks *
****************************/
.card { background-color: #3B4252; }
.data .card .card-body { background-color: #2E3440; border-radius: 5px 5px 0 0; }
.card-stacked .preview, .card .card-fullimage .preview, .card .card-image .preview { background-color: #3B4252; border-radius: 5px 5px 0 0; } /* Card Placeholders: Other cool colors: 4C566A D8DEE9 B48EAD EBCB8B D08770 */
.card .card-content .card-title, .card .card-reveal .card-title { font-size: 1.2em; }
.card-entry-labels li, .card-tag-labels li, .card-stacked div.metadata .chip { background-color: #BF616A; } /* Tag Backgounds: Other cool colors: B48EAD A3BE8C EBCB8B D08770 */
#list .chip a, .card-entry-labels-hidden a, .card-entry-labels a, .card-entry-tags a, .card-tag-labels a { color: #ECEFF4; }
.card .card-action:last-child { border-radius: 0 0 5px 5px; }
.card, .card-panel { border-radius: 5px; }
.grey-text.text-darken-4 { color: #4C566A !important; } /* Ellipses */
.card .card-reveal { background-color: #3B4252; } /* After clicking the Ellipses */
.card .card-entry-labels-hidden li { background-color: #BF616A; color: inherit; } /* Tag backgrounds on the reveal card */
.pagination .active span { color: #D8DEE9; }
.pagination li.active { background-color: #81A1C1; }
.pagination li a { color: #81A1C1; font-size: 0.9rem; } /* Page numbers */
.pagination .disabled { color: #D8DEE9; } /* Page number ellipses */
input:not([type]), input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.materialize-textarea, .select-wrapper input.select-dropdown { border-bottom: 1px solid #3B4252; }
/* Regular buttons */
.btn, .btn-large { color: #ECEFF4; background-color: #5E81AC; }
.btn-large:hover, .btn:hover { background-color: #81A1C1; }
/*************
* Tags Page *
*************/
.card-tag-labels li { color: inherit; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); }
/***************
* Config Page *
***************/
.input-field label, div > label { color: #EBCB8B; }
div > h6.grey-text { color: #EBCB8B !important; }
/* Tagging Rules table */
thead { color: #EBCB8B; }
table.bordered>tbody>tr, table.bordered>thead>tr { border-bottom: 1px solid #3B4252; }
#set5 li { list-style-type: circle; padding-bottom: 1.2rem; }
#set5 .grey-text { color: #81A1C1 !important; }
#set5 .material-icons { float: left; padding-right: 1.8rem; } /* Move the icons to the left of each item. BUG: when an item is multiline the icons don't place themselves at the true beginning */
table.striped>tbody>tr>td { background-color: #434C5E; }
.collapsible {
border-top: 1px solid #4C566A;
border-right: 1px solid #4C566A;
border-left: 1px solid #4C566A;
border-radius: 5px 5px 5px 5px;
}
.collapsible-header { background-color: #3B4252; border-bottom: 1px solid #434C5E; }
.collapsible-body { background-color: #434C5E; border-bottom: 1px solid #434C5E; }
/* The 'Focused' underline in text input areas */
input:not([type]):focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=datetime]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #A3BE8C; box-shadow: 0 1px 0 0 #A3BE8C; }
/* Certain (apparently random) Labels when it's text field is clicked in */
input[type=text]:focus:not([readonly])+label { color: #A3BE8C; }
/* Reset buttons */
.red { background-color: #BF616A !important; margin-top: 20px; }
/* For that 1 weird, random horizontal rule */
hr { border: 1px solid #3B4252 !important; }
.hljs { color: inherit; background: #2E3440; }
/* The drop-down combo-box backgrounds when selected */
input[type=text]:focus:not([readonly]), .dropdown-content, .dropdown-content li.active.selected { background-color: #2E3440 !important; }
/***************
* Import Page *
***************/
/* Change the color from red to the Nord color for green; Red to me seems like a 'danger' type color, while green is more of a 'this is safe' color */
blockquote { border-left: 5px solid #A3BE8C; }
/* The "Add New Item" drop-down input field */
.input-field.nav-panel-item, .nav-panels .input-field input:focus { background-color: #4C566A; }
.input-field.nav-panel-item .close { color: #D8DEE9 !important; } /* "X" button */
.nav-panel-item .add, .nav-panel-item .search { color: #D8DEE9 !important; } /* "+" button */
input[type=url]:focus:not([readonly]), input[type=text]:focus:not([readonly]), nav .input-field input[type=text]:valid {
border-bottom: 0px solid #D08770;
box-shadow: 0 1px 0 0 #D08770;
background-color: #4C566A;
color: #D8DEE9;
}
/****************
* Filters Area *
****************/
.dropdown-content li>span { color: #A3BE8C; }
.dropdown-content li.active, .dropdown-content li.selected, .dropdown-content li:hover { background-color: #3B4252; }
#filters > form > div > div > label { color: #EBCB8B; }
/* Checkboxes */
[type=checkbox]+label:before, [type=checkbox]:not(.filled-in)+label:after { border: 1px solid #4C566A; }
/* A lil more space between the check-box and the button, and specifically set it's text color */
[type=checkbox]+label { margin-bottom: 1.5rem; color: #D8DEE9 !important; }
/* Date Picker */
.picker { color: inherit; } /* Text in the drop-down combos */
.picker__box { background: #2E3440; border: 0; }
.picker__input.picker__input--active { border-color: #81A1C1; }
.picker__day.picker__day--today { color: #EBCB8B; }
.picker__close, .picker__today { color: #81A1C1; }
.picker__day--infocus:hover { color: #ECEFF4; }
.picker__day--infocus { color: #4C566A; }
.picker__nav--next:hover, .picker__nav--prev:hover { background: #3B4252; } /* Arrows hover color */
.picker__nav--next, .picker__nav--prev { top: -0.0em; } /* Bump the arrows down a bit more to line them up properly */
.picker__select--month.browser-default, .picker__select--year.browser-default { background-color: #434C5E; }
.picker__weekday { color: #D8DEE9; } /* M-F color */
.picker--focused .picker__day--selected, .picker__day--selected, .picker__day--selected:hover { background-color: #5E81AC; color: #ECEFF4; } /* Selected Day Circle */
.picker__footer { border-top: 1px solid #3B4252; } /* Line about the calendar footer */
select:focus { outline: 1px solid #5E81AC; } /* Border around month/year pickers */
select.picker__select--year.browser-default, select.picker__select--month.browser-default { border: 0; }
/**********
* Footer *
**********/
.cyan.darken-2 { background-color: #3B4252 !important; }
.page-footer .footer-copyright { font-weight: 200; font-size: 0.8rem; }
.grey-text.text-lighten-4 { color: #81A1C1 !important; }
/*****************
* 'How To' Page *
*****************/
.hljs-string { color: #EBCB8B; }
pre[class*=language-] { background: #3B4252; border: .3em solid #434C5E; }
/*****************
* API Docs Page *
*****************/
#header { background-color: #3B4252; border-bottom: 1px solid #4C566A; }
/* Text under "Documentation" */
div.content > div > div > div > p { color: inherit; }
/* Border around 'code' tags */
div.content > div > div > div > p:nth-child(2) > code { background-color: inherit; border: 1px dashed #81A1C1; }
/* Divider lines */
table thead tr th { border-bottom: solid #434C5E; color: inherit; }
table.fullwidth > tbody > tr { border-bottom: 1px dashed #434C5E; }
/* Spacing between items */
div.content > div > div > table > tbody > tr > td { padding: 10px 6px; }
.heading { border: 10; }
li.operation .heading h3 span.http_method i, li.operation .heading h3 span.deprecated i { color: #E5E9F0; }
li.operation .heading h3 span.http_method i { margin: .5em; } /* "Icon" spacing */
/* Colored Labels */
li.operation.post .heading { border-color: #A3BE8C; background-color: #4C566A; }
li.operation.post .heading h3 span.http_method i { background-color: #A3BE8C; }
li.operation.get .heading { border-color: #5E81AC; background-color: #4C566A; }
li.operation.get .heading h3 span.http_method i { background-color: #5E81AC; }
li.operation.get div.content h4 { color: #5E81AC; }
li.operation.put .heading { border-color: #D08770; background-color: #4C566A; }
li.operation.put .heading h3 span.http_method i { background-color: #D08770; }
li.operation.put div.content h4 { color: #D08770; }
li.operation.delete .heading { border-color: #BF616A; background-color: #4C566A; }
li.operation.delete .heading h3 span.http_method i { background-color: #BF616A; }
li.operation.delete div.content h4 { color: #BF616A; }
li.operation.patch .heading { border-color: #B48EAD; background-color: #4C566A; }
li.operation.patch .heading h3 span.http_method i { background-color: #B48EAD; }
li.operation .heading h3 { color: #D8DEE9; }
.heading ul.options li { margin: .01em 0; padding: .4em !important; }
/* Fallback colors might be bad; I didn't test, I just added them to shut CSS Lint up ;) */
li.operation.delete .heading ul.options li { color: #BF616A; background-color: #BF616A; background-color: rgba(191, 97, 106, .2); border: 2px solid #BF616A; border: 2px solid rgba(191, 97, 106, .4); }
li.operation.post .heading ul.options li { color: #A3BE8C; background-color: #A3BE8C; background-color: rgba(163, 190, 140, .2); border: 2px solid #A3BE8C; border: 2px solid rgba(163, 190, 140, .4); }
li.operation.put .heading ul.options li { color: #c5862b; background-color: #D08770; background-color: rgba(197, 134, 43, .2); border: 2px solid #D08770; border: 2px solid rgba(197, 134, 43, .4); }
li.operation.get .heading ul.options li { color: #81A1C1; background-color: #81A1C1; background-color: rgba(15, 106, 180, .2); border: 2px solid #81A1C1; border: 2px solid rgba(129, 161, 193, .4); }
li.operation.patch .heading ul.options li { color: #B48EAD; background-color: #B48EAD; background-color: rgba(180, 142, 173, .2); border: 2px solid #B48EAD; border: 2px solid rgba(180, 142, 173, .4); }
li.operation.post div.content, li.operation.get div.content, li.operation.put div.content, li.operation.delete div.content, li.operation.patch div.content { border-color: #4C566A; background-color: #2E3440; }
/* ----------- */
/* Info Footer */
#colophon { border-top: inherit; color: #D8DEE9; }
/*********************
* Article View Page *
*********************/
#slide-out > li > a > i { color: inherit; } /* NavBar icons */
#article { background-color: #3B4252; border: 1px solid #2E3440; font-size: 1.5em; padding: 0 1em; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); }
#article aside .tools { background-color: #434C5E; border-radius: 4px; font-size: 0.6em; } /* 'Tools' area */
#article aside .tools .tags { margin: 0.5em auto; } /* Tag spacing */
#article aside .tools .stats li i.material-icons, .reader-mode:hover .collapsible-body li a i.material-icons { color: inherit; font-size: 1.5em; } /* Icons */
#article aside .tools .stats { font-size: .8em; margin: auto; } /* Tools area */
#article aside .tools .stats a { color: #D08770; } /* Link text */
/* Tags */
#article aside .chip { background-color: #BF616A; font-size: .8em; line-height: 2.3em; height: 2em; }
#article aside .chip a, #article aside .chip i { color: #ECEFF4; } /* Tag text */
#article aside .chip i.material-icons { line-height: 1.1em; } /* Tag icon */
#article>header>h1 { font-size: 1.6em; margin: 2.1rem 0 .68rem; background-color: #2E3440; color: #EBCB8B; padding: 1.5em; text-align: center; border-radius: 4px; } /* Article header */
#article article { color: inherit; }
#article article a { border-bottom: inherit; } /* Article links */
#article article h2, #article article h3, #article article h4 { color: #8FBCBB; font-style: italic; } /* Title text */
#article pre { background-color: #2E3440; border: inherit; } /* Code (pre) tags */
#article article blockquote { background-color: #2E3440; border-radius: 2px; } /* Blockquote tags */
#article input[type=text]:focus:not([readonly]) { background-color: inherit !important; border-radius: 1px; }
#article input[type=text] { border-bottom: 1px solid #EBCB8B; }
.reader-mode:hover .collapsible-body li a i.material-icons { margin: auto 5px auto -8px; }
/**************
* Share Page *
**************/
body > article { color: inherit; }
} /* [1] Closing brace for Stylus/Stylish */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.