Portfolio/src/styles/_dark.scss

[data-theme="dark"] {
	body {
		background-color: $bg-dark;
		color: $text-primary;
	}

	.empty {
		background-color: $bg-dark-secondary;
		color: $text-primary;
	}

	.card {
		background-color: $bg-dark;
	}

	.form-input,
	.form-icon {
		background-color: $bg-dark-secondary !important;
		color: $text-primary;
		border-color: lighten($bg-dark-secondary, 10%);
	}

	.divider-vert {
		&::before {
			border-color: lighten($bg-dark-secondary, 10%);
		}

		&[data-content]::after {
			background-color: $bg-dark;
		}
	}

	.bg-gray {
		background-color: $bg-dark-secondary !important;
	}

	.chip,
	.input-group .input-group-addon {
		background-color: lighten($bg-dark-secondary, 10%);
		border-color: lighten($bg-dark-secondary, 20%)
	}

	.divider {
		border-color: $bg-dark-secondary;
	}

	.table {

		td,
		th {
			border-color: lighten($bg-dark-secondary, 10%);
		}
	}

	.table tbody tr.active,
	.table.table-striped tbody tr.active {
		background: $bg-dark-secondary;
	}

	a:hover {
		color: $primary-color-dark;
	}

	a {
		color: $primary-color;
	}

	.text-primary {
		color: $primary-color !important;
	}

	.bg-primary {
		background-color: $primary-color !important;
	}

	.btn {
		background-color: $bg-dark-secondary;
		color: $primary-color;

		border-color: $primary-color;

		&:hover {
			border-color: $primary-color;
		}

		&:focus {
			border-color: $primary-color;
		}
	}

	.btn-primary {
		background-color: $primary-color;
		border-color: $primary-color;

		color: $text-primary;

		&:hover {
			background-color: $primary-color-dark;
			border-color: $primary-color-dark;
		}

		&:focus {
			background-color: $primary-color-dark;
			border-color: $primary-color-dark;
		}
	}
}