:root {
  --dark-background: #222222;
  --dark-surface: #3a3a3a;
  --dark-primary: #bb86fc;
  --dark-secondary: #03dac6;
  --dark-on-primary: #000000;
  --dark-on-surface: #ffffff;
  --dark-on-background: #ffffff;
}

body.dark-mode {
  --color-background: #1f1f1f;
  --color-surface: #2b2b2b;
  --color-surface-muted: #242424;
  --color-border: #3a3a3a;
  --color-text: #f4f4f4;
  --color-muted: #a9a9a9;
  --color-accent: var(--dark-primary);
  --color-accent-hover: #d4b0ff;
  --color-accent-visited: #9d74e2;
  --color-code-bg: #1e1e1e;
  --color-code-border: #343434;
  color-scheme: dark;
  background-color: var(--color-background);
  color: var(--color-text);
}

.dark-mode .site {
  color: var(--color-text);
}

.dark-mode a {
  color: var(--color-accent);
}

.dark-mode a:hover {
  color: var(--color-accent-hover);
}

.dark-mode a:visited {
  color: var(--color-accent-visited);
}

.dark-mode .title a {
  color: var(--color-text);
}

.dark-mode .title a:hover {
  color: var(--color-accent);
}

.dark-mode .header a.extra {
  color: var(--color-muted);
}

.dark-mode .header a.extra:hover {
  color: var(--color-text);
}

.dark-mode .meta {
  color: var(--color-muted);
}

.dark-mode .footer {
  color: var(--color-muted);
  border-top-color: var(--color-border);
}

.dark-mode .footer .contact a {
  color: var(--color-accent);
}

.dark-mode .posts pre,
.dark-mode .post-full pre {
  border-color: var(--color-code-border);
  background-color: var(--color-code-bg);
}

.dark-mode .posts code,
.dark-mode .post-full code {
  border-color: var(--color-code-border);
  color: #d7c8ff;
  background-color: var(--color-code-bg);
}

.dark-mode .posts pre code,
.dark-mode .post-full pre code {
  background-color: transparent;
  border: none;
}

.dark-mode .posts pre.terminal,
.dark-mode .post-full pre.terminal {
  border-color: #fff;
  background-color: #111;
  color: #eee;
}

.dark-mode .posts pre.terminal code,
.dark-mode .post-full pre.terminal code {
  background-color: #111;
}

/* Custom styles for dark-mode */
.dark-mode .raised {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.dark-mode .navbar-inner {
    background-color: var(--color-surface);
    background-image: none;
    border-color: var(--color-border);
}

.dark-mode .comments-area {
  color-scheme: dark;
}

.dark-mode #disqus_thread {
  color-scheme: dark;
}

.dark-mode .navbar .brand {
    color: var(--color-text);
}

.dark-mode .navbar .nav > li > a {
    color: var(--color-text);
}

.dark-mode .dark-mode-toggle-icon::before {
  background-image: url("/assets/themes/surface/img/light_mode_24px.png");
}

.dark-mode .share-icon::before {
  background-image: url("/assets/themes/surface/img/share_24px_dark.png");
}

.dark-mode .rss-icon::before {
  background-image: url("/assets/themes/surface/img/rss_feed_24px_dark.svg");
}

.dark-mode .categories-icon::before {
  background-image: url("/assets/themes/surface/img/categories_24px_dark.svg");
}

.dark-mode .tags-icon::before {
  background-image: url("/assets/themes/surface/img/tag_24px_dark.svg");
}

.dark-mode .archive-icon::before {
  background-image: url("/assets/themes/surface/img/content_copy_24px_dark.svg");
}

.dark-mode .hacker-news-icon::before {
  background-image: url("/assets/themes/surface/img/hacker_news_24px_dark.svg");
}

.dark-mode .threads-icon::before {
  background-image: url("/assets/themes/surface/img/threads_24px_dark.svg");
}

.dark-mode .person-icon::before {
  background-image: url("/assets/themes/surface/img/person_24px_dark.svg");
}

.dark-mode .github-icon::before {
  background-image: url("/assets/themes/surface/img/github_24px_dark.svg");
}

.dark-mode .mastodon-icon::before {
  background-image: url("/assets/themes/surface/img/mastodon_24px_dark.svg");
}

.dark-mode .linkedin-icon::before {
  background-image: url("/assets/themes/surface/img/linkedin_24px_dark.svg");
}

.dark-mode .copy-clipboard-icon::before {
  background-image: url("/assets/themes/surface/img/content_copy_24px_dark.svg");
}

.dark-mode button.js-copy-link {
  color: var(--color-accent);
}

.dark-mode button.js-copy-link:hover,
.dark-mode button.js-copy-link:focus {
  color: var(--color-accent-hover);
}