diff --git a/_debug_replacements.php b/_debug_replacements.php
index 56fad84..1cb41a4 100644
--- a/_debug_replacements.php
+++ b/_debug_replacements.php
@@ -90,5 +90,5 @@ return [
'uart_stopbits' => 1,
'uart_parity' => 2,
- 'theme' => 0,
+ 'theme' => 7,
];
diff --git a/js/index.js b/js/index.js
index c65b387..24d776e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -12,3 +12,5 @@ const { qs } = require('./utils')
window.termInit = require('./term')
window.$ = $
window.qs = qs
+
+window.themes = require('./themes')
diff --git a/js/themes.js b/js/themes.js
index d54a81e..f957b06 100644
--- a/js/themes.js
+++ b/js/themes.js
@@ -1,10 +1,10 @@
-exports.themes = [
+const themes = exports.themes = [
[ // Tango
'#111213', '#CC0000', '#4E9A06', '#C4A000', '#3465A4', '#75507B', '#06989A', '#D3D7CF',
'#555753', '#EF2929', '#8AE234', '#FCE94F', '#729FCF', '#AD7FA8', '#34E2E2', '#EEEEEC'
],
- [ // Linux
+ [ // Linux (CGA)
'#000000', '#aa0000', '#00aa00', '#aa5500', '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa',
'#555555', '#ff5555', '#55ff55', '#ffff55', '#5555ff', '#ff55ff', '#55ffff', '#ffffff'
],
@@ -23,6 +23,22 @@ exports.themes = [
[ // Solarized
'#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5',
'#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3'
+ ],
+ [ // CGA NTSC
+ '#000000', '#69001A', '#117800', '#769100', '#1A00A6', '#8019AB', '#289E76', '#A4A4A4',
+ '#484848', '#C54E76', '#6DD441', '#D2ED46', '#765BFF', '#DC75FF', '#84FAD2', '#FFFFFF'
+ ],
+ [ // ZX Spectrum
+ '#000000', '#aa0000', '#00aa00', '#aaaa00', '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa',
+ '#000000', '#ff0000', '#00FF00', '#ffff00', '#0000ff', '#ff00ff', '#00ffff', '#ffffff'
+ ],
+ [ // Apple II
+ '#000000', '#722640', '#0E5940', '#808080', '#40337F', '#E434FE', '#1B9AFE', '#BFB3FF',
+ '#404C00', '#E46501', '#1BCB01', '#BFCC80', '#808080', '#F1A6BF', '#8DD9BF', '#ffffff'
+ ],
+ [ // Commodore
+ '#000000', '#8D3E37', '#55A049', '#AAB95D', '#40318D', '#80348B', '#72C1C8', '#D59F74',
+ '#8B5429', '#B86962', '#94E089', '#FFFFB2', '#8071CC', '#AA5FB6', '#87D6DD', '#ffffff'
]
]
@@ -55,3 +71,14 @@ exports.buildColorTable = function () {
return colorTable256
}
+
+exports.themePreview = function (n) {
+ document.querySelectorAll('[data-fg]').forEach((elem) => {
+ let shade = +elem.dataset.fg
+ elem.style.color = themes[n][shade]
+ })
+ document.querySelectorAll('[data-bg]').forEach((elem) => {
+ let shade = +elem.dataset.bg
+ elem.style.backgroundColor = themes[n][shade]
+ })
+}
diff --git a/pages/cfg_term.php b/pages/cfg_term.php
index e4dba6b..14110ec 100644
--- a/pages/cfg_term.php
+++ b/pages/cfg_term.php
@@ -13,63 +13,66 @@
= tr("term.theme") ?>
Tango
- Linux
+ Linux (CGA)
XTerm
Rxvt
Ambience
Solarized
+ CGA NTSC
+ ZX Spectrum
+ Apple II
+ Commodore
- 30 31 32 33 34 35 36 37
+ 30 31 32 33 34 35 36 37
- 90 91 92 93 94 95 96 97
+ 90 91 92 93 94 95 96 97
- 40 41 42 43 44 45 46 47
+ 40 41 42 43 44 45 46 47
- 100 101 102 103 104 105 106 107
+ 100 101 102 103 104 105 106 107
-
+
= tr("term.example") ?>
@@ -208,13 +211,9 @@
function showColor() {
var ex = qs('#color-example');
- ex.className = '';
- ex.classList.add('fg'+$('#default_fg').val());
- ex.classList.add('bg'+$('#default_bg').val());
- var th = $('#theme').val();
- $('.color-preview').forEach(function(e) {
- e.className = 'Row color-preview theme-'+th;
- });
+ ex.dataset.fg = +$('#default_fg').val();
+ ex.dataset.bg = +$('#default_bg').val();
+ themes.themePreview(+$('#theme').val())
}
showColor();
diff --git a/pages/help.php b/pages/help.php
index 12bbb45..e577a72 100644
--- a/pages/help.php
+++ b/pages/help.php
@@ -22,4 +22,7 @@
function hpfold(yes) {
$('.fold').toggleClass('expanded', !!yes);
}
+
+ // show theme colors - but this is a static page, so we don't know the current theme.
+ themes.themePreview(1)
diff --git a/pages/help/sgr_colors.php b/pages/help/sgr_colors.php
index b9a0e55..0d9dd5a 100644
--- a/pages/help/sgr_colors.php
+++ b/pages/help/sgr_colors.php
@@ -1,5 +1,5 @@
-
+
Commands: Color SGR
@@ -19,49 +19,49 @@
Foreground colors
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
+ 30 31 32 33 34 35 36 37
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
+ 90 91 92 93 94 95 96 97
Background colors
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
+ 40 41 42 43 44 45 46 47
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
+ 100 101 102 103 104 105 106 107
256-color palette
@@ -69,13 +69,40 @@
ESPTerm supports in total 256 standard colors. The dark and bright basic colors are
numbered 0-7 and 8-15. To use colors higher than 15 (or 0-15 using this simpler numbering),
- send `CSI 38 ; 5 ; n m`, where `n` is the color to set. Use 48 for background colors.
+ send `CSI 38 ; 5 ; n m`, where `n` is the color to set. Use `CSI 48 ; 5 ; n m` for background colors.
-
- For a fererence of all 256 shades please refer to
- jonasjacek.github.io/colors
- or look it up elsewhere.
-
+
+
+
+
diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss
index bb781c9..6f80d86 100755
--- a/sass/pages/_term.scss
+++ b/sass/pages/_term.scss
@@ -203,78 +203,6 @@ body.term {
}
}
-// Tango
-.theme-0 {
- $term-colors:
- #111213, #CC0000, #4E9A06, #C4A000, #3465A4, #75507B, #06989A, #D3D7CF,
- #555753, #EF2929, #8AE234, #FCE94F, #729FCF, #AD7FA8, #34E2E2, #EEEEEC;
- @for $i from 1 through length($term-colors) {
- $c: nth($term-colors, $i);
- .fg#{$i - 1} { color: $c; }
- .bg#{$i - 1} { background-color: $c; }
- }
-}
-
-// Linux
-.theme-1 {
- $term-colors:
- #000000, #aa0000, #00aa00, #aa5500, #0000aa, #aa00aa, #00aaaa, #aaaaaa,
- #555555, #ff5555, #55ff55, #ffff55, #5555ff, #ff55ff, #55ffff, #ffffff;
- @for $i from 1 through length($term-colors) {
- $c: nth($term-colors, $i);
- .fg#{$i - 1} { color: $c; }
- .bg#{$i - 1} { background-color: $c; }
- }
-}
-
-// xterm
-.theme-2 {
- $term-colors:
- #000000, #cd0000, #00cd00, #cdcd00, #0000ee, #cd00cd, #00cdcd, #e5e5e5,
- #7f7f7f, #ff0000, #00ff00, #ffff00, #5c5cff, #ff00ff, #00ffff, #ffffff;
- @for $i from 1 through length($term-colors) {
- $c: nth($term-colors, $i);
- .fg#{$i - 1} { color: $c; }
- .bg#{$i - 1} { background-color: $c; }
- }
-}
-
-// rxvt
-.theme-3 {
- $term-colors:
- #000000, #cd0000, #00cd00, #cdcd00, #0000cd, #cd00cd, #00cdcd, #faebd7,
- #404040, #ff0000, #00ff00, #ffff00, #0000ff, #ff00ff, #00ffff, #ffffff;
- @for $i from 1 through length($term-colors) {
- $c: nth($term-colors, $i);
- .fg#{$i - 1} { color: $c; }
- .bg#{$i - 1} { background-color: $c; }
- }
-}
-
-// Ambience
-.theme-4 {
- $term-colors:
- #2e3436, #cc0000, #4e9a06, #c4a000, #3465a4, #75507b, #06989a, #d3d7cf,
- #555753, #ef2929, #8ae234, #fce94f, #729fcf, #ad7fa8, #34e2e2, #eeeeec;
- @for $i from 1 through length($term-colors) {
- $c: nth($term-colors, $i);
- .fg#{$i - 1} { color: $c; }
- .bg#{$i - 1} { background-color: $c; }
- }
-}
-
-// Solarized
-.theme-5 {
- $term-colors:
- #073642, #dc322f, #859900, #b58900, #268bd2, #d33682, #2aa198, #eee8d5,
- #002b36, #cb4b16, #586e75, #657b83, #839496, #6c71c4, #93a1a1, #fdf6e3;
- @for $i from 1 through length($term-colors) {
- $c: nth($term-colors, $i);
- .fg#{$i - 1} { color: $c; }
- .bg#{$i - 1} { background-color: $c; }
- }
-}
-
// Attributes
.bold {
font-weight: bold !important;