@whitesev/pops 2.1.5 → 2.1.7

package/src/components/loading/index.css

@@ -1,3 +1,10 @@
+.pops[type-value="loading"] {
+	--loading-bd-color: rgba(0, 0, 0, 0.2);
+	--loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	--loading-box-shadow-color: rgb(0 0 0 / 50%);
+	--loading-icon-color: rgba(100, 149, 237, 0.1);
+	--loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));
+}
 .pops[type-value="loading"] {
 	position: absolute;
 	top: 272.5px;
@@ -11,10 +18,10 @@
 	max-height: 100%;
 	min-width: 0;
 	min-height: 0;
-	border: 1px solid rgba(0, 0, 0, 0.2);
+	border: 1px solid var(--loading-bd-color);
 	border-radius: 5px;
-	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-	box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+	background-color: var(--loading-bg-color);
+	box-shadow: 0 0 5px var(--loading-box-shadow-color);
 	vertical-align: middle;
 	transition: all 0.35s;
 	transform: translate(-50%, -50%);
@@ -32,8 +39,8 @@
 	display: inline-block;
 	width: 2em;
 	height: 2em;
-	border: 0.3em solid rgba(100, 149, 237, 0.1);
-	border-top: 0.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));
+	border: 0.3em solid var(--loading-icon-color);
+	border-top: 0.3em solid var(--loading-icon-bd-top-color);
 	border-radius: 50%;
 	content: " ";
 	vertical-align: middle;
@@ -51,11 +58,9 @@
 	line-height: normal;
 	align-content: center;
 }
-.pops[type-value="loading"] .pops-loading-content p[pops] {
-	display: inline-block;
-	padding: 5px 0px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	font-size: inherit;
-	text-align: center;
+
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="loading"] {
+		--loading-bg-color: #222222;
+	}
 }

package/src/components/loading/index.ts

@@ -30,15 +30,15 @@ export const PopsLoading = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-loading-content">${
-							config.addIndexCSS
-								? /*html*/ `
+            <div class="pops-content pops-${PopsType}-content">${
+				config.addIndexCSS
+					? /*html*/ `
                 <style data-model-name="index">${PopsCSS.index}</style>
                 <style data-model-name="anim">${PopsCSS.anim}</style>
                 <style data-model-name="common">${PopsCSS.common}</style>
                 `
-								: ""
-						}
+					: ""
+			}
                 <style data-model-name="loadingCSS">
                     ${PopsCSS.loadingCSS}
                 </style>

package/src/components/panel/handlerComponents.ts

@@ -2159,6 +2159,7 @@ export const PanelHandlerComponents = () => {
 									--el-text-color-regular: #606266;
 									--el-color-primary: #409eff;
 									--el-fill-color-light: #f5f7fa;
+									--el-disable-color: #a8abb2;
 								}
 								.select-item{
 									cursor: pointer;
@@ -2176,7 +2177,7 @@ export const PanelHandlerComponents = () => {
 								.select-item[aria-disabled],
 								.select-item[disabled]{
 									cursor: not-allowed;
-									color: #a8abb2;
+									color: var(--el-disable-color);
 									background: unset;
 								}
 								.select-item:hover{
@@ -2204,6 +2205,16 @@ export const PanelHandlerComponents = () => {
 									width: 12px;
 									height: 12px;
 								}
+
+								
+								@media (prefers-color-scheme: dark) {
+									.select-container{
+										--el-text-color-regular: #f2f2f2;
+										--el-disable-color: #8D9095;
+										--el-fill-color-light: #262727;
+									}
+								}
+
 								${style || ""}
 								`,
 							} as PopsAlertDetails,

package/src/components/panel/index.css

@@ -3,7 +3,7 @@
 	--el-disabled-bg-color: #f5f7fa;
 	--el-disabled-border-color: #e4e7ed;
 	--pops-bg-color: #f2f2f2;
-	--pops-color: #333;
+	--pops-color: #333333;
 	--title-bg-color: #ffffff;
 	--aside-bg-color: #ffffff;
 	--aside-hover-color: rgb(64, 158, 255);
@@ -24,57 +24,52 @@
 	--pops-panel-forms-container-item-margin-left-right: var(
 		--pops-panel-forms-margin-left-right
 	);
+	--pops-panel-forms-container-li-border-color: rgb(
+		229,
+		229,
+		229,
+		var(--pops-bd-opacity)
+	);
 	--pops-panel-forms-container-li-padding-top-bottom: 12px;
 	--pops-panel-forms-container-li-padding-left-right: 16px;
+
+	--pops-panel-components-input-text-color: #000000;
+	--pops-panel-components-input-text-bg-color: transparent;
+	--pops-panel-components-input-bd-color: #dcdfe6;
+	--pops-panel-components-input-bg-color: #ffffff;
+	--pops-panel-components-input-hover-bd-color: #c0c4cc;
+	--pops-panel-components-input-focus-bd-color: #409eff;
+	--pops-panel-components-input-suffix-color: #a8abb2;
+
+	--pops-panel-components-textarea-text-color: #000000;
+	--pops-panel-components-textarea-text-bg-color: #ffffff;
+	--pops-panel-components-textarea-bd-color: #dcdfe6;
+	--pops-panel-components-textarea-hover-bd-color: #c0c4cc;
+	--pops-panel-components-textarea-focus-bd-color: #409eff;
+
+	--pops-panel-components-select-text-color: #000000;
+	--pops-panel-components-select-bd-color: rgb(
+		184,
+		184,
+		184,
+		var(--pops-bd-opacity)
+	);
+	--pops-panel-components-select-bg-color: rgb(
+		255,
+		255,
+		255,
+		var(--pops-bg-opacity)
+	);
+	--pops-panel-components-select-hover-bd-color: #c0c4cc;
 }
 .pops[type-value="panel"] {
 	color: var(--pops-color);
 	background: var(--pops-bg-color);
 }
 .pops[type-value] .pops-panel-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 	background: var(--title-bg-color);
 }
 
-.pops[type-value="panel"] .pops-panel-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="panel"] .pops-panel-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-	align-content: center;
-}
-.pops[type-value="panel"] .pops-panel-content {
-	width: 100%;
-	/*height: calc(
-		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);*/
-	flex: 1;
-	overflow: auto;
-	word-break: break-word;
-}
-.pops[type-value="panel"] .pops-panel-btn {
-	display: flex;
-	padding: 10px 10px 10px 10px;
-	width: 100%;
-	height: var(--container-bottom-btn-height);
-	max-height: var(--container-bottom-btn-height);
-	line-height: normal;
-	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-	text-align: right;
-	align-content: center;
-	align-items: center;
-}
-
 /* ↓panel的CSS↓ */
 aside.pops-panel-aside {
 	overflow: auto;
@@ -179,7 +174,7 @@ section.pops-panel-container .pops-panel-forms-container-item ul li {
 	align-items: center;
 	padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;
 	margin: 0px var(--pops-panel-forms-container-li-padding-left-right);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+	border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);
 	text-align: left;
 }
 section.pops-panel-container
@@ -669,17 +664,23 @@ section.pops-panel-container
 .pops-panel-input {
 	display: flex;
 	align-items: center;
-	border: 1px solid #dcdfe6;
+	border: 1px solid var(--pops-panel-components-input-bd-color);
 	border-radius: 4px;
-	background-color: #ffffff;
+	background-color: var(--pops-panel-components-input-bg-color);
 	position: relative;
+	box-shadow: none;
 }
 .pops-panel-input:hover {
-	box-shadow: 0 0 0 1px #c0c4cc inset;
+	border: 1px solid var(--pops-panel-components-input-hover-bd-color);
+}
+.pops-panel-input:has(input:disabled):hover {
+	--pops-panel-components-input-hover-bd-color: var(
+		--pops-panel-components-input-bd-color
+	);
 }
 .pops-panel-input:has(input:focus) {
 	outline: 0;
-	border: 1px solid #409eff;
+	border: 1px solid var(--pops-panel-components-input-focus-bd-color);
 	border-radius: 4px;
 	box-shadow: none;
 }
@@ -699,7 +700,8 @@ section.pops-panel-container
 	vertical-align: middle;
 	-webkit-appearance: none;
 	appearance: none;
-	background-color: transparent;
+	color: var(--pops-panel-components-input-text-color);
+	background-color: var(--pops-panel-components-input-text-bg-color);
 	outline: 0;
 	transition: 0.1s;
 	border: 0;
@@ -719,7 +721,7 @@ section.pops-panel-container
 	flex-wrap: nowrap;
 	height: 100%;
 	text-align: center;
-	color: #a8abb2;
+	color: var(--pops-panel-components-input-suffix-color);
 	transition: all 0.3s;
 	pointer-events: none;
 	margin: 0 8px;
@@ -751,13 +753,14 @@ section.pops-panel-container
 
 .pops-input-disabled {
 	background-color: var(--el-disabled-bg-color);
-	box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
 }
 .pops-panel-input.pops-input-disabled {
 	border: none;
 }
 .pops-panel-input.pops-input-disabled:hover {
-	box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
+	--pops-panel-components-input-hover-bd-color: var(
+		--pops-panel-components-input-bd-color
+	);
 }
 .pops-panel-input input:disabled,
 .pops-panel-input input:disabled + .pops-panel-input__suffix {
@@ -786,42 +789,54 @@ section.pops-panel-container
 	box-sizing: border-box;
 	font-size: inherit;
 	font-family: inherit;
-	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	color: var(--pops-panel-components-textarea-text-color);
+	background-color: var(--pops-panel-components-textarea-text-bg-color);
 	background-image: none;
 	-webkit-appearance: none;
 	appearance: none;
-	box-shadow: 0 0 0 1px #dcdfe6 inset;
+	box-shadow: none;
 	border-radius: 0;
 	transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-	border: none;
+	border: 1px solid var(--pops-panel-components-textarea-bd-color);
 }
 .pops-panel-textarea textarea:hover {
-	box-shadow: 0 0 0 1px #c0c4cc inset;
+	border-color: var(--pops-panel-components-textarea-hover-bd-color);
+}
+.pops-panel-textarea:has(textarea:disabled):hover {
+	--pops-panel-components-textarea-hover-bd-color: var(
+		--pops-panel-components-textarea-bd-color
+	);
 }
 .pops-panel-textarea-disable .pops-panel-textarea textarea:hover {
 	box-shadow: none;
 }
 .pops-panel-textarea textarea:focus {
 	outline: 0;
-	box-shadow: 0 0 0 1px #409eff inset;
+	border-color: var(--pops-panel-components-textarea-focus-bd-color);
 }
 /* textarea的CSS */
 
 /* select的CSS */
+.pops-panel-select {
+	border: 0;
+}
 .pops-panel-select select {
 	height: 32px;
 	line-height: normal;
 	align-content: center;
 	min-width: 200px;
-	border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));
+	border: 1px solid var(--pops-panel-components-select-bd-color);
 	border-radius: 5px;
 	text-align: center;
 	outline: 0;
-	background: rgb(255, 255, 255, var(--pops-bg-opacity));
+	color: var(--pops-panel-components-select-text-color);
+	background-color: var(--pops-panel-components-select-bg-color);
 	box-shadow: none;
 }
 .pops-panel-select select:hover {
-	box-shadow: 0 0 0 1px #c0c4cc inset;
+	--pops-panel-components-select-bd-color: var(
+		--pops-panel-components-select-hover-bd-color
+	);
 }
 .pops-panel-select-disable .pops-panel-select select:hover {
 	box-shadow: none;
@@ -851,11 +866,6 @@ section.pops-panel-container
 	--el-color-primary: #409eff;
 	--el-color-white: #ffffff;
 	width: 200px;
-	/* 左侧内容*/
-	/* 左侧内容*/
-	/* 右侧箭头图标*/
-	/* 右侧箭头图标*/
-	/* tag*/
 }
 .pops-panel-select-multiple .el-select__wrapper {
 	display: flex;
@@ -1084,3 +1094,66 @@ section.pops-panel-container
 	display: flex;
 	align-items: baseline;
 }
+
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="panel"] {
+		--pops-bg-color: #000000;
+		--pops-color: #f2f2f2;
+		--title-bg-color: #000000;
+		--aside-bg-color: #262626;
+		--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;
+		--pops-panel-forms-container-item-bg-color: #262626;
+		--pops-panel-forms-container-item-title-color: #c1c1c1;
+
+		--pops-panel-forms-container-li-border-color: rgb(
+			51,
+			51,
+			51,
+			var(--pops-bd-opacity)
+		);
+
+		--pops-panel-components-input-text-color: #f2f2f2;
+		--pops-panel-components-input-bd-color: #4f5052;
+		--pops-panel-components-input-bg-color: #141414;
+		--pops-panel-components-input-hover-bd-color: #6f7175;
+		--pops-panel-components-input-focus-bd-color: #409eff;
+		--pops-panel-components-input-suffix-color: #a8abb2;
+
+		--pops-panel-components-textarea-text-color: #f2f2f2;
+		--pops-panel-components-textarea-text-bg-color: #141414;
+		--pops-panel-components-textarea-bd-color: #4f5052;
+		--pops-panel-components-textarea-hover-bd-color: #6f7175;
+		--pops-panel-components-textarea-focus-bd-color: #409eff;
+
+		--pops-panel-components-select-text-color: #f2f2f2;
+		--pops-panel-components-select-bd-color: rgb(
+			51,
+			51,
+			51,
+			var(--pops-bd-opacity)
+		);
+		--pops-panel-components-select-bg-color: #141414;
+	}
+	.pops[type-value="panel"]
+		.pops-panel-deepMenu-container
+		.pops-panel-deepMenu-container-left-arrow-icon {
+		fill: #f2f2f2;
+	}
+
+	.pops-panel-select-multiple {
+		--el-fill-color-blank: #141414;
+		--el-border-color: #4c4d4f;
+		--el-text-color-placeholder: #a8abb2;
+		--el-select-input-color: #a8abb2;
+		--el-text-color-regular: #606266;
+		--el-color-info: #909399;
+		--el-color-info-light-8: #e9e9eb;
+		--el-color-primary-light-9: #ecf5ff;
+		--el-color-primary-light-8: #d9ecff;
+		--el-color-primary: #409eff;
+		--el-color-white: #ffffff;
+	}
+	.pops-panel-select-multiple .el-tag {
+		--el-color-info-light-9: #202121;
+	}
+}

package/src/components/panel/index.ts

@@ -49,14 +49,14 @@ export const PopsPanel = {
 			PopsType,
 			config,
 			/*html*/ `
-			<div class="pops-${PopsType}-title" style="text-align: ${
+			<div class="pops-title pops-${PopsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-${PopsType}-content">
+			<div class="pops-content pops-${PopsType}-content">
 				<aside class="pops-${PopsType}-aside">
 					<ul></ul>
 				</aside>

package/src/components/prompt/index.css

@@ -1,50 +1,18 @@
-.pops[type-value] .pops-prompt-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+.pops[type-value="prompt"] {
+	--input-color: #000000;
+	--input-bg-color: none;
+	--input-placeholder-color: #a1a4ac;
 }
-.pops[type-value="prompt"] .pops-prompt-title {
-	width: 100%;
-	height: var(--container-title-height);
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-}
-.pops[type-value="prompt"] .pops-prompt-title p[pops] {
-	width: 100%;
-	overflow: hidden;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-weight: 500;
-	line-height: normal;
-	align-content: center;
-}
-.pops[type-value="prompt"] .pops-prompt-content {
-	width: 100%;
-	/*height: calc(
-		100% - var(--container-title-height) - var(--container-bottom-btn-height)
-	);*/
-	flex: 1;
-	overflow: auto;
-	word-break: break-word;
-}
-.pops[type-value="prompt"] .pops-prompt-content p[pops] {
-	padding: 5px 10px;
-	color: rgb(51, 51, 51);
-	text-indent: 15px;
-}
-.pops[type-value="prompt"] .pops-prompt-btn {
-	display: flex;
-	padding: 10px 10px 10px 10px;
+.pops[type-value="prompt"] input[pops],
+.pops[type-value="prompt"] textarea[pops] {
 	width: 100%;
-	height: var(--container-bottom-btn-height);
-	max-height: var(--container-bottom-btn-height);
-	line-height: normal;
-	align-content: center;
-	border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
-	text-align: right;
-	align-items: center;
+	height: 100%;
+	outline: 0;
+	border: 0;
+	color: var(--input-color);
+	background-color: var(--input-bg-color);
 }
+
 .pops[type-value="prompt"] input[pops] {
 	padding: 5px 10px;
 }
@@ -52,11 +20,15 @@
 	padding: 5px 10px;
 	resize: none;
 }
-.pops[type-value="prompt"] input[pops],
-.pops[type-value="prompt"] textarea[pops] {
-	width: 100%;
-	height: 100%;
-	outline: 0;
-	border: 0;
-	color: rgb(51, 51, 51);
+
+.pops[type-value="prompt"] input[pops]::placeholder,
+.pops[type-value="prompt"] textarea[pops]::placeholder {
+	color: var(--input-placeholder-color);
+}
+@media (prefers-color-scheme: dark) {
+	.pops[type-value="prompt"] {
+		--input-color: #ffffff;
+		--input-bg-color: #333333;
+		--input-placeholder-color: #8d9095;
+	}
 }

package/src/components/prompt/index.ts

@@ -49,19 +49,19 @@ export const PopsPrompt = {
 			PopsType,
 			config,
 			/*html*/ `
-            <div class="pops-prompt-title" style="text-align: ${
-							config.title.position
-						};${headerStyle}">${
+            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+				config.title.position
+			};${headerStyle}">${
 				config.title.html
 					? config.title.text
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-            <div class="pops-prompt-content" style="${contentPStyle}">${
+            <div class="pops-content pops-${PopsType}-content" style="${contentPStyle}">${
 				config.content.row
-					? '<textarea pops="" placeholder="' +
+					? '<textarea name="pops-input-text" pops="" placeholder="' +
 					  config.content.placeholder +
 					  '"></textarea>'
-					: '<input pops="" placeholder="' +
+					: '<input name="pops-input-text" pops="" placeholder="' +
 					  config.content.placeholder +
 					  '" type="' +
 					  (config.content.password ? "password" : "text") +

package/src/components/rightClickMenu/index.css

@@ -1,3 +1,8 @@
+.pops-rightClickMenu {
+	--right-context-menu-shadow-color: #cacaca;
+	--right-context-menu-row-visited-color: #dfdfdf;
+	--right-context-menu-row-hover-color: #dfdfdf;
+}
 .pops-rightClickMenu * {
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
@@ -14,7 +19,7 @@
 	font-size: 16px;
 	font-weight: 500;
 	background: #fff;
-	box-shadow: 0px 1px 6px 1px #cacaca;
+	box-shadow: 0px 1px 6px 1px var(--right-context-menu-shadow-color);
 }
 .pops-rightClickMenu-anim-grid {
 	display: grid;
@@ -25,7 +30,7 @@
 	grid-template-rows: 1fr;
 }
 .pops-rightClickMenu-is-visited {
-	background: #dfdfdf;
+	background: var(--right-context-menu-row-visited-color);
 }
 i.pops-rightClickMenu-icon {
 	height: 1em;
@@ -45,7 +50,7 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
 	animation: rotating 2s linear infinite;
 }
 .pops-rightClickMenu li:hover {
-	background: #dfdfdf;
+	background: var(--right-context-menu-row-hover-color);
 	cursor: pointer;
 }
 .pops-rightClickMenu ul {
@@ -71,3 +76,9 @@ i.pops-rightClickMenu-icon[is-loading="true"] {
 	-ms-user-select: none;
 	align-items: center;
 }
+
+@media (prefers-color-scheme: dark) {
+	.pops-rightClickMenu {
+		--right-context-menu-shadow-color: #3c3c3c;
+	}
+}

package/src/components/searchSuggestion/index.ts

@@ -129,6 +129,13 @@ export const PopsSearchSuggestion = {
 					-o-animation: searchSelectFalIn 0.5s 1 linear;
 					-ms-animation: searchSelectFalIn 0.5s 1 linear;
 				}
+				.pops-${PopsType}-search-suggestion{
+					--search-suggestion-bg-color: #ffffff;
+					--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
+					--search-suggestion-item-color: #515a6e;
+					--search-suggestion-item-none-color: #8e8e8e;
+					--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
+				}
 				.pops-${PopsType}-search-suggestion{
 					border: initial;
 					overflow: initial;
@@ -142,10 +149,10 @@ export const PopsSearchSuggestion = {
 					overflow-x: hidden;
 					overflow-y: auto;
 					padding: 5px 0;
-					background-color: #fff;
+					background-color: var(--search-suggestion-bg-color);
 					box-sizing: border-box;
 					border-radius: 4px;
-					box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
+					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
 				}
 				/* 建议框在上面时 */
 				ul.pops-${PopsType}-search-suggestion-hint[data-top-reverse]{
@@ -159,7 +166,7 @@ export const PopsSearchSuggestion = {
 					padding: 7px;
 					margin: 0;
 					clear: both;
-					color: #515a6e;
+					color: var(--search-suggestion-item-color);
 					font-size: 14px;
 					list-style: none;
 					cursor: pointer;
@@ -171,10 +178,18 @@ export const PopsSearchSuggestion = {
 				ul.pops-${PopsType}-search-suggestion-hint li[data-none]{
 					text-align: center;
 					font-size: 12px;
-					color: #8e8e8e;
+					color: var(--search-suggestion-item-none-color);
 				}
 				ul.pops-${PopsType}-search-suggestion-hint li:hover{
-					background-color: rgba(0, 0, 0, .1);
+					background-color: var(--search-suggestion-item-hover-bg-color);
+				}
+
+				@media (prefers-color-scheme: dark){
+					.pops-${PopsType}-search-suggestion{
+						--search-suggestion-bg-color: #1d1e1f;
+						--search-suggestion-item-color: #cfd3d4;
+						--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
+					}
 				}
 				`;
 			},