@zhangqingcq/plug-r-qw/src/style/common/vueJsonViewerTheme.less

A JS lib base on Vue and View-design, you can achieve some complex functions with simple code after install this lib.

@import './color';

.my-awesome-json-theme {
	background: #363e4f;
	white-space: nowrap;
	color: #fff;
	font-size: 14px;
	font-family: Consolas, Menlo, Courier, monospace;

	.jv-ellipsis {
		color: @warningColor;
		background-color: #808695;
		display: inline-block;
		line-height: 0.9;
		font-size: 0.9em;
		padding: 0 4px 2px 4px;
		border-radius: 3px;
		vertical-align: 0;
		cursor: pointer;
		user-select: none;
	}
	.jv-button {
		color: #49b3ff;
	}
	.jv-key {
		color: @jsonViewKeyColor;
	}
	.jv-item {
		&.jv-array {
			color: @jsonViewKeyColor;
		}
		&.jv-boolean {
			color: #fc1e70;
		}
		&.jv-function {
			color: #067bca;
		}
		&.jv-number {
			color: #fc1e70;
		}
		&.jv-object {
			color: @jsonViewKeyColor;
		}
		&.jv-undefined {
			color: #e08331;
		}
		&.jv-string {
			color: #42b983;
			word-break: break-word;
			white-space: normal;
		}
	}
	.jv-code {
		.jv-toggle {
			&:before {
				padding: 0 2px;
				border-radius: 2px;
			}
			&:hover {
				&:before {
					background: #eee;
				}
			}
		}
	}
}