body.dark {
  background-color: #222;
  color: #fff;
}

.dark #header {
  background-color: #444;
}

.dark #settings-btn {
  color: #aaa;
}

.dark #settings-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.dark #settings-content,
.dark #item-menu-content {
  background: #444;
  color: #fff;
}

.dark #todo-list li {
  background: #444;
  color: #fff;
}

.dark .done {
  color: #ccc;
  text-decoration: line-through;
}

.dark #input-wrapper {
  background: #444;
}

.dark #todo-input {
  color: #fff;
}

.dark #mic-hint {
  background: #333;
  border-color: #555;
  color: #eee;
}

.dark #mic-hint kbd {
  background: #555;
  border-color: #777;
  color: #eee;
}

.dark #mic-btn {
  color: #666;
}

.dark #mic-btn:hover:not(:disabled) {
  color: #bbb;
}

.dark #project-name,
.dark #theme-select,
.dark #project-switch,
.dark #voice-lang-select {
  background: #444;
  color: #fff;
  border-color: #666;
}

.dark #todo-list a {
  color: #8ab4f8;
}

.dark #tag-filter-banner {
  background: #333;
}

.dark #clear-tag-filter {
  color: #aaa;
}

.dark #clear-tag-filter:hover {
  color: #fff;
}

.dark .modal-close {
  color: #aaa;
}

.dark .modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.dark #nav-menu-btn {
  color: #aaa;
}

.dark #nav-menu-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.dark #nav-menu {
  background: #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.dark #nav-menu a {
  color: #bbb;
}

.dark #nav-menu a:hover {
  background: #3d3d3d;
  color: #fff;
}

.dark #nav-menu a.active {
  color: #66bb6a;
}

.dark #nav-menu a.active svg {
  color: #66bb6a;
}