Dark material theme

[modos189]

Yes, I had an idea to make a few color variations of the theme.

But is it possible to base the theme stored separately from a few variations of the theme?

This would create a large number of variations of colors, when you upgrade by changing just one code.

[j0k3r]

This is an interesting question and it's not doable at the moment. If you want a new theme to be based on a current one, you'll have to duplicate every thing :confused: Or maybe, re-create all twigs with a single line to require the parent theme.

[nicosomb]

In fact, it's better (and easier) to create a dark article view.

Have a look to Pocket and others: the UI is still the same, but you can only change the article view.

• [ ] new tab in config: Display
• [ ] a list in this tab to choose the article view background "Dark, Black, Light"

• [ ] a list to choose font size (other issue I'll create)

  What is your opinion about that?

[NumEricR]

It's ok to developp a different style in artcle view only as a first solution. ie. for first v2 release.

But I think a full dark view should be created (whatever currently displayed page). Otherwise you will get some pages with white background and others with black. A kind of blink display while browsing in wallabag :worried:

edit Whatever Pocket do, remember with "Poche" we had full dark themes: "dark", "dmagenta" and "solarized-dark" :wink:

[iav]

And nice reading set for sepia: background: #e9d8ba text: #5a4129 Font: Droid Sans

[NerosTie]

Any news about a dark theme? I'm asking because it's not in a milestone anymore.

[gnppn]

Same question (a year later), a dark web theme would be great.

[j0k3r]

@STaRDoGG Do you have free time to work on it? Because we don't at the moment. So we'll be really happy to review your work on that requested feature. Otherwise, please don't boo.

[STaRDoGG]

Unfortunately no. I just installed it for the first time today and attempted to 'quickly' do it by looking through the files, but there's a whooole lotta stuff going on, lol. Lot of frameworks I've never used, etc.; a lot for me to study up on before I follow the flow just to edit a theme. I was just going to dupe the current Material theme and edit a couple of colors in the css.

Something similar to this: https://i.imgur.com/HRqFDpX.png

I just changed a few colors using the Chrome inspector.

[dylan-k]

While not a proper theme, I found a useful workaround via the "Dark Night Mode" extension for chrome. I think there are similar extensions for other browsers as well. They can override a theme to make a dark mode happen. It works well enough for me anyway.

[BoyMechanicus]

I began work on it yesterday. Pushed some to github today. Probably won't be finished tomorrow.

I won't claim to know what I'm doing but I am making progress.

[BoyMechanicus]

I have a mostly working dark material theme now. There are some changes I made to a css file I would have preferred to make to a twig file.

[j0k3r]

Feel free to open a PR so we can check it! Could you target the 2.4 branch for that? Because it won't be in 2.3.5 but in 2.4.0. Thanks

[BoyMechanicus]

I was actually planning on making it work with the latest stable that came out a two(?) days ago. I'll Make a fork and do a pr. In the meantime have a couple screenshots.

[BoyMechanicus]

Made PR #3791 . Take you time with it. It's 2.3.3 But I'll toy around with 2.4 later.

[mangepatate]

Hello BoyMechanicus, how may I install your dark theme on my Yunohost/Wallabag ? I'm quite a newbie to Wallabag theming, but it interests me :)

[BoyMechanicus]

I have a release of 2.3.3 ready enough if that's what you're using.

[STaRDoGG]

Well, I got tired of waiting, and there's no real end in sight, so I took a few days to create a dark(ish) theme for myself, based on the Nord palette. (Which I happen to be a big fan of. Bitwarden's chrome extension uses it as well). Thought I'd share it in case anyone else is interested. I made it into a Stylish theme because I definitely don't have time to figure out how to create a legit native Wallabag version for the user to just select in the settings. If anyone wants to, feel free to do so with this code (I just ask that you give me a nod somewhere in the contributors area or something :) ).

First, some screenshots:

Now the CSS:

/* A Dark Nord Material Theme for WallaBag - by J. SCOTT ELBLEIN ( https://geekdrop.com )
 *
 * v1.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 easliy swap around later at will.
 *
*/

.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; }

To use it in Stylish, use: Urls matching this regexp, and enter: .*/wallabag/web/.*

Here's a link to the style on Stylish's site: https://userstyles.org/styles/174836/wallabag-dark-nord-material-theme

NOTE: I'm not CSS guru, and I was slightly in a hurry to whip this out and get back to my other work, so there's a strong chance a real CSS guru could optimize this. I welcome that.

[nicosomb]

hello @STaRDoGG ! Thank you so much for your css file.

Can we use your css to integrate a dark mode in wallabag?

[STaRDoGG]

@nicosomb I would actually love and prefer that, to using Stylish/Stylus to theme it. :)

All I'd ask is just a mention somewhere in the credits for the time I spent on it. ("J. Scott Elblein")

[BNolet]

Is there an ETA for this theme being included in Wallabag?

[jivanyatra]

Leaving this info here in case someone makes the same mistake I did.

I tried out the darkmateria theme from @BoyMechanicus, despite the fact that the theme was designed for 2.3.3/2.3.4 and we're at 2.3.8 now. It looks great, but breaks crucial things:

• on mobile, hitting the menu button on the top left doesn't do anything.
• on web, going to settings (to change the theme back) breaks dropdowns so you can't view or select them.
• the wallabag icon in the top left on most versions doesn't load correctly.

Any of these could just have been me, by the way. I certainly do not claim to know what I'm doing.

Now, I'm no front-end dev and I'm not well-versed in using the browser's js console to rewrite vars and submit the form to fix this. It took me a bit to figure out how to change it back: the theme is stored in the database and not in any of the files preset, so you have to change the values in your database manually.

Connect to the 'wallabag' database in your system, find the table 'wallabag_config' and change the 'theme' column to 'material' where the id=1 (first and only row in the table). I'm using postgres, so you'll have to know how to edit whichever db you're using manually. Then, everything works just fine in the Material theme.

This isn't a knock on @BoyMechanicus's work, btw. His theme definitely looks fantastic. If I were more inclined to work with the front-end, I'd edit it and submit a PR. As it is, I may just modify the article view to do grey on black (for my mobile OLED screen) and just call it a day at that.

Great work, everyone. Wallabag is a real treat.

[jivanyatra]

Does anyone know if using the Stylish theme @STaRDoGG provided as a global css overide would work? I may also try that in the future and report back.

[STaRDoGG]

Does anyone know if using the Stylish theme @STaRDoGG provided as a global css overide would work? I may also try that in the future and report back.

By "global" do you mean to enable it for all websites; not just for Portainer?

[jivanyatra]

Sorry for the confusion. No, I meant global for the wallabag install (regardless of theme). Is there a way we can use the stylish theme by dropping it as custom.css (referenced here, in 4151) and have it not break anything? I'm guessing not, at least without some heavy modification.

EDIT: Also, thanks for the reply, @STaRDoGG

[STaRDoGG]

@jivanyatra Not afaik, but that's what Stylish/Stylus does; it runs the theme "globally" on your Portainer site., overriding the default Portainer Material theme where needed.

[jivanyatra]

@STaRDoGG ah yes, I see. I'm not using docker. I'm running this on a vps with a variety of other services running, many of which don't have proper docker containers. That's an interesting angle, but for me, it doesn't seem to fit. Still, beautiful theme.

[STaRDoGG]

@jivanyatra As long as your Portainer instance has a unique URL of some sort, you should be able to use it regardless of whether it's running in a container or not. Just tweak this (if even necessary; the RegEx should be able to identify it anyway):

[tborychowski]

For the people still looking how to do dark with docker, here's what I've done:

1. Create a file material.css containing the original material theme CSS + the CSS provided by @STaRDoGG above (here's the file created today: material.css.zip)
2. In docker-compose mount the file like so:

   volumes:
   - ./material.css:/var/www/wallabag/web/wallassets/material.css

3. Once the app starts - reload browser without cache (cmd/ctrl+r)

Please remember that this is a hack, and ideally (maybe in the next 15 years or so) we can get a better solution to theming :-)

[Kdecherf]

A dark theme for material has landed in wallabag 2.4.0 through https://github.com/wallabag/wallabag/pull/4725, closing this issue.

[STaRDoGG]

For anyone interested, I've added my theme as a repo.

https://github.com/STaRDoGG/Dark-Nord-Material-Theme-for-WallaBag