diff --git a/public/fonts/firacode-bold.woff2 b/public/fonts/firacode-bold.woff2 new file mode 100644 index 00000000..349dc36a Binary files /dev/null and b/public/fonts/firacode-bold.woff2 differ diff --git a/public/fonts/firacode-regular.woff2 b/public/fonts/firacode-regular.woff2 new file mode 100644 index 00000000..f8b63fb0 Binary files /dev/null and b/public/fonts/firacode-regular.woff2 differ diff --git a/public/themes/term-default.css b/public/themes/term-default.css index 2a868253..9e3fbc31 100644 --- a/public/themes/term-default.css +++ b/public/themes/term-default.css @@ -3,7 +3,7 @@ :root { /* - * term colors (16 + 5) form the base terminal theme + * term colors (16 + 6) form the base terminal theme * for consistency these colors should be used by plugins/applications */ --term-black: #000000; @@ -27,5 +27,6 @@ --term-cmdtext: #ffffff; --term-foreground: #d3d7cf; --term-background: #000000; - --term-selection-background: #ffffff40; + --term-selection-background: #ffffff90; + --term-cursor-accent: #000000; } diff --git a/public/themes/term-light.css b/public/themes/term-light.css index 479a6a34..d17bc0ee 100644 --- a/public/themes/term-light.css +++ b/public/themes/term-light.css @@ -6,5 +6,6 @@ --term-foreground: #000000; --term-background: #fefefe; --term-cmdtext: #000000; - --term-selection-background: #00000018; + --term-selection-background: #00000040; + --term-cursor-accent: #000000; } diff --git a/src/app/clientsettings/clientsettings.tsx b/src/app/clientsettings/clientsettings.tsx index 17f4f811..764bc993 100644 --- a/src/app/clientsettings/clientsettings.tsx +++ b/src/app/clientsettings/clientsettings.tsx @@ -87,6 +87,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove const availableFontFamilies: DropdownItem[] = []; availableFontFamilies.push({ label: "JetBrains Mono", value: "JetBrains Mono" }); availableFontFamilies.push({ label: "Hack", value: "Hack" }); + availableFontFamilies.push({ label: "Fira Code", value: "Fira Code" }); return availableFontFamilies; } diff --git a/src/plugins/image/image.less b/src/plugins/image/image.less index 8ffe1885..24082908 100644 --- a/src/plugins/image/image.less +++ b/src/plugins/image/image.less @@ -1,4 +1,10 @@ .image-renderer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding-top: var(--termpad); + img { display: block; } diff --git a/src/plugins/terminal/term.ts b/src/plugins/terminal/term.ts index e2001152..dc0ed50b 100644 --- a/src/plugins/terminal/term.ts +++ b/src/plugins/terminal/term.ts @@ -58,6 +58,9 @@ function getThemeFromCSSVars(): ITheme { theme.brightCyan = rootStyle.getPropertyValue("--term-bright-cyan"); theme.brightWhite = rootStyle.getPropertyValue("--term-bright-white"); theme.selectionBackground = rootStyle.getPropertyValue("--term-selection-background"); + theme.selectionInactiveBackground = rootStyle.getPropertyValue("--term-selection-background"); + theme.cursor = rootStyle.getPropertyValue("--term-selection-background"); + theme.cursorAccent = rootStyle.getPropertyValue("--term-cursor-accent"); return theme; } diff --git a/src/util/fontutil.ts b/src/util/fontutil.ts index ea91e85f..848d0090 100644 --- a/src/util/fontutil.ts +++ b/src/util/fontutil.ts @@ -5,6 +5,7 @@ let isJetBrainsMonoLoaded = false; let isLatoFontLoaded = false; let isHackFontLoaded = false; let isBaseFontsLoaded = false; +let isFiraCodeLoaded = false; function addToFontFaceSet(fontFaceSet: FontFaceSet, fontFace: FontFace) { // any cast to work around typing issue @@ -55,6 +56,25 @@ function loadLatoFont() { latoFontBold.load(); } +function loadFiraCodeFont() { + if (isFiraCodeLoaded) { + return; + } + isFiraCodeLoaded = true; + let firaCodeRegular = new FontFace("Fira Code", "url('public/fonts/firacode-regular.woff2')", { + style: "normal", + weight: "400", + }); + let firaCodeBold = new FontFace("Fira Code", "url('public/fonts/firacode-bold.woff2')", { + style: "normal", + weight: "700", + }); + addToFontFaceSet(document.fonts, firaCodeRegular); + addToFontFaceSet(document.fonts, firaCodeBold); + firaCodeRegular.load(); + firaCodeBold.load(); +} + function loadHackFont() { if (isHackFontLoaded) { return; @@ -104,6 +124,7 @@ function loadFonts() { loadLatoFont(); loadJetBrainsMonoFont(); loadHackFont(); + loadFiraCodeFont(); } export { loadFonts };