From 86623b8c31b24ebb0bdb3eeec70e06a05ca00fd2 Mon Sep 17 00:00:00 2001 From: Cosmo Myzrail Gorynych Date: Tue, 6 Oct 2020 18:50:32 +1200 Subject: [PATCH] :sparkles: Forest UI theme An adaptation of https://github.com/sainnhe/forest-night-vscode by @sainnhe --- src/js/codeEditorHelpers.js | 1 + src/node_requires/monaco-themes/forest.json | 255 ++++++++++++++++++++ src/pug/index.pug | 2 + src/riotTags/license-panel.tag | 26 ++ src/riotTags/main-menu.tag | 6 + src/styl/themeForest.styl | 71 ++++++ 6 files changed, 361 insertions(+) create mode 100644 src/node_requires/monaco-themes/forest.json create mode 100644 src/styl/themeForest.styl diff --git a/src/js/codeEditorHelpers.js b/src/js/codeEditorHelpers.js index bfedfb1d0..8150dbcd2 100644 --- a/src/js/codeEditorHelpers.js +++ b/src/js/codeEditorHelpers.js @@ -228,6 +228,7 @@ Horizon: 'horizon', SpringStream: 'spring', LucasDracula: 'lucasdracula', + Forest: 'forest', default: 'tomorrow' }; const glob = require('./data/node_requires/glob'); diff --git a/src/node_requires/monaco-themes/forest.json b/src/node_requires/monaco-themes/forest.json new file mode 100644 index 000000000..778f6e29e --- /dev/null +++ b/src/node_requires/monaco-themes/forest.json @@ -0,0 +1,255 @@ +{ + "base": "vs-dark", + "inherit": true, + "rules": [{ + "token": "", + "background": "#323d43", + "foreground": "#D8CAAC" + }, { + "foreground": "868d80", + "token": "comment" + }, + { + "token": "delimiter", + "foreground": "#868D80" + }, + { + "token": "delimiter.bracket", + "foreground": "#D9BB80" + }, + { + "token": "delimiter.parenthesis", + "foreground": "#D9BB80" + }, + { + "foreground": "e39b7b", + "token": "keyword.operator.class" + }, + { + "foreground": "e39b7b", + "token": "constant.other" + }, + { + "foreground": "e39b7b", + "token": "source.php.embedded.line" + }, + { + "foreground": "e68183", + "token": "variable" + }, + { + "foreground": "e68183", + "token": "support.other.variable" + }, + { + "foreground": "e68183", + "token": "string.other.link" + }, + { + "foreground": "e68183", + "token": "string.regexp" + }, + { + "foreground": "e68183", + "token": "entity.name.tag" + }, + { + "foreground": "e68183", + "token": "entity.other.attribute-name" + }, + { + "foreground": "e68183", + "token": "meta.tag" + }, + { + "foreground": "e68183", + "token": "declaration.tag" + }, + { + "foreground": "e68183", + "token": "markup.deleted.git_gutter" + }, + { + "token": "number", + "foreground": "#d39bb6" + }, + { + "foreground": "#d39bb6", + "token": "constant" + }, + { + "foreground": "d39bb6", + "token": "constant.numeric" + }, + { + "foreground": "d39bb6", + "token": "constant.language" + }, + { + "foreground": "d39bb6", + "token": "support.constant" + }, + { + "foreground": "d39bb6", + "token": "constant.character" + }, + { + "foreground": "d39bb6", + "token": "variable.parameter" + }, + { + "foreground": "d39bb6", + "token": "punctuation.section.embedded" + }, + { + "foreground": "d39bb6", + "token": "keyword.other.unit" + }, + { + "foreground": "a7c080", + "token": "entity.name.class" + }, + { + "foreground": "a7c080", + "token": "entity.name.type.class" + }, + { + "foreground": "a7c080", + "token": "support.type" + }, + { + "foreground": "a7c080", + "token": "support.class" + }, + { + "foreground": "a7c080", + "token": "string" + }, + { + "foreground": "a7c080", + "token": "constant.other.symbol" + }, + { + "foreground": "a7c080", + "token": "entity.other.inherited-class" + }, + { + "foreground": "a7c080", + "token": "markup.heading" + }, + { + "foreground": "a7c080", + "token": "markup.inserted.git_gutter" + }, + { + "foreground": "e39b7b", + "token": "keyword.operator" + }, + { + "foreground": "e39b7b", + "token": "constant.other.color" + }, + { + "foreground": "a7c080", + "token": "entity.name.function" + }, + { + "foreground": "a7c080", + "token": "meta.function-call" + }, + { + "foreground": "a7c080", + "token": "support.function" + }, + { + "foreground": "a7c080", + "token": "keyword.other.special-method" + }, + { + "foreground": "a7c080", + "token": "meta.block-level" + }, + { + "foreground": "a7c080", + "token": "markup.changed.git_gutter" + }, + { + "foreground": "E39B7B", + "token": "keyword" + }, + { + "foreground": "e68183", + "token": "storage" + }, + { + "foreground": "e68183", + "token": "storage.type" + }, + { + "foreground": "e68183", + "background": "e68183", + "token": "invalid" + }, + { + "foreground": "e68183", + "background": "e68183", + "token": "invalid.deprecated" + }, + { + "background": "a7c080", + "token": "markup.inserted.diff" + }, + { + "background": "a7c080", + "token": "meta.diff.header.to-file" + }, + { + "background": "e68183", + "token": "markup.deleted.diff" + }, + { + "background": "e68183", + "token": "meta.diff.header.from-file" + }, + { + "foreground": "e39b7b", + "fontStyle": "italic", + "token": "meta.diff.range" + }, + { + "foreground": "#e68183", + "fontStyle": "italic", + "token": "pointsOfInterest" + }, + { + "foreground": "#e68183", + "token": "type" + } + ], + "colors": { + "editor.foreground": "#e68183", + "editor.background": "#323d43", + "editor.selectionBackground": "#505a60", + "editor.lineHighlightBackground": "#3c474d", + "editorCursor.foreground": "#d8caac", + "editorWhitespace.foreground": "#576268", + + "focusBorder": "#a7c080", + "contrastBorder": "#576268", + "contrastActiveBorder": "#a7c080", + "dropdown.background": "#323d43", + "menu.background": "#323d43", + "menu.separatorBackground": "#465258", + "editorWidget.background": "#323d43", + "editorWidget.border": "#465258", + "peekViewTitle.background": "#465258", + "peekViewResult.background": "#465258", + "peekViewEditor.background": "#465258", + "errorForeground": "#e68183", + "menu.selectionBackground": "#3c474dc0", + "menu.border": "#505a60", + + "textLink.foreground": "#a7c080", + "editorLink.activeForeground": "#a7c080" + } +} \ No newline at end of file diff --git a/src/pug/index.pug b/src/pug/index.pug index bdaa54e4f..68c469054 100644 --- a/src/pug/index.pug +++ b/src/pug/index.pug @@ -64,11 +64,13 @@ html const ambiance = require('./data/node_requires/monaco-themes/ambiance.json'); const spring = require('./data/node_requires/monaco-themes/spring.json'); const lucasdracula = require('./data/node_requires/monaco-themes/lucasdracula.json'); + const forest = require('./data/node_requires/monaco-themes/forest.json'); monaco.editor.defineTheme('tomorrow', tomorrow); monaco.editor.defineTheme('horizon', horizon); monaco.editor.defineTheme('ambiance', ambiance); monaco.editor.defineTheme('spring', spring); monaco.editor.defineTheme('lucasdracula', lucasdracula); + monaco.editor.defineTheme('forest', forest); // Extended typescript tokenizer const typescript = require('./data/node_requires/typescriptTokenizer.js').language; diff --git a/src/riotTags/license-panel.tag b/src/riotTags/license-panel.tag index 446cd5fcf..2a9dc525f 100644 --- a/src/riotTags/license-panel.tag +++ b/src/riotTags/license-panel.tag @@ -131,6 +131,32 @@ license-panel.modal.pad 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. + h2 Forest Night theme for VSCode + p. + Original theme made by Sainnhe Park; adapted for ct.js by Comigo. + pre + code. + MIT License + + Copyright (c) 2020 sainnhe + + 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. h2 Open Sans font by Steve Matteson p Released under #[a(href="http://www.apache.org/licenses/LICENSE-2.0") Apache License 2.0]. diff --git a/src/riotTags/main-menu.tag b/src/riotTags/main-menu.tag index 8fe6dd9f5..a2606b156 100644 --- a/src/riotTags/main-menu.tag +++ b/src/riotTags/main-menu.tag @@ -354,6 +354,12 @@ main-menu.flexcol } }, { type: 'separator' + }, { + label: window.languageJSON.menu.themeSpringStream || 'Forest', + icon: () => localStorage.UItheme === 'Forest' && 'check', + click: () => { + this.switchTheme('Forest'); + } }, { label: window.languageJSON.menu.themeNight || 'Night', icon: () => localStorage.UItheme === 'Night' && 'check', diff --git a/src/styl/themeForest.styl b/src/styl/themeForest.styl new file mode 100644 index 000000000..7e9d75550 --- /dev/null +++ b/src/styl/themeForest.styl @@ -0,0 +1,71 @@ +@charset "utf-8" + +foreground = #d8caac +text = #d8caac +background = #3c474d +backgroundDeeper = #323d43 +shadows = #000 + +borderPale = #505a60 +borderBright = #576268 + + +/* Frequently used properties */ +trans = + transition 0.35s ease all +transshort = + transition 0.15s ease all +shad = + box-shadow 0 0.1rem 0 rgba(shadows, 0.25) +shadamb = + box-shadow 0 0.25rem 0 rgba(shadows, 0.25) + +/* Base fonts for UI */ +fonts = font = 'Open Sans', sans-serif, serif +font-mono = mono = Iosevka, monospace + +br = 0 +iconsize = 1.5rem + +/* Colors used by this theme */ +act = #a7c080 +acttext = act +accent1 = #d8caac +accent2 = #83b6af +error = #e68183 +red = error +success = #a7c080 +green = success +warning = #d9bb80 +orange = warning + +theme = 'Forest' +themeDark = true + +@require 'hvost.styl' + +@require '3rdParty/*.styl' +@require './../../app/node_modules/highlight.js/styles/atom-one-dark.css' + +@require 'common.styl' +@require 'inputs.styl' +@require 'typography.styl' +@require 'confetti.styl' +@require 'buildingBlocks.styl' +@require 'tabs.styl' + +@require 'tags/**/*.styl' + +button, +input[type="button"], +input[type="submit"], +input[type="reset"], +.button, +.selectbox + &:hover, &.active, &:active, &.selected + color backgroundDeeper + svg + color backgroundDeeper + +#bg + background backgroundDeeper \ No newline at end of file