From afd0f57ce442f99c05585123960b4860447509ad Mon Sep 17 00:00:00 2001 From: Nik Rolls Date: Sun, 4 Feb 2018 15:56:47 +1300 Subject: [PATCH] Move to using WebExtension APIs for CSS injection This is to prevent it being blocked on sites with CSP headers. --- gulpfile.js | 1 - src/js/background.js | 6 +- src/js/content.js | 23 ++-- src/js/lib/browser.js | 3 + src/js/lib/theme-switcher.js | 39 +++---- src/js/lib/themes.js | 108 +++++++------------ src/manifest.json | 2 +- src/sass/content.scss | 2 + src/sass/themes/_base.scss | 21 ---- src/sass/themes/_example.scss | 22 ++++ src/sass/themes/all.scss | 36 +++++++ src/sass/themes/ambiance.scss | 82 +++++++------- src/sass/themes/chaos.scss | 62 +++++------ src/sass/themes/chrome.scss | 58 +++++----- src/sass/themes/clouds-midnight.scss | 58 +++++----- src/sass/themes/clouds.scss | 58 +++++----- src/sass/themes/cobalt.scss | 54 +++++----- src/sass/themes/crimson-editor.scss | 58 +++++----- src/sass/themes/dawn.scss | 54 +++++----- src/sass/themes/dreamweaver.scss | 58 +++++----- src/sass/themes/eclipse.scss | 60 +++++------ src/sass/themes/github.scss | 58 +++++----- src/sass/themes/gob.scss | 54 +++++----- src/sass/themes/gruvbox.scss | 48 ++++----- src/sass/themes/idle-fingers.scss | 54 +++++----- src/sass/themes/iplastic.scss | 58 +++++----- src/sass/themes/katzen-milch.scss | 86 +++++++-------- src/sass/themes/kr-theme.scss | 54 +++++----- src/sass/themes/kuroir.scss | 54 +++++----- src/sass/themes/merbivore-soft.scss | 60 +++++------ src/sass/themes/merbivore.scss | 60 +++++------ src/sass/themes/mono-industrial.scss | 62 +++++------ src/sass/themes/monokai.scss | 52 ++++----- src/sass/themes/pastel-on-dark.scss | 58 +++++----- src/sass/themes/solarized-dark.scss | 60 +++++------ src/sass/themes/solarized-light.scss | 58 +++++----- src/sass/themes/sql-server.scss | 50 ++++----- src/sass/themes/terminal.scss | 52 ++++----- src/sass/themes/textmate.scss | 58 +++++----- src/sass/themes/tomorrow-night-blue.scss | 52 ++++----- src/sass/themes/tomorrow-night-bright.scss | 52 ++++----- src/sass/themes/tomorrow-night-eighties.scss | 52 ++++----- src/sass/themes/tomorrow-night.scss | 52 ++++----- src/sass/themes/tomorrow.scss | 52 ++++----- src/sass/themes/twilight.scss | 54 +++++----- src/sass/themes/vibrant-ink.scss | 58 +++++----- src/sass/themes/xcode.scss | 52 ++++----- 47 files changed, 1160 insertions(+), 1165 deletions(-) delete mode 100644 src/sass/themes/_base.scss create mode 100644 src/sass/themes/_example.scss create mode 100644 src/sass/themes/all.scss diff --git a/gulpfile.js b/gulpfile.js index 1bca19a..4891edb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -47,7 +47,6 @@ gulp.task('build:dist', ['configs', 'icons', 'scripts:dist']); gulp.task('release', ['build:dist'], () => { const manifest = require(`${BUILD_DIR}/manifest.json`); - return gulp.src(`${BUILD_DIR}/**/*`) .pipe(zip(`json-formatter-${manifest.version}.zip`)) .pipe(gulp.dest(RELEASE_DIR)); diff --git a/src/js/background.js b/src/js/background.js index bc7cd48..760132f 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -12,6 +12,7 @@ browser.storage.local.set({appVersion: browser.runtime.getManifest().version}); listen((port, msg) => { let jsonpFunctionName = null; let validJsonText; + let tab = port.sender.tab; if (msg.type === 'SENDING TEXT') { // Try to parse as JSON @@ -79,9 +80,10 @@ listen((port, msg) => { } // If still running, we now have obj, which is valid JSON. + browser.tabs.insertCSS(tab.id, {code: require('../sass/content.scss')}); // Ensure it's not a number or string (technically valid JSON, but no point prettifying it) - if (typeof obj !== 'object' && typeof obj !== 'array') { + if (typeof obj !== 'object') { port.postMessage(['NOT JSON', 'technically JSON but not an object or array']); port.disconnect(); return; @@ -101,5 +103,7 @@ listen((port, msg) => { browser.storage.sync.set({theme: msg.theme}, () => { port.postMessage({type: 'STORED THEME', themeName: msg.theme}); }); + } else if (msg.type === 'INSERT CSS') { + browser.tabs.insertCSS(tab.id, {code: msg.code}); } }); diff --git a/src/js/content.js b/src/js/content.js index ebb429f..b9b7a1d 100644 --- a/src/js/content.js +++ b/src/js/content.js @@ -1,5 +1,6 @@ import { connect } from './lib/messaging'; import { enableTheming } from './lib/theme-switcher'; +import browser from "./lib/browser"; let jfContent; let pre; @@ -32,13 +33,6 @@ port.onMessage.addListener(function(message) { // Clear the slowAnalysisTimeout (if the BG worker had taken longer than 1s to respond with an answer to whether or not this is JSON, then it would have fired, unhiding the PRE... But now that we know it's JSON, we can clear this timeout, ensuring the PRE stays hidden.) clearTimeout(slowAnalysisTimeout); - // Insert CSS - jfStyleEl = document.createElement('style'); - jfStyleEl.id = 'jfStyleEl'; - document.head.appendChild(jfStyleEl); - - jfStyleEl.insertAdjacentHTML('beforeend', require('../sass/content.scss')); - jfContent.innerHTML = '

Formatting...

'; const formattingMsg = document.getElementById('formattingMsg'); @@ -57,11 +51,14 @@ port.onMessage.addListener(function(message) { pre.hidden = true; // Export parsed JSON for easy access in console + // Only works if target page's CSP allows it setTimeout(function() { const script = document.createElement('script'); - script.innerHTML = `window.json=${message[2]};`; + script.innerHTML = ` + window.json=${message[2]}; + console.info("JSON Formatter: Type 'json' to inspect."); + `; document.head.appendChild(script); - console.info(`JSON Formatter: Type 'json' to inspect.`); }, 100); // Attach event handlers @@ -203,10 +200,10 @@ function collapse(elements) { // Generate comment text eg '4 items' const comment = count + (count === 1 ? ' item' : ' items'); // Add CSS that targets it - jfStyleEl.insertAdjacentHTML( - 'beforeend', - `\n#keyValueOrValue${lastKeyValueOrValueIdGiven}.collapsed:after{content:" // ${comment}"}` - ); + port.postMessage({ + type: 'INSERT CSS', + code: `#keyValueOrValue${lastKeyValueOrValueIdGiven}.collapsed:after{content:" // ${comment}"}` + }); } } } diff --git a/src/js/lib/browser.js b/src/js/lib/browser.js index a8322e9..e7dc90f 100644 --- a/src/js/lib/browser.js +++ b/src/js/lib/browser.js @@ -6,6 +6,9 @@ export default { }, get storage() { return getBrowser().storage; + }, + get tabs() { + return getBrowser().tabs; } }; diff --git a/src/js/lib/theme-switcher.js b/src/js/lib/theme-switcher.js index aae2210..99412ae 100644 --- a/src/js/lib/theme-switcher.js +++ b/src/js/lib/theme-switcher.js @@ -1,8 +1,8 @@ -import { themes } from './themes'; -import { connect } from "./messaging"; +import {themes} from './themes'; +import {connect} from "./messaging"; const transitionStyles = require('../../sass/transition.scss'); -let port, themeStyleElement, transitionStyleElement; +let port, transitionStylesInject; export function enableTheming() { port = connect(); @@ -68,36 +68,25 @@ function generateOptionsHTML() { function switchToTheme(themeName) { themeName = themes[themeName] ? themeName : themes.default; - const theme = themes[themeName]; - const element = getThemeElement(); - - if (element.innerHTML) { - insertTransitionThemes(); - } - if (element.innerHTML !== theme.styles) { - element.innerHTML = theme.styles; - } + document.body.className = `theme-${themeName}`; const themeSelect = getThemeSelect(); const themeSelectOption = themeSelect && themeSelect.querySelector(`[value="${themeName}"]`); if (themeSelectOption) { themeSelectOption.selected = true; } -} - -function getThemeElement() { - if (!themeStyleElement) { - themeStyleElement = document.createElement('style'); - document.head.appendChild(themeStyleElement); - } - return themeStyleElement; + insertTransitionStylesOnce(); } -function insertTransitionThemes() { - if (!transitionStyleElement) { - transitionStyleElement = document.createElement('style'); - transitionStyleElement.innerHTML = transitionStyles; - document.head.appendChild(transitionStyleElement); +function insertTransitionStylesOnce() { + if (!transitionStylesInject) { + transitionStylesInject = true; + window.setTimeout(() => { + port.postMessage({ + type: 'INSERT CSS', + code: transitionStyles + }); + }, 1000); } } diff --git a/src/js/lib/themes.js b/src/js/lib/themes.js index 63186ab..0003e76 100644 --- a/src/js/lib/themes.js +++ b/src/js/lib/themes.js @@ -2,182 +2,146 @@ export const themes = { default: 'dawn', chrome: { name: 'Chrome', - type: 'Light', - styles: require('../../sass/themes/chrome.scss') + type: 'Light' }, clouds: { name: 'Clouds', - type: 'Light', - styles: require('../../sass/themes/clouds.scss') + type: 'Light' }, crimsonEditor: { name: 'Crimson Editor', - type: 'Light', - styles: require('../../sass/themes/crimson-editor.scss') + type: 'Light' }, dawn: { name: 'Dawn', - type: 'Light', - styles: require('../../sass/themes/dawn.scss') + type: 'Light' }, dreamweaver: { name: 'Dreamweaver', - type: 'Light', - styles: require('../../sass/themes/dreamweaver.scss') + type: 'Light' }, eclipse: { name: 'Eclipse', - type: 'Light', - styles: require('../../sass/themes/eclipse.scss') + type: 'Light' }, github: { name: 'GitHub', - type: 'Light', - styles: require('../../sass/themes/github.scss') + type: 'Light' }, iplastic: { name: 'iPlastic', - type: 'Light', - styles: require('../../sass/themes/iplastic.scss') + type: 'Light' }, katzenMilch: { name: 'KatzenMilch', - type: 'Light', - styles: require('../../sass/themes/katzen-milch.scss') + type: 'Light' }, kuroir: { name: 'Kuroir', - type: 'Light', - styles: require('../../sass/themes/kuroir.scss') + type: 'Light' }, solarizedLight: { name: 'Solarized Light', - type: 'Light', - styles: require('../../sass/themes/solarized-light.scss') + type: 'Light' }, sqlServer: { name: 'SQL Server', - type: 'Light', - styles: require('../../sass/themes/sql-server.scss') + type: 'Light' }, textmate: { name: 'TextMate', - type: 'Light', - styles: require('../../sass/themes/textmate.scss') + type: 'Light' }, tomorrow: { name: 'Tomorrow', - type: 'Light', - styles: require('../../sass/themes/tomorrow.scss') + type: 'Light' }, xcode: { name: 'XCode', - type: 'Light', - styles: require('../../sass/themes/xcode.scss') + type: 'Light' }, ambiance: { name: 'Ambiance', - type: 'Dark', - styles: require('../../sass/themes/ambiance.scss') + type: 'Dark' }, chaos: { name: 'Chaos', - type: 'Dark', - styles: require('../../sass/themes/chaos.scss') + type: 'Dark' }, cloudsMidnight: { name: 'Clouds Midnight', - type: 'Dark', - styles: require('../../sass/themes/clouds-midnight.scss') + type: 'Dark' }, cobalt: { name: 'Cobalt', - type: 'Dark', - styles: require('../../sass/themes/cobalt.scss') + type: 'Dark' }, gob: { name: 'Gob', - type: 'Dark', - styles: require('../../sass/themes/gob.scss') + type: 'Dark' }, gruvbox: { name: 'Gruvbox', - type: 'Dark', - styles: require('../../sass/themes/gruvbox.scss') + type: 'Dark' }, idleFingers: { name: 'idle Fingers', - type: 'Dark', - styles: require('../../sass/themes/idle-fingers.scss') + type: 'Dark' }, krTheme: { name: 'krTheme', - type: 'Dark', - styles: require('../../sass/themes/kr-theme.scss') + type: 'Dark' }, merbivore: { name: 'Merbivore', - type: 'Dark', - styles: require('../../sass/themes/merbivore.scss') + type: 'Dark' }, merbivoreSoft: { name: 'Merbivore Soft', - type: 'Dark', - styles: require('../../sass/themes/merbivore-soft.scss') + type: 'Dark' }, monoIndustrial: { name: 'Mono Industrial', - type: 'Dark', - styles: require('../../sass/themes/mono-industrial.scss') + type: 'Dark' }, monokai: { name: 'Monokai', - type: 'Dark', - styles: require('../../sass/themes/monokai.scss') + type: 'Dark' }, pastelOnDark: { name: 'Pastel on dark', - type: 'Dark', - styles: require('../../sass/themes/pastel-on-dark.scss') + type: 'Dark' }, solarizedDark: { name: 'Solarized Dark', - type: 'Dark', - styles: require('../../sass/themes/solarized-dark.scss') + type: 'Dark' }, terminal: { name: 'Terminal', - type: 'Dark', - styles: require('../../sass/themes/terminal.scss') + type: 'Dark' }, tomorrowNight: { name: 'Tomorrow Night', - type: 'Dark', - styles: require('../../sass/themes/tomorrow-night.scss') + type: 'Dark' }, tomorrowNightBlue: { name: 'Tomorrow Night Blue', - type: 'Dark', - styles: require('../../sass/themes/tomorrow-night-blue.scss') + type: 'Dark' }, tomorrowNightBright: { name: 'Tomorrow Night Bright', - type: 'Dark', - styles: require('../../sass/themes/tomorrow-night-bright.scss') + type: 'Dark' }, tomorrowNightEighties: { name: 'Tomorrow Night ’80s', - type: 'Dark', - styles: require('../../sass/themes/tomorrow-night-eighties.scss') + type: 'Dark' }, twilight: { name: 'Twilight', - type: 'Dark', - styles: require('../../sass/themes/twilight.scss') + type: 'Dark' }, vibrantInk: { name: 'Vibrant Ink', - type: 'Dark', - styles: require('../../sass/themes/vibrant-ink.scss') + type: 'Dark' } }; diff --git a/src/manifest.json b/src/manifest.json index 861a31f..4fae7ac 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,6 +1,6 @@ { "name": "JSON Formatter", - "version": "0.10.0", + "version": "0.11.0", "manifest_version": 2, "description": "Makes JSON easy to read. Open source.", "homepage_url": "https://github.com/nikrolls/json-formatter", diff --git a/src/sass/content.scss b/src/sass/content.scss index c351735..08debff 100644 --- a/src/sass/content.scss +++ b/src/sass/content.scss @@ -248,3 +248,5 @@ span { * { font-smoothing: antialiased; } + +@import 'themes/all'; diff --git a/src/sass/themes/_base.scss b/src/sass/themes/_base.scss deleted file mode 100644 index b6fc94b..0000000 --- a/src/sass/themes/_base.scss +++ /dev/null @@ -1,21 +0,0 @@ -body {} - -::selection {} - -.key {} - -.number {} - -.string {} - -.bool {} - -.null {} - -.brace {} - -#gutter {} - -[line-number]:before {} - -.collapsed:after {} diff --git a/src/sass/themes/_example.scss b/src/sass/themes/_example.scss new file mode 100644 index 0000000..08eeb58 --- /dev/null +++ b/src/sass/themes/_example.scss @@ -0,0 +1,22 @@ +body.theme-example { + + ::selection {} + + .key {} + + .number {} + + .string {} + + .bool {} + + .null {} + + .brace {} + + #gutter {} + + [line-number]:before {} + + .collapsed:after {} +} diff --git a/src/sass/themes/all.scss b/src/sass/themes/all.scss new file mode 100644 index 0000000..b37d215 --- /dev/null +++ b/src/sass/themes/all.scss @@ -0,0 +1,36 @@ +@import "ambiance"; +@import "chaos"; +@import "chrome"; +@import "clouds"; +@import "clouds-midnight"; +@import "cobalt"; +@import "crimson-editor"; +@import "dawn"; +@import "dreamweaver"; +@import "eclipse"; +@import "github"; +@import "gob"; +@import "gruvbox"; +@import "idle-fingers"; +@import "iplastic"; +@import "katzen-milch"; +@import "kr-theme"; +@import "kuroir"; +@import "merbivore"; +@import "merbivore-soft"; +@import "mono-industrial"; +@import "monokai"; +@import "pastel-on-dark"; +@import "solarized-dark"; +@import "solarized-light"; +@import "sql-server"; +@import "terminal"; +@import "textmate"; +@import "tomorrow"; +@import "tomorrow-night"; +@import "tomorrow-night-blue"; +@import "tomorrow-night-bright"; +@import "tomorrow-night-eighties"; +@import "twilight"; +@import "vibrant-ink"; +@import "xcode"; diff --git a/src/sass/themes/ambiance.scss b/src/sass/themes/ambiance.scss index 3250e78..a16f53f 100644 --- a/src/sass/themes/ambiance.scss +++ b/src/sass/themes/ambiance.scss @@ -1,45 +1,45 @@ -body { +body.theme-ambiance { background-color: #202020; color: #e6e1dc; -} - -::selection { - background-color: transparentize(#ddf0ff, 0.80); -} - -.key { - color: #99c; -} - -.number { - color: #78cf8a; -} - -.string { - color: #8f9d6a; -} - -.bool, .null { - color: #cf7ea9; -} - -.brace { - color: #24c2c7; -} - -#gutter { - background-color: #3d3d3d; - background-image: linear-gradient(to right, #3d3d3d, #333); - background-repeat: repeat-x; - border-right: 1px solid #4d4d4d; -} - -[line-number]:before { - text-shadow: 0 1px 1px #4d4d4d; - color: #222; -} -.collapsed:after { - font-style: italic; - color: #555; + ::selection { + background-color: transparentize(#ddf0ff, 0.80); + } + + .key { + color: #99c; + } + + .number { + color: #78cf8a; + } + + .string { + color: #8f9d6a; + } + + .bool, .null { + color: #cf7ea9; + } + + .brace { + color: #24c2c7; + } + + #gutter { + background-color: #3d3d3d; + background-image: linear-gradient(to right, #3d3d3d, #333); + background-repeat: repeat-x; + border-right: 1px solid #4d4d4d; + } + + [line-number]:before { + text-shadow: 0 1px 1px #4d4d4d; + color: #222; + } + + .collapsed:after { + font-style: italic; + color: #555; + } } diff --git a/src/sass/themes/chaos.scss b/src/sass/themes/chaos.scss index 52216b8..6f557f0 100644 --- a/src/sass/themes/chaos.scss +++ b/src/sass/themes/chaos.scss @@ -1,45 +1,45 @@ -$foreground: #e6e1dc; +body.theme-chaos { + $foreground: #e6e1dc; -body { background-color: #161616; color: $foreground; -} -::selection { - background-color: #494836; -} + ::selection { + background-color: #494836; + } -.key { - color: #974; -} + .key { + color: #974; + } -.number { - color: #58c554; -} + .number { + color: #58c554; + } -.string { - color: #58c554; -} + .string { + color: #58c554; + } -.bool, .null { - color: #fdc251; -} + .bool, .null { + color: #fdc251; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #141414; - border-right: 1px solid #282828; + #gutter { + background: #141414; + border-right: 1px solid #282828; -} + } -[line-number]:before { - color: #595959; -} + [line-number]:before { + color: #595959; + } -.collapsed:after { - font-style: italic; - color: #555; + .collapsed:after { + font-style: italic; + color: #555; + } } diff --git a/src/sass/themes/chrome.scss b/src/sass/themes/chrome.scss index 81809a5..a01e20a 100644 --- a/src/sass/themes/chrome.scss +++ b/src/sass/themes/chrome.scss @@ -1,42 +1,42 @@ -$foreground: black; +body.theme-chrome { + $foreground: black; -body { background-color: white; color: $foreground; -} -::selection { - background-color: #b5d5ff; -} + ::selection { + background-color: #b5d5ff; + } -.key { - color: #318495; -} + .key { + color: #318495; + } -.number { - color: #0000cd; -} + .number { + color: #0000cd; + } -.string { - color: #1a1aa6; -} + .string { + color: #1a1aa6; + } -.bool, .null { - color: #6d79de; -} + .bool, .null { + color: #6d79de; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #ebebeb; -} + #gutter { + background: #ebebeb; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #236e24; + .collapsed:after { + color: #236e24; + } } diff --git a/src/sass/themes/clouds-midnight.scss b/src/sass/themes/clouds-midnight.scss index 1870905..f97c511 100644 --- a/src/sass/themes/clouds-midnight.scss +++ b/src/sass/themes/clouds-midnight.scss @@ -1,42 +1,42 @@ -$foreground: #929292; +body.theme-cloudsMidnight { + $foreground: #929292; -body { background-color: #191919; color: $foreground; -} -::selection { - background-color: black; -} + ::selection { + background-color: black; + } -.key { - color: $foreground; -} + .key { + color: $foreground; + } -.number { - color: #46a609; -} + .number { + color: #46a609; + } -.string { - color: #5d90cd; -} + .string { + color: #5d90cd; + } -.bool, .null { - color: #39946a; -} + .bool, .null { + color: #39946a; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #232323; -} + #gutter { + background: #232323; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - color: #3c403b; + .collapsed:after { + color: #3c403b; + } } diff --git a/src/sass/themes/clouds.scss b/src/sass/themes/clouds.scss index b3b6d1f..82ad978 100644 --- a/src/sass/themes/clouds.scss +++ b/src/sass/themes/clouds.scss @@ -1,42 +1,42 @@ -$foreground: black; +body.theme-clouds { + $foreground: black; -body { background-color: white; color: $foreground; -} -::selection { - background-color: #bdd5fc; -} + ::selection { + background-color: #bdd5fc; + } -.key { - color: $foreground; -} + .key { + color: $foreground; + } -.number { - color: #46a609; -} + .number { + color: #46a609; + } -.string { - color: #5d90cd; -} + .string { + color: #5d90cd; + } -.bool, .null { - color: #39946a; -} + .bool, .null { + color: #39946a; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #ebebeb; -} + #gutter { + background: #ebebeb; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #bcc8ba; + .collapsed:after { + color: #bcc8ba; + } } diff --git a/src/sass/themes/cobalt.scss b/src/sass/themes/cobalt.scss index f316dae..4cd61d3 100644 --- a/src/sass/themes/cobalt.scss +++ b/src/sass/themes/cobalt.scss @@ -1,39 +1,39 @@ -$foreground: white; +body.theme-cobalt { + $foreground: white; -body { background-color: #002240; color: $foreground; -} -::selection { - background-color: transparentize(#b36539, 0.25); -} + ::selection { + background-color: transparentize(#b36539, 0.25); + } -.key { - color: #ccc; -} + .key { + color: #ccc; + } -.number, .bool, .null { - color: #ff628c; -} + .number, .bool, .null { + color: #ff628c; + } -.string { - color: #3ad900; -} + .string { + color: #3ad900; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #011e3a; -} + #gutter { + background: #011e3a; + } -[line-number]:before { - color: #8091a0; -} + [line-number]:before { + color: #8091a0; + } -.collapsed:after { - font-style: italic; - color: #08f; + .collapsed:after { + font-style: italic; + color: #08f; + } } diff --git a/src/sass/themes/crimson-editor.scss b/src/sass/themes/crimson-editor.scss index 48958ec..a644b0a 100644 --- a/src/sass/themes/crimson-editor.scss +++ b/src/sass/themes/crimson-editor.scss @@ -1,42 +1,42 @@ -$foreground: #404040; +body.theme-crimsonEditor { + $foreground: #404040; -body { background-color: white; color: $foreground; -} -::selection { - background-color: #b5d5ff; -} + ::selection { + background-color: #b5d5ff; + } -.key { - color: #004080; -} + .key { + color: #004080; + } -.number { - color: #000040; -} + .number { + color: #000040; + } -.string { - color: #800080; -} + .string { + color: #800080; + } -.bool, .null { - color: #ff9c00; -} + .bool, .null { + color: #ff9c00; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #ebebeb; -} + #gutter { + background: #ebebeb; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #4c886b; + .collapsed:after { + color: #4c886b; + } } diff --git a/src/sass/themes/dawn.scss b/src/sass/themes/dawn.scss index b762433..783cda2 100644 --- a/src/sass/themes/dawn.scss +++ b/src/sass/themes/dawn.scss @@ -1,39 +1,39 @@ -$foreground: #080808; +body.theme-dawn { + $foreground: #080808; -body { background-color: #f9f9f9; color: $foreground; -} -::selection { - background-color: transparentize(#275fff, 0.70); -} + ::selection { + background-color: transparentize(#275fff, 0.70); + } -.key { - color: #234a97; -} + .key { + color: #234a97; + } -.number, .bool, .null { - color: #811f24; -} + .number, .bool, .null { + color: #811f24; + } -.string { - color: #0b6125; -} + .string { + color: #0b6125; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #ebebeb; -} + #gutter { + background: #ebebeb; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - font-style: italic; - color: #5a525f + .collapsed:after { + font-style: italic; + color: #5a525f + } } diff --git a/src/sass/themes/dreamweaver.scss b/src/sass/themes/dreamweaver.scss index 9d08281..cb8e8e0 100644 --- a/src/sass/themes/dreamweaver.scss +++ b/src/sass/themes/dreamweaver.scss @@ -1,42 +1,42 @@ -$foreground: black; +body.theme-dreamweaver { + $foreground: black; -body { background-color: #fff; color: $foreground; -} -::selection { - background-color: #b5d5ff; -} + ::selection { + background-color: #b5d5ff; + } -.key { - color: #06f; -} + .key { + color: #06f; + } -.number { - color: #0000cd; -} + .number { + color: #0000cd; + } -.string { - color: #00f; -} + .string { + color: #00f; + } -.bool, .null { - color: #585cf6; -} + .bool, .null { + color: #585cf6; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #e8e8e8; -} + #gutter { + background: #e8e8e8; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #4c886b; + .collapsed:after { + color: #4c886b; + } } diff --git a/src/sass/themes/eclipse.scss b/src/sass/themes/eclipse.scss index aa5c677..6d895ae 100644 --- a/src/sass/themes/eclipse.scss +++ b/src/sass/themes/eclipse.scss @@ -1,43 +1,43 @@ -$foreground: black; +body.theme-eclipse { + $foreground: black; -body { background-color: #fff; color: $foreground; -} -::selection { - background-color: #b5d5ff; -} + ::selection { + background-color: #b5d5ff; + } -.key { - color: #7f0055; -} + .key { + color: #7f0055; + } -.number { - color: darkblue; -} + .number { + color: darkblue; + } -.string { - color: #2a00ff; -} + .string { + color: #2a00ff; + } -.bool, .null { - color: #5848f6; -} + .bool, .null { + color: #5848f6; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #ebebeb; - border-right: 1px solid #9f9f9f; -} + #gutter { + background: #ebebeb; + border-right: 1px solid #9f9f9f; + } -[line-number]:before { - color: #888; -} + [line-number]:before { + color: #888; + } -.collapsed:after { - color: #719682; + .collapsed:after { + color: #719682; + } } diff --git a/src/sass/themes/github.scss b/src/sass/themes/github.scss index 61ad0a6..6990e4e 100644 --- a/src/sass/themes/github.scss +++ b/src/sass/themes/github.scss @@ -1,41 +1,41 @@ -$foreground: black; +body.theme-github { + $foreground: black; -body { background-color: white; color: $foreground; -} -::selection { - background-color: #b5d5ff; -} + ::selection { + background-color: #b5d5ff; + } -.number { - color: #099; -} + .number { + color: #099; + } -.string { - color: #d14; -} + .string { + color: #d14; + } -.bool, .null { - color: $foreground; - font-weight: bold; -} + .bool, .null { + color: $foreground; + font-weight: bold; + } -.brace { - font-weight: bold; - color: $foreground; -} + .brace { + font-weight: bold; + color: $foreground; + } -#gutter { - background: #e8e8e8; -} + #gutter { + background: #e8e8e8; + } -[line-number]:before { - color: #aaa; -} + [line-number]:before { + color: #aaa; + } -.collapsed:after { - color: #998; - font-style: italic; + .collapsed:after { + color: #998; + font-style: italic; + } } diff --git a/src/sass/themes/gob.scss b/src/sass/themes/gob.scss index a6aeed4..8fd9fc1 100644 --- a/src/sass/themes/gob.scss +++ b/src/sass/themes/gob.scss @@ -1,39 +1,39 @@ -$foreground: #0f0; +body.theme-gob { + $foreground: #0f0; -body { background-color: #0b0b0b; color: $foreground; -} -::selection { - background-color: transparentize(#ddf0ff, 0.80); -} + ::selection { + background-color: transparentize(#ddf0ff, 0.80); + } -.key { - color: #00f868; -} + .key { + color: #00f868; + } -.string { - color: #10f060; -} + .string { + color: #10f060; + } -.bool, .null { - color: #10f0a0; -} + .bool, .null { + color: #10f0a0; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #0b1818; -} + #gutter { + background: #0b1818; + } -[line-number]:before { - color: #03ee03; -} + [line-number]:before { + color: #03ee03; + } -.collapsed:after { - font-style: italic; - color: #00e060; + .collapsed:after { + font-style: italic; + color: #00e060; + } } diff --git a/src/sass/themes/gruvbox.scss b/src/sass/themes/gruvbox.scss index f65cff5..ab0c811 100644 --- a/src/sass/themes/gruvbox.scss +++ b/src/sass/themes/gruvbox.scss @@ -1,35 +1,35 @@ -$foreground: #ebdab4; +body.theme-gruvbox { + $foreground: #ebdab4; -body { background-color: #1d2021; color: $foreground; -} -::selection { - background-color: transparentize(#b36539, 0.25); -} + ::selection { + background-color: transparentize(#b36539, 0.25); + } -.key { - color: #84a598; -} + .key { + color: #84a598; + } -.number, .bool, .null { - color: #c2859a; -} + .number, .bool, .null { + color: #c2859a; + } -.string { - color: #b8ba37; -} + .string { + color: #b8ba37; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - font-style: italic; - color: #928375; + .collapsed:after { + font-style: italic; + color: #928375; + } } diff --git a/src/sass/themes/idle-fingers.scss b/src/sass/themes/idle-fingers.scss index 1f68824..8230744 100644 --- a/src/sass/themes/idle-fingers.scss +++ b/src/sass/themes/idle-fingers.scss @@ -1,39 +1,39 @@ -$foreground: white; +body.theme-idleFingers { + $foreground: white; -body { background-color: #323232; color: $foreground; -} -::selection { - background-color: transparentize(#5a647e, 0.12); -} + ::selection { + background-color: transparentize(#5a647e, 0.12); + } -.key { - color: $foreground; -} + .key { + color: $foreground; + } -.number, .bool, .null { - color: #6c99bb; -} + .number, .bool, .null { + color: #6c99bb; + } -.string { - color: #a5c261; -} + .string { + color: #a5c261; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #3b3b3b; -} + #gutter { + background: #3b3b3b; + } -[line-number]:before { - color: #999; -} + [line-number]:before { + color: #999; + } -.collapsed:after { - font-style: italic; - color: #bc9458; + .collapsed:after { + font-style: italic; + color: #bc9458; + } } diff --git a/src/sass/themes/iplastic.scss b/src/sass/themes/iplastic.scss index ba9c108..1bf4fda 100644 --- a/src/sass/themes/iplastic.scss +++ b/src/sass/themes/iplastic.scss @@ -1,41 +1,41 @@ -$foreground: #333; +body.theme-iplastic { + $foreground: #333; -body { background-color: #eee; color: $foreground; -} -::selection { - background-color: #bad6fd; -} + ::selection { + background-color: #bad6fd; + } -.key { - color: #36c; - font-style: italic; -} + .key { + color: #36c; + font-style: italic; + } -.number, .bool, .null { - color: #06f; - font-weight: 700; -} + .number, .bool, .null { + color: #06f; + font-weight: 700; + } -.string { - color: #a55f03; -} + .string { + color: #a55f03; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #ddd; -} + #gutter { + background: #ddd; + } -[line-number]:before { - color: #666; -} + [line-number]:before { + color: #666; + } -.collapsed:after { - color: #777; - font-style: italic; + .collapsed:after { + color: #777; + font-style: italic; + } } diff --git a/src/sass/themes/katzen-milch.scss b/src/sass/themes/katzen-milch.scss index b21e458..970d6ae 100644 --- a/src/sass/themes/katzen-milch.scss +++ b/src/sass/themes/katzen-milch.scss @@ -1,48 +1,48 @@ -$foreground: #0f0009; +body.theme-katzenMilch { + $foreground: #0f0009; -body { background-color: #f3f2f3; color: $foreground; -} - -::selection { - background-color: transparentize(#6405d0, 0.73); -} - -.key { - color: transparentize(#025f49, 0.3); - background-color: transparentize(#22ff49, 0.88); -} - -.number { - color: transparentize(#4f827b, 0.7); - background-color: transparentize(#77c2bb, 0.9411); -} - -.string { - color: #5a5f9b; - background-color: transparentize(#aaafdb, 0.965); -} - -.bool, .null { - color: #7d7e52; - background-color: transparentize(#bdbe82, 0.941); -} - -.brace { - color: $foreground; -} - -#gutter { - background: #e8e8e8; -} - -[line-number]:before { - color: #333; -} -.collapsed:after { - font-style: italic; - color: rgba(64, 79, 80, 0.67); - background-color: transparentize(#5f0fff, 0.9922) + ::selection { + background-color: transparentize(#6405d0, 0.73); + } + + .key { + color: transparentize(#025f49, 0.3); + background-color: transparentize(#22ff49, 0.88); + } + + .number { + color: transparentize(#4f827b, 0.7); + background-color: transparentize(#77c2bb, 0.9411); + } + + .string { + color: #5a5f9b; + background-color: transparentize(#aaafdb, 0.965); + } + + .bool, .null { + color: #7d7e52; + background-color: transparentize(#bdbe82, 0.941); + } + + .brace { + color: $foreground; + } + + #gutter { + background: #e8e8e8; + } + + [line-number]:before { + color: #333; + } + + .collapsed:after { + font-style: italic; + color: rgba(64, 79, 80, 0.67); + background-color: transparentize(#5f0fff, 0.9922) + } } diff --git a/src/sass/themes/kr-theme.scss b/src/sass/themes/kr-theme.scss index 3007e21..fe5674e 100644 --- a/src/sass/themes/kr-theme.scss +++ b/src/sass/themes/kr-theme.scss @@ -1,39 +1,39 @@ -$foreground: #fcffe0; +body.theme-krTheme { + $foreground: #fcffe0; -body { background-color: #0b0a09; color: $foreground; -} -::selection { - background-color: transparentize(#a0f, 0.55); -} + ::selection { + background-color: transparentize(#a0f, 0.55); + } -.key { - color: #d1a796; -} + .key { + color: #d1a796; + } -.number, .bool, .null { - color: transparentize(#d27518, 0.24); -} + .number, .bool, .null { + color: transparentize(#d27518, 0.24); + } -.string { - color: transparentize(#a4a1b5, 0.2); -} + .string { + color: transparentize(#a4a1b5, 0.2); + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #1c1917; -} + #gutter { + background: #1c1917; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - font-style: italic; - color: #706d5b; + .collapsed:after { + font-style: italic; + color: #706d5b; + } } diff --git a/src/sass/themes/kuroir.scss b/src/sass/themes/kuroir.scss index 8dd03b2..5c994fa 100644 --- a/src/sass/themes/kuroir.scss +++ b/src/sass/themes/kuroir.scss @@ -1,39 +1,39 @@ -$foreground: #363636; +body.theme-kuroir { + $foreground: #363636; -body { background-color: #e8e9e8; color: $foreground; -} -::selection { - background-color: transparentize(#f5aa00, 0.43); -} + ::selection { + background-color: transparentize(#f5aa00, 0.43); + } -.key { - color: #009acd; -} + .key { + color: #009acd; + } -.number { - color: #9a5925; -} + .number { + color: #9a5925; + } -.string { - color: #639300; -} + .string { + color: #639300; + } -.bool, .null { - color: #cd6839; -} + .bool, .null { + color: #cd6839; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: transparentize(#949494, 0.09); - background-color: transparentize(#dcdcdc, 0.44); + .collapsed:after { + color: transparentize(#949494, 0.09); + background-color: transparentize(#dcdcdc, 0.44); + } } diff --git a/src/sass/themes/merbivore-soft.scss b/src/sass/themes/merbivore-soft.scss index 7361cfa..77bc70e 100644 --- a/src/sass/themes/merbivore-soft.scss +++ b/src/sass/themes/merbivore-soft.scss @@ -1,43 +1,43 @@ -$foreground: #e6e1dc; +body.theme-merbivoreSoft { + $foreground: #e6e1dc; -body { background-color: #1c1c1c; color: $foreground; -} -::selection { - background-color: #494949; -} + ::selection { + background-color: #494949; + } -.key { - color: $foreground; -} + .key { + color: $foreground; + } -.number { - color: #7fc578; -} + .number { + color: #7fc578; + } -.string { - color: #8ec65f; -} + .string { + color: #8ec65f; + } -.bool, .null { - color: #e1c582; -} + .bool, .null { + color: #e1c582; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #262424; -} + #gutter { + background: #262424; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - font-style: italic; - color: #ac4bb8; + .collapsed:after { + font-style: italic; + color: #ac4bb8; + } } diff --git a/src/sass/themes/merbivore.scss b/src/sass/themes/merbivore.scss index ffab397..e4a292d 100644 --- a/src/sass/themes/merbivore.scss +++ b/src/sass/themes/merbivore.scss @@ -1,43 +1,43 @@ -$foreground: #e6e1dc; +body.theme-merbivore { + $foreground: #e6e1dc; -body { background-color: #161616; color: $foreground; -} -::selection { - background-color: #454545; -} + ::selection { + background-color: #454545; + } -.key { - color: $foreground; -} + .key { + color: $foreground; + } -.number { - color: #58c554; -} + .number { + color: #58c554; + } -.string { - color: #8dff0a; -} + .string { + color: #8dff0a; + } -.bool, .null { - color: #fdc251; -} + .bool, .null { + color: #fdc251; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #202020; -} + #gutter { + background: #202020; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - font-style: italic; - color: #ad2ea4; + .collapsed:after { + font-style: italic; + color: #ad2ea4; + } } diff --git a/src/sass/themes/mono-industrial.scss b/src/sass/themes/mono-industrial.scss index 2c91a2b..e066346 100644 --- a/src/sass/themes/mono-industrial.scss +++ b/src/sass/themes/mono-industrial.scss @@ -1,44 +1,44 @@ -$foreground: white; +body.theme-monoIndustrial { + $foreground: white; -body { background-color: #222c28; color: $foreground; -} -::selection { - background-color: transparentize(#919994, 0.6); -} + ::selection { + background-color: transparentize(#919994, 0.6); + } -.key { - color: #a8b3ab; -} + .key { + color: #a8b3ab; + } -.number { - color: #e98800; -} + .number { + color: #e98800; + } -.string { - background-color: #151c19; - color: #fff; -} + .string { + background-color: #151c19; + color: #fff; + } -.bool, .null { - color: #648bd2; -} + .bool, .null { + color: #648bd2; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #1d2521; -} + #gutter { + background: #1d2521; + } -[line-number]:before { - color: #c5c9c9; -} + [line-number]:before { + color: #c5c9c9; + } -.collapsed:after { - color: #666c68; - background-color: #151c19; + .collapsed:after { + color: #666c68; + background-color: #151c19; + } } diff --git a/src/sass/themes/monokai.scss b/src/sass/themes/monokai.scss index 8039961..c586f4b 100644 --- a/src/sass/themes/monokai.scss +++ b/src/sass/themes/monokai.scss @@ -1,38 +1,38 @@ -$foreground: #f8f8f2; +body.theme-monokai { + $foreground: #f8f8f2; -body { background-color: #272822; color: $foreground; -} -::selection { - background-color: #49483e; -} + ::selection { + background-color: #49483e; + } -.key { - color: #a6e22e; -} + .key { + color: #a6e22e; + } -.number, .bool, .null { - color: #ae81ff; -} + .number, .bool, .null { + color: #ae81ff; + } -.string { - color: #e6db74; -} + .string { + color: #e6db74; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #2f3129; -} + #gutter { + background: #2f3129; + } -[line-number]:before { - color: #8f908a; -} + [line-number]:before { + color: #8f908a; + } -.collapsed:after { - color: #75715e; + .collapsed:after { + color: #75715e; + } } diff --git a/src/sass/themes/pastel-on-dark.scss b/src/sass/themes/pastel-on-dark.scss index e3f6526..3025e13 100644 --- a/src/sass/themes/pastel-on-dark.scss +++ b/src/sass/themes/pastel-on-dark.scss @@ -1,42 +1,42 @@ -$foreground: #8f938f; +body.theme-pastelOnDark { + $foreground: #8f938f; -body { background-color: #2c2828; color: $foreground; -} -::selection { - background-color: transparentize(#ddf0ff, 0.80); -} + ::selection { + background-color: transparentize(#ddf0ff, 0.80); + } -.key { - color: #bebf55; -} + .key { + color: #bebf55; + } -.number { - color: #ccc; -} + .number { + color: #ccc; + } -.string { - color: #66a968; -} + .string { + color: #66a968; + } -.bool, .null { - color: #de8e30; -} + .bool, .null { + color: #de8e30; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #353030; -} + #gutter { + background: #353030; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - color: #a6c6ff; + .collapsed:after { + color: #a6c6ff; + } } diff --git a/src/sass/themes/solarized-dark.scss b/src/sass/themes/solarized-dark.scss index d7ef3c4..e6ae7ae 100644 --- a/src/sass/themes/solarized-dark.scss +++ b/src/sass/themes/solarized-dark.scss @@ -1,43 +1,43 @@ -$foreground: #93a1a1; +body.theme-solarizedDark { + $foreground: #93a1a1; -body { background-color: #002b36; color: $foreground; -} -::selection { - background-color: transparentize(white, 0.9); -} + ::selection { + background-color: transparentize(white, 0.9); + } -.key { - color: #268bd2; -} + .key { + color: #268bd2; + } -.number { - color: #d33682; -} + .number { + color: #d33682; + } -.string { - color: #2aa198; -} + .string { + color: #2aa198; + } -.bool, .null { - color: #b58900; -} + .bool, .null { + color: #b58900; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #01313f; -} + #gutter { + background: #01313f; + } -[line-number]:before { - color: #d0edf7; -} + [line-number]:before { + color: #d0edf7; + } -.collapsed:after { - font-style: italic; - color: #657b83; + .collapsed:after { + font-style: italic; + color: #657b83; + } } diff --git a/src/sass/themes/solarized-light.scss b/src/sass/themes/solarized-light.scss index 750c14c..fe841a2 100644 --- a/src/sass/themes/solarized-light.scss +++ b/src/sass/themes/solarized-light.scss @@ -1,42 +1,42 @@ -$foreground: #586e75; +body.theme-solarizedLight { + $foreground: #586e75; -body { background-color: #fdf6e3; color: $foreground; -} -::selection { - background-color: transparentize(#073643, 0.91); -} + ::selection { + background-color: transparentize(#073643, 0.91); + } -.key { - color: #268bd2; -} + .key { + color: #268bd2; + } -.number { - color: #d33682; -} + .number { + color: #d33682; + } -.string { - color: #2aa198; -} + .string { + color: #2aa198; + } -.bool, .null { - color: #b58900 -} + .bool, .null { + color: #b58900 + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #fbf1d3; -} + #gutter { + background: #fbf1d3; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #93a1a1; + .collapsed:after { + color: #93a1a1; + } } diff --git a/src/sass/themes/sql-server.scss b/src/sass/themes/sql-server.scss index d819d75..440e310 100644 --- a/src/sass/themes/sql-server.scss +++ b/src/sass/themes/sql-server.scss @@ -1,36 +1,36 @@ -body { +body.theme-sqlServer { background-color: #fff; color: black; -} -::selection { - background-color: #b5d5ff; -} + ::selection { + background-color: #b5d5ff; + } -.key { - color: #318495; -} + .key { + color: #318495; + } -.string { - color: #f00; -} + .string { + color: #f00; + } -.bool, .null { - color: #979797; -} + .bool, .null { + color: #979797; + } -.brace { - color: #808080; -} + .brace { + color: #808080; + } -#gutter { - background: #ebebeb; -} + #gutter { + background: #ebebeb; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #008000; + .collapsed:after { + color: #008000; + } } diff --git a/src/sass/themes/terminal.scss b/src/sass/themes/terminal.scss index 42632e7..e67ca2e 100644 --- a/src/sass/themes/terminal.scss +++ b/src/sass/themes/terminal.scss @@ -1,38 +1,38 @@ -$foreground: #dedede; +body.theme-terminal { + $foreground: #dedede; -body { background-color: black; color: $foreground; -} -::selection { - background-color: #424242; -} + ::selection { + background-color: #424242; + } -.key { - color: #d54e53; -} + .key { + color: #d54e53; + } -.number, .bool, .null { - color: #e78c45; -} + .number, .bool, .null { + color: #e78c45; + } -.string { - color: #b9ca4a; -} + .string { + color: #b9ca4a; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #1a0005; -} + #gutter { + background: #1a0005; + } -[line-number]:before { - color: steelblue; -} + [line-number]:before { + color: steelblue; + } -.collapsed:after { - color: orangered; + .collapsed:after { + color: orangered; + } } diff --git a/src/sass/themes/textmate.scss b/src/sass/themes/textmate.scss index e8eff7c..e7a95c4 100644 --- a/src/sass/themes/textmate.scss +++ b/src/sass/themes/textmate.scss @@ -1,42 +1,42 @@ -$foreground: black; +body.theme-textmate { + $foreground: black; -body { background-color: #fff; color: $foreground; -} -::selection { - background-color: #b5d5ff; -} + ::selection { + background-color: #b5d5ff; + } -.key { - color: #318495; -} + .key { + color: #318495; + } -.number { - color: #0000cd; -} + .number { + color: #0000cd; + } -.string { - color: #036a07; -} + .string { + color: #036a07; + } -.bool, .null { - color: #585cf6; -} + .bool, .null { + color: #585cf6; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #f0f0f0; -} + #gutter { + background: #f0f0f0; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #4c886b; + .collapsed:after { + color: #4c886b; + } } diff --git a/src/sass/themes/tomorrow-night-blue.scss b/src/sass/themes/tomorrow-night-blue.scss index 76d3192..51af5a7 100644 --- a/src/sass/themes/tomorrow-night-blue.scss +++ b/src/sass/themes/tomorrow-night-blue.scss @@ -1,38 +1,38 @@ -$foreground: white; +body.theme-tomorrowNightBlue { + $foreground: white; -body { background-color: #002451; color: $foreground; -} -::selection { - background-color: #003f8e; -} + ::selection { + background-color: #003f8e; + } -.key { - color: #ff9da4; -} + .key { + color: #ff9da4; + } -.number, .bool, .null { - color: #ffc58f; -} + .number, .bool, .null { + color: #ffc58f; + } -.string { - color: #d1f1a9; -} + .string { + color: #d1f1a9; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #00204b; -} + #gutter { + background: #00204b; + } -[line-number]:before { - color: #7388b5; -} + [line-number]:before { + color: #7388b5; + } -.collapsed:after { - color: #7285b7; + .collapsed:after { + color: #7285b7; + } } diff --git a/src/sass/themes/tomorrow-night-bright.scss b/src/sass/themes/tomorrow-night-bright.scss index d1cdd73..a29ef23 100644 --- a/src/sass/themes/tomorrow-night-bright.scss +++ b/src/sass/themes/tomorrow-night-bright.scss @@ -1,38 +1,38 @@ -$foreground: #dedede; +body.theme-tomorrowNightBright { + $foreground: #dedede; -body { background-color: #000; color: $foreground; -} -::selection { - background-color: #424242; -} + ::selection { + background-color: #424242; + } -.key { - color: #d54e53; -} + .key { + color: #d54e53; + } -.number, .bool, .null { - color: #e78c45; -} + .number, .bool, .null { + color: #e78c45; + } -.string { - color: #b9ca4a; -} + .string { + color: #b9ca4a; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #1a1a1a; -} + #gutter { + background: #1a1a1a; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - color: #969896; + .collapsed:after { + color: #969896; + } } diff --git a/src/sass/themes/tomorrow-night-eighties.scss b/src/sass/themes/tomorrow-night-eighties.scss index bc5f612..2b942fa 100644 --- a/src/sass/themes/tomorrow-night-eighties.scss +++ b/src/sass/themes/tomorrow-night-eighties.scss @@ -1,38 +1,38 @@ -$foreground: #ccc; +body.theme-tomorrowNightEighties { + $foreground: #ccc; -body { background-color: #2d2d2d; color: $foreground; -} -::selection { - background-color: #515151; -} + ::selection { + background-color: #515151; + } -.key { - color: #f2777a; -} + .key { + color: #f2777a; + } -.number, .bool, .null { - color: #f99157; -} + .number, .bool, .null { + color: #f99157; + } -.string { - color: #9c9; -} + .string { + color: #9c9; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #272727; -} + #gutter { + background: #272727; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - color: #999; + .collapsed:after { + color: #999; + } } diff --git a/src/sass/themes/tomorrow-night.scss b/src/sass/themes/tomorrow-night.scss index e8facaa..9a0735c 100644 --- a/src/sass/themes/tomorrow-night.scss +++ b/src/sass/themes/tomorrow-night.scss @@ -1,38 +1,38 @@ -$foreground: #c5c8c6; +body.theme-tomorrowNight { + $foreground: #c5c8c6; -body { background-color: #1d1f21; color: $foreground; -} -::selection { - background-color: #373b41; -} + ::selection { + background-color: #373b41; + } -.key { - color: #c66; -} + .key { + color: #c66; + } -.number, .bool, .null { - color: #de935f; -} + .number, .bool, .null { + color: #de935f; + } -.string { - color: #b5bd68; -} + .string { + color: #b5bd68; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #25282c; -} + #gutter { + background: #25282c; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - color: #969896; + .collapsed:after { + color: #969896; + } } diff --git a/src/sass/themes/tomorrow.scss b/src/sass/themes/tomorrow.scss index 476c2a1..0e38bfc 100644 --- a/src/sass/themes/tomorrow.scss +++ b/src/sass/themes/tomorrow.scss @@ -1,38 +1,38 @@ -$foreground: #4d4d4c; +body.theme-tomorrow { + $foreground: #4d4d4c; -body { background-color: #fff; color: $foreground; -} -::selection { - background-color: #d6d6d6; -} + ::selection { + background-color: #d6d6d6; + } -.key { - color: #c82829; -} + .key { + color: #c82829; + } -.number, .bool, .null { - color: #f5871f; -} + .number, .bool, .null { + color: #f5871f; + } -.string { - color: #718c00; -} + .string { + color: #718c00; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #f6f6f6; -} + #gutter { + background: #f6f6f6; + } -[line-number]:before { - color: $foreground; -} + [line-number]:before { + color: $foreground; + } -.collapsed:after { - color: #8e908c; + .collapsed:after { + color: #8e908c; + } } diff --git a/src/sass/themes/twilight.scss b/src/sass/themes/twilight.scss index f95aa9b..40019c9 100644 --- a/src/sass/themes/twilight.scss +++ b/src/sass/themes/twilight.scss @@ -1,39 +1,39 @@ -$foreground: #f8f8f8; +body.theme-twilight { + $foreground: #f8f8f8; -body { background-color: #141414; color: $foreground; -} -::selection { - background-color: transparentize(#ddf0ff, 0.8); -} + ::selection { + background-color: transparentize(#ddf0ff, 0.8); + } -.key { - color: #7587a6; -} + .key { + color: #7587a6; + } -.number, .bool, .null { - color: #cf6a4c; -} + .number, .bool, .null { + color: #cf6a4c; + } -.string { - color: #8f9d6a; -} + .string { + color: #8f9d6a; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #232323; -} + #gutter { + background: #232323; + } -[line-number]:before { - color: #e2e2e2; -} + [line-number]:before { + color: #e2e2e2; + } -.collapsed:after { - font-style: italic; - color: #5f5a60; + .collapsed:after { + font-style: italic; + color: #5f5a60; + } } diff --git a/src/sass/themes/vibrant-ink.scss b/src/sass/themes/vibrant-ink.scss index bc41e5e..daabd28 100644 --- a/src/sass/themes/vibrant-ink.scss +++ b/src/sass/themes/vibrant-ink.scss @@ -1,42 +1,42 @@ -$foreground: white; +body.theme-vibrantInk { + $foreground: white; -body { background-color: #0f0f0f; color: $foreground; -} -::selection { - background-color: #69c; -} + ::selection { + background-color: #69c; + } -.key { - color: #fc0; -} + .key { + color: #fc0; + } -.number { - color: #9c9; -} + .number { + color: #9c9; + } -.string { - color: #6f0; -} + .string { + color: #6f0; + } -.bool, .null { - color: #399; -} + .bool, .null { + color: #399; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #1a1a1a; -} + #gutter { + background: #1a1a1a; + } -[line-number]:before { - color: #bebebe; -} + [line-number]:before { + color: #bebebe; + } -.collapsed:after { - color: #93c; + .collapsed:after { + color: #93c; + } } diff --git a/src/sass/themes/xcode.scss b/src/sass/themes/xcode.scss index d69d2ba..651e036 100644 --- a/src/sass/themes/xcode.scss +++ b/src/sass/themes/xcode.scss @@ -1,38 +1,38 @@ -$foreground: black; +body.theme-xcode { + $foreground: black; -body { background-color: white; color: $foreground; -} -::selection { - background: #b5d5ff; -} + ::selection { + background: #b5d5ff; + } -.number { - color: #3a00dc; -} + .number { + color: #3a00dc; + } -.string { - color: #df0002; -} + .string { + color: #df0002; + } -.bool, .null { - color: #c800a4; -} + .bool, .null { + color: #c800a4; + } -.brace { - color: $foreground; -} + .brace { + color: $foreground; + } -#gutter { - background: #e8e8e8; -} + #gutter { + background: #e8e8e8; + } -[line-number]:before { - color: #333; -} + [line-number]:before { + color: #333; + } -.collapsed:after { - color: #008e00; + .collapsed:after { + color: #008e00; + } }