style: 添加主题.
This commit is contained in:
lijiahangmax
409
orion-ops-ui/src/views/host-ops/themes/terminal/1.html
Normal file
409
orion-ops-ui/src/views/host-ops/themes/terminal/1.html
Normal file
@@ -0,0 +1,409 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./xterm.css" />
|
||||
<script src="./theme.js"></script>
|
||||
<script src="./xterm.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="themes">
|
||||
|
||||
</div>
|
||||
<div id="terminal"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// 冰咖啡配色
|
||||
const frappe = {
|
||||
background: '#303446',
|
||||
foreground: '#c6d0f5',
|
||||
cursor: '#f2d5cf',
|
||||
cursorAccent: '#232634',
|
||||
selectionInactiveBackground: 'rgba(98, 104, 128, 0.30078125)',
|
||||
selectionBackground: '#303446',
|
||||
selectionForeground: '#A5ADCE',
|
||||
black: '#51576d',
|
||||
red: '#e78284',
|
||||
green: '#a6d189',
|
||||
yellow: '#e5c890',
|
||||
blue: '#8caaee',
|
||||
magenta: '#f4b8e4',
|
||||
cyan: '#81c8be',
|
||||
white: '#b5bfe2',
|
||||
brightBlack: '#626880',
|
||||
brightRed: '#e78284',
|
||||
brightGreen: '#a6d189',
|
||||
brightYellow: '#e5c890',
|
||||
brightBlue: '#8caaee',
|
||||
brightMagenta: '#f4b8e4',
|
||||
brightCyan: '#81c8be',
|
||||
brightWhite: '#a5adce'
|
||||
};
|
||||
|
||||
// 拿铁配色
|
||||
const latte = {
|
||||
background: '#eff1f5',
|
||||
foreground: '#4c4f69',
|
||||
cursor: '#dc8a78',
|
||||
cursorAccent: '#EFF1F5',
|
||||
selectionInactiveBackground: 'rgba(172, 176, 190, 0.30078125)',
|
||||
selectionForeground: '#EFF1F5',
|
||||
selectionBackground: '#6C6F85',
|
||||
black: '#5c5f77',
|
||||
red: '#d20f39',
|
||||
green: '#40a02b',
|
||||
yellow: '#df8e1d',
|
||||
blue: '#1e66f5',
|
||||
magenta: '#ea76cb',
|
||||
cyan: '#179299',
|
||||
white: '#acb0be',
|
||||
brightBlack: '#6c6f85',
|
||||
brightRed: '#d20f39',
|
||||
brightGreen: '#40a02b',
|
||||
brightYellow: '#df8e1d',
|
||||
brightBlue: '#1e66f5',
|
||||
brightMagenta: '#ea76cb',
|
||||
brightCyan: '#179299',
|
||||
brightWhite: '#bcc0cc'
|
||||
};
|
||||
|
||||
// 玛奇朵
|
||||
const macchiato = {
|
||||
background: '#24273a',
|
||||
foreground: '#cad3f5',
|
||||
cursor: '#f4dbd6',
|
||||
cursorAccent: '#181926',
|
||||
selectionInactiveBackground: 'rgba(91, 96, 120, 0.30078125)',
|
||||
selectionForeground: '#24273A',
|
||||
selectionBackground: '#A5ADCB',
|
||||
black: '#494d64',
|
||||
red: '#ed8796',
|
||||
green: '#a6da95',
|
||||
yellow: '#eed49f',
|
||||
blue: '#8aadf4',
|
||||
magenta: '#f5bde6',
|
||||
cyan: '#8bd5ca',
|
||||
white: '#b8c0e0',
|
||||
brightBlack: '#5b6078',
|
||||
brightRed: '#ed8796',
|
||||
brightGreen: '#a6da95',
|
||||
brightYellow: '#eed49f',
|
||||
brightBlue: '#8aadf4',
|
||||
brightMagenta: '#f5bde6',
|
||||
brightCyan: '#8bd5ca',
|
||||
brightWhite: '#a5adcb'
|
||||
};
|
||||
|
||||
// 摩卡配色
|
||||
const mocha = {
|
||||
background: '#1e1e2e',
|
||||
foreground: '#cdd6f4',
|
||||
cursor: '#f5e0dc',
|
||||
cursorAccent: '#11111B',
|
||||
selection: 'rgba(88, 91, 112, 0.30078125)',
|
||||
selectionForeground: '#1E1E2E',
|
||||
selectionBackground: '#A6ADC8',
|
||||
black: '#45475a',
|
||||
red: '#f38ba8',
|
||||
green: '#a6e3a1',
|
||||
yellow: '#f9e2af',
|
||||
blue: '#89b4fa',
|
||||
magenta: '#f5c2e7',
|
||||
cyan: '#94e2d5',
|
||||
white: '#bac2de',
|
||||
brightBlack: '#585b70',
|
||||
brightRed: '#f38ba8',
|
||||
brightGreen: '#a6e3a1',
|
||||
brightYellow: '#f9e2af',
|
||||
brightBlue: '#89b4fa',
|
||||
brightMagenta: '#f5c2e7',
|
||||
brightCyan: '#94e2d5',
|
||||
brightWhite: '#a6adc8',
|
||||
};
|
||||
|
||||
const a = {
|
||||
'iceberg-dark': {
|
||||
'cursor': '#c6c8d1',
|
||||
'brightYellow': '#e9b189',
|
||||
'brightPurple': '#ada0d3',
|
||||
'green': '#b4be82',
|
||||
'black': '#1e2132',
|
||||
'yellow': '#e2a478',
|
||||
'brightGreen': '#c0ca8e',
|
||||
'foreground': '#c6c8d1',
|
||||
'cyan': '#89b8c2',
|
||||
'brightRed': '#e98989',
|
||||
'brightWhite': '#d2d4de',
|
||||
'red': '#e27878',
|
||||
'brightCyan': '#95c4ce',
|
||||
'blue': '#84a0c6',
|
||||
'white': '#c6c8d1',
|
||||
'selection': '#c6c8d1',
|
||||
'background': '#161821',
|
||||
'name': 'iceberg-dark',
|
||||
'dark': true,
|
||||
'purple': '#a093c7',
|
||||
'brightBlue': '#91acd1', 'theme': 'iceberg-dark',
|
||||
'brightBlack': '#6b7089'
|
||||
},
|
||||
};
|
||||
|
||||
// 吸血鬼配色
|
||||
const dracula = {
|
||||
background: '#282a36',
|
||||
foreground: '#f8f8f2',
|
||||
selectionForeground: '#44475a',
|
||||
selectionBackground: '#50fa7b',
|
||||
cursor: '#f8f8f2',
|
||||
cursorAccent: '#282a36',
|
||||
black: '#21222c',
|
||||
red: '#ff5555',
|
||||
green: '#50fa7b',
|
||||
yellow: '#f1fa8c',
|
||||
blue: '#bd93f9',
|
||||
magenta: '#ff79c6',
|
||||
cyan: '#8be9fd',
|
||||
white: '#f8f8f2',
|
||||
brightBlack: '#6272a4',
|
||||
brightRed: '#ff6e6e',
|
||||
brightGreen: '#69ff94',
|
||||
brightYellow: '#ffffa5',
|
||||
brightBlue: '#d6acff',
|
||||
brightMagenta: '#ff92df',
|
||||
brightCyan: '#a4ffff',
|
||||
brightWhite: '#ffffff',
|
||||
};
|
||||
|
||||
const themes = {
|
||||
gray: {
|
||||
foreground: '#A9B7C6', background: '#2b2b2b', cursor: '#A9B7C6',
|
||||
|
||||
black: '#1b1b1b', brightBlack: '#626262',
|
||||
|
||||
red: '#bb5653', brightRed: '#bb5653',
|
||||
|
||||
green: '#909d62', brightGreen: '#909d62',
|
||||
|
||||
yellow: '#eac179', brightYellow: '#eac179',
|
||||
|
||||
blue: '#7da9c7', brightBlue: '#7da9c7',
|
||||
|
||||
magenta: '#b06597', brightMagenta: '#b06597',
|
||||
|
||||
cyan: '#8cdcd8', brightCyan: '#8cdcd8',
|
||||
|
||||
white: '#d8d8d8', brightWhite: '#f7f7f7'
|
||||
}, dark: {
|
||||
foreground: '#c7c7c7', background: '#000000', cursor: '#c7c7c7',
|
||||
|
||||
black: '#000000', brightBlack: '#676767',
|
||||
|
||||
red: '#c91b00', brightRed: '#ff6d67',
|
||||
|
||||
green: '#00c200', brightGreen: '#5ff967',
|
||||
|
||||
yellow: '#c7c400', brightYellow: '#fefb67',
|
||||
|
||||
blue: '#0225c7', brightBlue: '#6871ff',
|
||||
|
||||
magenta: '#c930c7', brightMagenta: '#ff76ff',
|
||||
|
||||
cyan: '#00c5c7', brightCyan: '#5ffdff',
|
||||
|
||||
white: '#c7c7c7', brightWhite: '#fffefe'
|
||||
}, ubuntu: {
|
||||
foreground: '#f1f1ef', background: '#3f0e2f', cursor: '#c7c7c7',
|
||||
|
||||
black: '#3c4345', brightBlack: '#676965',
|
||||
|
||||
red: '#d71e00', brightRed: '#f44135',
|
||||
|
||||
green: '#5da602', brightGreen: '#98e342',
|
||||
|
||||
yellow: '#cfad00', brightYellow: '#fcea60',
|
||||
|
||||
blue: '#417ab3', brightBlue: '#83afd8',
|
||||
|
||||
magenta: '#88658d', brightMagenta: '#bc93b6',
|
||||
|
||||
cyan: '#00a7aa', brightCyan: '#37e5e7',
|
||||
|
||||
white: '#dbded8', brightWhite: '#f1f1ef'
|
||||
}, light: {
|
||||
foreground: '#000000', background: '#fffefe', cursor: '#000000',
|
||||
|
||||
black: '#000000', brightBlack: '#676767',
|
||||
|
||||
red: '#c91b00', brightRed: '#ff6d67',
|
||||
|
||||
green: '#00c200', brightGreen: '#5ff967',
|
||||
|
||||
yellow: '#c7c400', brightYellow: '#fefb67',
|
||||
|
||||
blue: '#0225c7', brightBlue: '#6871ff',
|
||||
|
||||
magenta: '#c930c7', brightMagenta: '#ff76ff',
|
||||
|
||||
cyan: '#00c5c7', brightCyan: '#5ffdff',
|
||||
|
||||
white: '#c7c7c7', brightWhite: '#fffefe'
|
||||
}, solarized_light: {
|
||||
foreground: '#657b83', background: '#fdf6e3', cursor: '#657b83',
|
||||
|
||||
black: '#073642', brightBlack: '#002b36',
|
||||
|
||||
red: '#dc322f', brightRed: '#cb4b16',
|
||||
|
||||
green: '#859900', brightGreen: '#586e75',
|
||||
|
||||
yellow: '#b58900', brightYellow: '#657b83',
|
||||
|
||||
blue: '#268bd2', brightBlue: '#839496',
|
||||
|
||||
magenta: '#d33682', brightMagenta: '#6c71c4',
|
||||
|
||||
cyan: '#2aa198', brightCyan: '#93a1a1',
|
||||
|
||||
white: '#eee8d5', brightWhite: '#fdf6e3'
|
||||
}, material: {
|
||||
foreground: '#2e2d2c', background: '#eeeeee', cursor: '#2e2d2c',
|
||||
|
||||
black: '#2c2c2c', brightBlack: '#535353',
|
||||
|
||||
red: '#c52728', brightRed: '#ee524f',
|
||||
|
||||
green: '#558a2f', brightGreen: '#8bc24a',
|
||||
|
||||
yellow: '#f8a725', brightYellow: '#ffea3b',
|
||||
|
||||
blue: '#1564bf', brightBlue: '#64b4f5',
|
||||
|
||||
magenta: '#691e99', brightMagenta: '#b967c7',
|
||||
|
||||
cyan: '#00828e', brightCyan: '#26c5d9',
|
||||
|
||||
white: '#f2f1f1', brightWhite: '#e0dfdf'
|
||||
},
|
||||
frappe, latte, mocha, macchiato, dracula,
|
||||
...themes1
|
||||
};
|
||||
|
||||
var term = new Terminal({
|
||||
theme: dracula
|
||||
});
|
||||
|
||||
var doc = document.getElementById('themes');
|
||||
for (let themesKey in themes) {
|
||||
var buc = document.createElement('button');
|
||||
buc.innerHTML = themesKey;
|
||||
var dark = isDarkColor(themes[themesKey].background);
|
||||
if(dark) {
|
||||
buc.style.background = '#000';
|
||||
buc.style.color = '#FFF';
|
||||
}
|
||||
console.log(dark);
|
||||
buc.addEventListener('click', function () {
|
||||
console.log(themesKey);
|
||||
term.setOption('theme', themes[themesKey]);
|
||||
c();
|
||||
r();
|
||||
});
|
||||
doc.append(buc);
|
||||
}
|
||||
|
||||
function isDarkColor(hexColor) {
|
||||
// 将16进制颜色转换为RGB颜色
|
||||
var rgbColor = hexToRgb(hexColor);
|
||||
// 计算RGB颜色的亮度值
|
||||
var brightness = (rgbColor.r * 299 + rgbColor.g * 587 + rgbColor.b * 114) / 1000;
|
||||
// 判断亮度值是否小于128，小于128则为深色，大于等于128则为浅色
|
||||
if(brightness < 128) {
|
||||
return true; // 深色
|
||||
} else {
|
||||
return false; // 浅色
|
||||
}
|
||||
}
|
||||
|
||||
// 将16进制颜色转换为RGB颜色
|
||||
function hexToRgb(hexColor) {
|
||||
// 去除#号
|
||||
hexColor = hexColor.replace('#', '');
|
||||
|
||||
// 将16进制颜色转换为RGB颜色
|
||||
var r = parseInt(hexColor.substring(0, 2), 16);
|
||||
var g = parseInt(hexColor.substring(2, 4), 16);
|
||||
var b = parseInt(hexColor.substring(4, 6), 16);
|
||||
|
||||
return { r: r, g: g, b: b };
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
https://draculatheme.com/windows-terminal
|
||||
https://github.com/morhetz/gruvbox
|
||||
https://github.com/dracula/dracula-theme
|
||||
|
||||
https://github.com/mbadolato/iTerm2-Color-Schemes
|
||||
|
||||
public static void main(String[] args) {
|
||||
List<File> files = Files1.listFiles("D:\\Work\\idea-project\\iTerm2-Color-Schemes\\vhs");
|
||||
HashMap<String, Object> maps = new HashMap<>();
|
||||
files.stream().forEach(f -> {
|
||||
String fileName = f.getName();
|
||||
String theme = fileName.substring(0, fileName.lastIndexOf("."));
|
||||
String field = theme.replaceAll(" ", "_");
|
||||
byte[] bytes = FileReaders.readAllBytes(f);
|
||||
JSONObject themeJson = JSONObject.parseObject(new String(bytes));
|
||||
themeJson.put("theme", theme);
|
||||
themeJson.put("dark", true);
|
||||
maps.put(field, themeJson);
|
||||
});
|
||||
System.out.println(JSON.toJSONString(maps));
|
||||
}
|
||||
|
||||
|
||||
*/
|
||||
|
||||
term.open(document.getElementById('terminal'));
|
||||
|
||||
function w(s) {
|
||||
term.write(s);
|
||||
}
|
||||
|
||||
function wc(s) {
|
||||
term.reset();
|
||||
term.write(s);
|
||||
}
|
||||
|
||||
function c() {
|
||||
term.reset();
|
||||
}
|
||||
|
||||
function r() {
|
||||
for (let i = 0; i < 9; i++) {
|
||||
term.write('[' + (30 + i) + 'm');
|
||||
term.write(i + ' this visibility cellpadding capitalize separate getElementById');
|
||||
term.write('[0m\r\n');
|
||||
}
|
||||
for (let i = 0; i < 9; i++) {
|
||||
term.write('[' + (90 + i) + 'm');
|
||||
term.write(i + ' this visibility cellpadding capitalize separate getElementById');
|
||||
term.write('[0m\r\n');
|
||||
}
|
||||
for (let i = 0; i < 9; i++) {
|
||||
term.write('[' + (40 + i) + 'm');
|
||||
term.write(i + ' this visibility cellpadding capitalize separate getElementById');
|
||||
term.write('[0m\r\n');
|
||||
}
|
||||
for (let i = 0; i < 9; i++) {
|
||||
term.write('[' + (100 + i) + 'm');
|
||||
term.write(i + ' this visibility cellpadding capitalize separate getElementById');
|
||||
term.write('[0m\r\n');
|
||||
}
|
||||
}
|
||||
|
||||
r();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
7776
orion-ops-ui/src/views/host-ops/themes/terminal/theme.js
Normal file
7776
orion-ops-ui/src/views/host-ops/themes/terminal/theme.js
Normal file
File diff suppressed because it is too large
Load Diff
174
orion-ops-ui/src/views/host-ops/themes/terminal/xterm.css
Normal file
174
orion-ops-ui/src/views/host-ops/themes/terminal/xterm.css
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
|
||||
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
|
||||
* https://github.com/chjj/term.js
|
||||
* @license MIT
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*
|
||||
* Originally forked from (with the author's permission):
|
||||
* Fabrice Bellard's javascript vt100 for jslinux:
|
||||
* http://bellard.org/jslinux/
|
||||
* Copyright (c) 2011 Fabrice Bellard
|
||||
* The original design remains. The terminal itself
|
||||
* has been extended to include xterm CSI codes, among
|
||||
* other features.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Default styles for xterm.js
|
||||
*/
|
||||
|
||||
.xterm {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.xterm.focus,
|
||||
.xterm:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.xterm .xterm-helpers {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/**
|
||||
* The z-index of the helpers must be higher than the canvases in order for
|
||||
* IMEs to appear on top.
|
||||
*/
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.xterm .xterm-helper-textarea {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
/* Move textarea out of the screen to the far left, so that the cursor is not visible */
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: -9999em;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -5;
|
||||
/** Prevent wrapping so the IME appears against the textarea at the correct position */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.xterm .composition-view {
|
||||
/* TODO: Composition position got messed up somewhere */
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
display: none;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.xterm .composition-view.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.xterm .xterm-viewport {
|
||||
/* On OS X this is required in order for the scroll bar to appear fully opaque */
|
||||
background-color: #000;
|
||||
overflow-y: scroll;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.xterm .xterm-screen {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.xterm .xterm-screen canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.xterm .xterm-scroll-area {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.xterm-char-measure-element {
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -9999em;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.xterm {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.xterm.enable-mouse-events {
|
||||
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.xterm.xterm-cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xterm.column-select.focus {
|
||||
/* Column selection mode */
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.xterm .xterm-accessibility,
|
||||
.xterm .xterm-message {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.xterm .live-region {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xterm-dim {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.xterm-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.xterm-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
2
orion-ops-ui/src/views/host-ops/themes/terminal/xterm.js
Normal file
2
orion-ops-ui/src/views/host-ops/themes/terminal/xterm.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user