@media (prefers-color-scheme: dark) {

	:root {
		/* Dark theme primary colors */
		--color-primary-a0: #34b891;
		--color-primary-a20: #6ec8a8;
		--color-primary-transparent: #34b89123;

		/* Dark theme surface colors */
		--color-surface-a0: #121212;
		--color-surface-a10: #282828;
		--color-surface-a20: #3f3f3f;
		--color-surface-a30: #575757;
		--color-surface-a50: #8b8b8b;

		--color-text: #fff;
	}

	html, body, .navbar {
		background-color: var(--color-surface-a0);
	}

	.navbar-item,
	.label,
	.table,
	.table thead th,
	.modal-card-title,
	.modal-card-body,
	.button:focus,
	.dropdown-item,
	.checkbox:hover {
		color: var(--color-text);
	}

	.box, .table, .modal-card-head, .modal-card-foot {
		background-color: var(--color-surface-a10);
	}

	.table.is-hoverable tbody tr:not(.is-selected):hover {
		background-color: var(--color-primary-transparent);;
	}

	.file-row a, .node-tree > a, strong {
		color: var(--color-text) !important;
	}

	a.navbar-item:hover {
		background-color: var(--color-primary-transparent);;
		border-radius: 5px;
	}

	.input {
		background-color: var(--color-surface-a20);
		color: var(--color-text);
		border-color: transparent;
	}

	.input:hover {
		border-color: var(--color-primary-a20);
	}
	
	.input::placeholder {
	    	color: var(--color-surface-a50);
	}
	
	.table td, .table th {
		border-bottom: 1px solid var(--color-surface-a0);
	}

	.is-current-sort {
		border-bottom: 1px solid var(--color-primary-a0) !important;
	}

	/* Modal */
	.modal-card-body {
		background-color: var(--color-surface-a20);
	}

	.modal-card-head {
		border-bottom: 1px solid var(--color-surface-a0);
	}

	.modal-card-foot {
		border-top: 1px solid var(--color-surface-a0);
	}

	.modal input {
		background-color: var(--color-surface-a30);
	}

	/* Button */
	.button {
		background-color: var(--color-primary-transparent);
		border-color: var(--color-primary-a0);
		color: var(--color-text)
	}

	.button:hover {
		background-color: var(--color-primary-a0);
		border-color: var(--color-primary-a0);
		color: var(--color-text)
	}

	.button:active {
		color: var(--color-primary-a0) !important;
	}

	/* Dropdown */
	.dropdown-content {
		background-color: var(--color-surface-a20);
	}

	a.dropdown-item:hover {
		background-color: var(--color-primary-transparent);
		color: var(--color-text);
	}

        a:hover,
        .breadcrumb a:hover {
                color: var(--color-primary-a20);
        }

	#bottom-info {
		color: var(--color-surface-a50);
	}

	.select select {
		background-color: var(--color-surface-a20);
		border-color: var(--color-surface-a20);
		color: var(--color-text);
	}

	.select select:hover, .select:not(.is-multiple):not(.is-loading):hover::after {
		border-color: var(--color-primary-a0);
	}
}