notebook/app/assets/stylesheets/dark-mode.scss

$transition-effects: color 1s ease, background-color 1s ease;

body {
	background-color: #eee;
  transition: $transition-effects;

	&.dark {
		background-color: #202123;
		color: #fff;
		nav {
			background-color: #2196F3;
		}

		.card, .card-panel {
			background-color: rgba(255, 255, 255, 0.2);

      .card-title {
        color: #fff;
      }

			.card-content {

				p {
					color: #ddd;
				}
			}
    }
    .card-reveal {
      background-color: #3B4043;
		}
		.dropdown-content {
			background-color: #2D2D31;
			a {
				color: #ccc;
				&:hover {
					background-color: #3B4043;
				}
			}

			li.optgroup > span {
				color: #ccc;
			}
		}
    .modal {
      background-color: #2D2D31;
    }
		.btn {
			background-color: #000000;
			border: 1px solid #aaa;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #888;
			color: #ccc;
		}
		.divider {
			opacity: 0.2;
		}
		.input-field {
			.helper-text {
				color: #ccc;
			}
		}
    textarea, input {
      color: #fff;

      &::placeholder {
        color: #aaa;
      }
    }
    .collapsible-header {
			background-color: #3B4043;
			
			&:active {
				background: #2196F3;
			}
    }
		.sidenav, .collapsible-body {
			background-color: #2D2D31;
			li {
				a {
					&:not(.subheader){
						color: #89B2F5;
						&:hover {
							background-color: #3B4043;
						}
					}
					&.subheader {
						color:#9AA0A6; 
					}
					.material-icons {
						color: #9AA0A6;
					}
				}
			}
		}
		.collection {
			border: 1px solid rgba(255,255,255,0.2);
			background: black;
			
			.collection-header {
				background: #3B4043;
			}

			.collection-item {
				background-color: rgba(255, 255, 255, 0.2);
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			}
		}
		#editor {
			background-color: #3B4043;
			color: white;
		}

		#notifications-dropdown .notification-link {
			color: white;
		}

		.unread-notification .notification-link {
			background: #E3F2FD;

			div {
			  color: black;
			}
		}

		#thredded--container {
			input {
				color: white;
			}

			.thredded--post--dropdown--actions--item {
				color: black;

				&:hover {
					color: white;
				}
			}

			.thredded--currently-online {
				border: 1px solid black;
			}

			.thredded--form.thredded--navigation--search.thredded--navigation--search-topics input {
				background-color: #2196F3;
			}

			.thredded--form {
				input, textarea {
					color: white;
					background-color: #3B4043;

					&::placeholder {
						color: #ddd;
					}
				}

				.thredded--preview-area {
					color: #ddd;
				}

				.thredded--form--submit {
					background-color: #2196F3;
					color: white;
				}
			}

			.thredded--messageboard, .thredded--form {
				background-color: #3B4043;
			}

			.thredded--messageboard--description {
				color: white;
			}

			.thredded--messageboard--byline, .thredded--messageboard--meta--counts, .thredded--navigation-breadcrumbs li a {
				color: #9AA0A6;
			}

			.thredded--nav-text {
				color: #ddd;
			}

			.thredded--post--created-at {
				color: #9AA0A6;
			}

			.thredded--topic-header {
				.thredded--topic-header--title {
					color: white;
				}

				.thredded--topic-header--started-by, .thredded--topic-followers, .thredded--topic-header--follow-info--reason {
					color: #9AA0A6;

					a {
						color: #4CAF50;
					}
				}
			}

			.thredded--post--user {
				color: black;

				a {
					color: #4CAF50;
				}
			}

			.thredded--post {
				background: #3B4043;
				color: white;

				border-bottom: 1px solid #333;
				border-top: 1px solid #666;
			}
			
			.muted-thredded-post {
				color: lightgrey;
				background-color: #202123 !important;
				border-bottom: 0 !important;
			}

			nav.thredded--pagination {
				background: #3B4043;
				a {
					color: lightgrey;

					&:hover {
						color: white;
					}
				}
			}

			.thredded--topics--topic {
				background-color: #3B4043;
				
				.thredded--topics--title a {
					color: white;
				}

				.thredded--topics--updated-by {
					color: #9AA0A6;

					a {
						color: #4CAF50;
					}
				}

				.thredded--topics--posts-count {
					border: 1px solid #555;
				}
			}

			.thredded--currently-online {
				background-color: #3B4043;

				.thredded--currently-online--title {
					color: #9AA0A6;
				}
			}

			.thredded--user-navigation--item a {
				&:hover {
					color: #000;
				}
			}
		}

		.thredded--post-form--title {
			color: #9AA0A6;
		}

		.tribute-container ul {
			background-color: #2D2D31;
		}

		.iconpicker-search {
			color: black;
		}
	}
}