github.com/System-Glitch/goyave/v2@v2.10.3-0.20200819142921-51011e75d504/docs_src/src/.vuepress/theme/styles/dark.styl

@import './variables.styl';

.yuu-theme-dark {
	color: $darkerTextColor;
	background-color: $darkPrimaryBg;

	hr {
		border-top-color: $darkBorderColor;
	}

	.theme-default-content {
		code {
			background-color: $darkSecondaryBg;
		}

		code, a code {
			color: $codeDarkColor;
		}
	}

	tr {
		border-top-color: $darkBorderColor;

		&:nth-child(2n) {
			background-color: $darkSecondaryBg;
		}
	}

	th, td {
		border-color: $darkBorderColor;
	}

	a, .page-edit .edit-link a {
		color: $accentDarkColor;
	}

	pre.vue-container {
		code {
			color: $darkerTextColor
		}
	}

	.go-to-top {
		color: $accentDarkColor;
	}

	#nprogress .bar {
		background: $accentDarkColor;
	}

	.badge.tip, .action-button {
		background-color: darken($accentColor, 10%) !important;
	}

	.action-button:hover {
		background-color: $accentColor !important;
	}

	// @parent-theme/components/AlgoliaSearchBox.vue
	.algolia-search-wrapper .algolia-autocomplete {
		.ds-dropdown-menu {
			background-color: $darkPrimaryBg;
			border-color: $darkBorderColor;

			&::before {
				background-color: $darkPrimaryBg;
				border-color: $darkBorderColor;
			}

			[class^="ds-dataset-"] {
				background-color: $darkPrimaryBg;
			}

			.ds-suggestion {
				border-color: $darkBorderColor;
			}

			.ds-cursor .algolia-docsearch-suggestion--content {
				color: $darkTextColor;
				background-color: $darkSecondaryBg !important;

				&::before {
					background-color: $darkBorderColor;
				}
			}

			.algolia-docsearch-suggestion--content::before {
				background-color: $darkBorderColor;
			}
		}

		.algolia-docsearch-suggestion--category-header {
			border-color: $darkBorderColor;
		}

		.algolia-docsearch-suggestion {
			color: $darkTextColor;
			background-color: $darkPrimaryBg;
			border-color: $darkBorderColor;

			.algolia-docsearch-suggestion--category-header {
				color: $darkTextColor;
			}

			 .algolia-docsearch-suggestion--title {
				 color: $darkAltTextColor;
			 }

			.algolia-docsearch-suggestion--subcategory-column {
				color: $darkTextColor;
				background-color: $darkPrimaryBg;
				border-color: $darkBorderColor;

				&::before {
					background-color: $darkBorderColor;
				}

				.algolia-docsearch-suggestion--highlight {
					color: $accentDarkColor;
				}
			}

			.algolia-docsearch-suggestion--subcategory-column-text {
				color: $darkTextColor;
			}

			@media (max-width: $MQMobile) {
				.algolia-docsearch-suggestion--subcategory-column-text {
					background-color: rgba(#fff, 0.1);
				}
			}
		}
	}

	// @parent-theme/components/Home.vue
	.home {
		.hero .description,
		.feature h2,
		.feature p {
			color: $darkTextColor;
		}

		.features {
			border-top-color: $darkBorderColor;
		}

		.footer {
			color: $darkAltTextColor;
			border-top-color: $darkBorderColor;
		}
	}

	// @theme/components/Navbar.vue
	.navbar {
		color: $darkTextColor;
		background-color: $darkPrimaryBg;
		border-bottom-color: $darkBorderColor;

		.links {
			background-color: $darkPrimaryBg;
		}

		.site-name {
			color: $darkTextColor;
		}
	}

	// @parent-theme/components/NavLinks.vue
	.nav-links {
		a,
		.dropdown-wrapper .dropdown-title {
			color: $darkTextColor;

			&:hover,
			&.router-link-active {
				color: $accentDarkColor;
			}

			&.router-link-active {
				border-color: $accentDarkColor;
			}
		}

		.dropdown-wrapper .nav-dropdown {
			background-color: $darkPrimaryBg;
			border-color: $darkBorderColor;
		}
	}

	.settings-button {
		color: $darkerTextColor;
	}

	// @parent-theme/components/PageEdit.vue
	.page-nav .inner {
		border-top-color: $darkBorderColor;
	}

	// @vuepress/plugin-search/SearchBox.vue
	.search-box {
		input,
		.suggestions {
			background-color: $darkSecondaryBg;
			border-color: $darkBorderColor;
		}

		input {
			color: $darkTextColor;

			&:focus {
				border-color: alpha($accentDarkColor, 0.75);
			}
		}

		.suggestion {
			&.focused {
				background-color: $darkPrimaryBg;

				a {
					color: $accentDarkColor;
				}
			}

			a {
				color: $darkAltTextColor;
			}
		}
	}

	// @parent-theme/components/Sidebar.vue
	.sidebar {
		background-color: $darkPrimaryBg;
		border-right-color: $darkBorderColor;
		.nav-links {
			border-bottom-color: $darkBorderColor;
		}
	}

	// @parent-theme/components/SidebarLink.vue
	a.sidebar-link {
		color: $darkAltTextColor;

		&:hover,
		&.active {
			color: $accentDarkColor;
		}

		&.active {
			border-color: $accentDarkColor;
		}
	}

	// @vuepress/plugin-pwa/lib/SWUpdatePopup.vue
	.yuu-theme-dark {
		.sw-update-popup {
			background-color: $darkPrimaryBg;
		}
	}

	// @parent-theme/styles/custom-blocks.styl
	.custom-block {
		&.tip {
			color: lighten($tipGreen, 50%);
			background-color: alpha($tipGreenBackground, 0.25)

			.custom-block-title {
				color: lighten($tipGreen, 20%);
			}
		}

		&.warning {
			color: lighten($warningYellow, 40%);
			background-color: alpha($warningYellowBackground, 0.25);

			.custom-block-title {
				color: darken($warningYellow, 20%);
			}

			a {
				color: $accentDarkColor;
			}
		}

		&.danger {
			color: lighten($dangerRed, 50%);
			background-color: alpha($dangerRed, 0.25);

			.custom-block-title {
				color: lighten($dangerRed, 30%);
			}

			a {
				color: $accentDarkColor;
			}
		}
	}
}