Add dark mode support to the popup panel (15c26a10) · Commits · Thomas Rientjes / decentraleyes

pages/popup/popup.css

+104 −0

Original line number	Diff line number	Diff line
		@@ -258,3 +258,107 @@ footer {
		width: 348px;
		}
		}

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

		/**
		* Sections
		*/

		body {
		background-color: #404040;
		color: #f9f9fa;
		}

		header {
		border-bottom-color: #292929;
		}

		/**
		* Lists
		*/

		.list-item {
		background-color: #484848;
		border-color: #292929;
		color: #f0f0f0;
		}

		.sublist {
		background-color: #323232;
		border-color: #292929;
		box-shadow: inset 0 2px 10px #292929;
		}

		.sublist:last-child {
		border-bottom-color: #292929;
		}

		.sublist-item {
		border-bottom-color: #2c2c2c;
		color: #f0f0f0;
		}

		/**
		* Buttons
		*/

		.button {
		background-color: #3c3c3c;
		border-color: #323232;
		color: #bbb;
		}

		.button:hover {
		background-color: #434343;
		}

		.button:active {
		background-color: #393939;
		}

		.button-toggle {
		border-color: #363636;
		color: #636363;
		}

		.button-toggle.active {
		border-color: #323232;
		}

		/**
		* Links
		*/

		.link-text {
		color: #7d7d7d;
		}

		.link-text:hover {
		color: #dadada;
		}

		/**
		* Miscellaneous
		*/

		.badge {
		color: #2d5042;
		}

		.description {
		color: #dadada;
		}

		.label-domain {
		color: #717171;
		}

		.panel:not(:last-child) {
		border-bottom-color: #292929;
		}

		.side-note {
		color: #888;
		}
		}