:root {
    --dark-mode-font-color: var(--color-light);
    --dark-mode-bg-color: var(--color-dark)
}

body.dark main {
    background-color: var(--dark-mode-bg-color);
    color: var(--dark-mode-font-color)
}

body.dark.plain-headers, body.dark.plain-headers .layout-logo, body.dark.plain-headers footer a, body.dark.plain-headers footer .layout-logo span, body.dark main {
    background-color: var(--dark-mode-bg-color);
    color: var(--dark-mode-font-color) !important
}

body.dark .aside-container, body.dark .expandable, body.dark .share {
    box-shadow: none
}

body.dark .icon-container a, .icon svg * {
    fill: var(--dark-mode-font-color) !important;
    color: var(--dark-mode-font-color)
}

body.dark .latest-article-item__title a {
    color: var(--dark-mode-font-color)
}

body.dark .mdl-layout__drawer {
    background-color: var(--dark-mode-bg-color) !important;
    border-right: 1px solid var(--dark-mode-bg-color) !important
}

body.dark .mdl-layout__drawer .mdl-navigation .mdl-navigation__link, body.dark.plain-headers header a.mdl-navigation__link {
    color: var(--dark-mode-font-color) !important
}

body.dark .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
    background-color: var(--dark-mode-bg-color)
}

body.dark.plain-headers .mdl-layout__drawer-button * {
    fill: var(--dark-mode-font-color)
}