vscode-vibrancy

This commit is contained in:
huaji 2019-07-12 21:06:45 +08:00
parent 1e2157293b
commit d54d348e86
15 changed files with 204 additions and 169 deletions

102
README.md
View File

@ -1,89 +1,53 @@
# Custom CSS and JS
# Visual Studio Code Extension - Vibrancy
### **SPECIAL NOTE: If Code complains about that it is corrupted, simply click “Don't show again”.**
### **NOTE: Every time after Code is updated, please re-enable Custom CSS.**
### **NOTE: Every time you change the configuration, please re-enable Custom CSS.**
Enable Acrylic/Glass effect for your VS Code.
Custom CSS to your VS Code. Based on [robertohuertasm](https://github.com/robertohuertasm)s [vscode-icons](https://github.com/robertohuertasm/vscode-icons).
![screenshot](./screenshot.png)
![screenshot](https://raw.githubusercontent.com/be5invis/vscode-custom-css/master/screenshot.png)
[![](https://vsmarketplacebadge.apphb.com/version/eyhn.vscode-vibrancy.svg)](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy) 
[![](https://img.shields.io/visual-studio-marketplace/stars/eyhn.vscode-vibrancy.svg)](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy)
[![](https://img.shields.io/github/stars/eyhn/vscode-vibrancy.svg?style=social)](https://github.com/eyhn/vscode-vibrancy) 
[![](https://img.shields.io/github/watchers/eyhn/vscode-vibrancy.svg?style=social)](https://github.com/eyhn/vscode-vibrancy)
Links: [Github](https://github.com/eyhn/vscode-vibrancy)  [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy)
## Supported Operating Systems
Windows 10 ✔
MacOS ✔
## Getting Started
1. Install this extension.
1. Make sure the color theme you selected is the 'Dark+ (default)'
2. Add to `settings.json`:
![step-1](./step-1.png)
```json
"vscode_custom_css.imports": [""],
"vscode_custom_css.policy": true,
```
2. Install this extension from [the Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy).
**VERY IMPORTANT**: Items in `vscode_custom_css.imports` must be **URL**s. Plain file paths are **NOT URLs**.
3. Press F1 and Activate command "Reload Vibrancy".
- **Windows File URL Example**: `file:///C:/Users/MyUserName/Documents/custom.css`
- The `C:/` part is **REQUIRED.**
![step-3](./step-3.png)
- **MacOS and Linux File URL Example**: `file:///Users/MyUserName/Documents/custom.css`
- [See here](https://en.wikipedia.org/wiki/File_URI_scheme) for more details.
4. Restart.
3. Restart VSCode with proper permission to modify itself:
Every time after Code is updated, please re-enable vibrancy.
1. **Windows**: Restart with Administrator Permission.
## Warns
This extension works by editting the vscode's css file.
So, a information appears while the first time to install or vscode update.U can click the [never show again] to avoid it.
2. **MacOS and Linux**: See instructions below.
![screenshot](./warns.png)
4. Activate command "Reload Custom CSS and JS".
## FAQs
5. Restart.
### How to uninstall?
Press F1 and Activate command "Disable Vibrancy", and Restart Visual Studio Code.
## Extension commands
## Thanks ⭐
As you know to access the command palette and introduce commands you can use ***F1*** (all OS), ***Ctrl+Shift+P*** (Windows & Linux) or ***Cmd+Shift+P*** (OS X).
[be5invis/vscode-custom-css](https://github.com/be5invis/vscode-custom-css) : The basis of this extension program
- ***Enable Custom CSS and JS*** : It enables custom CSS and JS URLs listed in “`vscode_custom_css.imports`”, an array containing URLs of your custom CSS and JS files, in your user settings.
- ***Disable Custom CSS and JS***: It will disable custom CSS.
- ***Reload Custom CSS and JS***: Disable and then re-enable it.
## Windows users
**In Windows, make sure you run your VS Code in Administrator mode before enabling or disabling your custom style!**
## Mac and Linux users
**The extension would NOT if Code cannot modify itself.** The cases include:
- Code files being read-only, like on a read-only file system or,
- Code is not started with the permissions to modify itself.
**You need to claim ownership on Code's installation directory, by running this command**:
```sh
sudo chown -R $(whoami) <Path to Code>
```
The placeholder `<Path to Code>` means the path to VSCode installation. It is typically:
- `/Applications/Visual Studio Code.app/Contents/MacOS/Electron`, on MacOS;
- `/Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron`, on MacOS when using Insiders branch;
- `/usr/share/code`, on most Linux;
- `/opt/visual-studio-code/` on Arch Linux.
Mac and Linux package managers may have customized installation path. Please double check your path is correct.
# Disclaimer
This extension modifies some VS Code files so use it at your own risk.
Currently, icons are not supported by the extension functionality that VS Code provides so this extension solves this issue by injecting code into:
- `electron-browser/index.html`.
The extension will keep a copy of the original file in case something goes wrong. That's what the disable command will do for you.
As this extension modifies VS Code files it will get disabled with every VS Code update. You will have to enable icons again via command palette.
Take into account that this extension is still in beta so you may find some bugs while playing with it. Please, report them to [the issues section of the Github's repo](https://github.com/be5invis/vscode-custom-css/issues).
**Please, leave a review if you can so the VS Code Team can know that this is a very demanded feature and, maybe, they can then provide a proper way to extend the IDE regarding icons and customizations soon enough. ;D**
More file extensions will be supported shortly!
[DIYgod](https://github.com/microsoft/vscode/issues/32257#issuecomment-509936623) : Fix issues with VSCode 1.36

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 226 KiB

4
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "vscode-custom-css",
"version": "3.0.3",
"name": "vscode-vibrancy",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,13 +1,13 @@
{
"name": "vscode-custom-css",
"displayName": "Custom CSS and JS Loader",
"description": "Custom CSS and JS for Visual Studio Code",
"version": "3.0.4",
"publisher": "be5invis",
"name": "vscode-vibrancy",
"displayName": "Vibrancy",
"description": "Vibrancy Effect for Visual Studio Code",
"version": "1.0.1",
"publisher": "eyhn",
"author": {
"email": "belleve@typeof.net",
"name": "Belleve Invis",
"url": "https://typeof.net"
"email": "cneyhn@gmail.com",
"name": "eyhn",
"url": "https://eyhn.in"
},
"engines": {
"vscode": "^1.28.0"
@ -18,10 +18,10 @@
],
"repository": {
"type": "git",
"url": "https://github.com/be5invis/vscode-custom-css"
"url": "https://github.com/EYHN/vscode-vibrancy"
},
"bugs": {
"url": "https://github.com/be5invis/vscode-custom-css/issues"
"url": "https://github.com/EYHN/vscode-vibrancy/issues"
},
"preview": true,
"icon": "images/logo.png",
@ -35,47 +35,22 @@
"contributes": {
"commands": [
{
"command": "extension.installCustomCSS",
"title": "Enable Custom CSS and JS"
"command": "extension.installVibrancy",
"title": "Enable Vibrancy"
},
{
"command": "extension.uninstallCustomCSS",
"title": "Disable Custom CSS and JS"
"command": "extension.uninstallVibrancy",
"title": "Disable Vibrancy"
},
{
"command": "extension.updateCustomCSS",
"title": "Reload Custom CSS and JS"
"command": "extension.updateVibrancy",
"title": "Reload Vibrancy"
}
],
"configuration": {
"title": "Custom CSS/JS Configuration",
"properties": {
"vscode_custom_css.imports": {
"description": "Custom CSS/JS files, as an array of URLs, not file paths",
"type": "array",
"default": []
},
"vscode_custom_css.statusbar": {
"description": "Enable Status Indicator",
"type": "boolean",
"default": true
},
"vscode_custom_css.policy": {
"description": "Disable vscode Content Policy (required if loading from URL)",
"type": "boolean",
"default": false
}
}
}
]
},
"devDependencies": {},
"dependencies": {
"file-url": "^2.0.2",
"xmlhttprequest": "^1.8.0"
},
"__metadata": {
"id": "1b160753-ae5e-42bb-82ad-d115ce5c10f4",
"publisherDisplayName": "be5invis",
"publisherId": "8c148d69-cbc6-480b-bd8b-a42715926324"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 292 KiB

After

Width:  |  Height:  |  Size: 626 KiB

BIN
src/blurbehind.node Normal file

Binary file not shown.

View File

@ -9,7 +9,7 @@ var fileUrl = require('file-url');
function activate(context) {
console.log('vscode-customcss is active!');
console.log('vscode-vibrancy is active!');
process.on('uncaughtException', function (err) {
if (/ENOENT|EACCES|EPERM/.test(err.code)) {
@ -25,7 +25,130 @@ function activate(context) {
var base = appDir + (isWin ? '\\vs\\code' : '/vs/code');
var htmlFile = base + (isWin ? '\\electron-browser\\workbench\\workbench.html' : '/electron-browser/workbench/workbench.html');
var htmlFileBack = base + (isWin ? '\\electron-browser\\workbench\\workbench.html.bak-customcss' : '/electron-browser/workbench/workbench.bak-customcss');
var htmlFileBack = base + (isWin ? '\\electron-browser\\workbench\\workbench.html.bak-vibrancy' : '/electron-browser/workbench/workbench.bak-vibrancy');
var injectHTML = `
<script>
w = nodeRequire('electron')
.remote
.getCurrentWindow();
w.setBackgroundColor('#00000000');
${isWin ?
`
bbnative = nodeRequire(${JSON.stringify(__dirname + '\\blurbehind.node')});
bbnative.blurbehind(w.getNativeWindowHandle(), true);
` :
`w.setVibrancy('ultra-dark');`
}
// hack
const width = w.getBounds().width;
w.setBounds({
width: width + 1,
});
w.setBounds({
width,
});
</script>
<style>
html {
background: 'transparent' !important;
}
.scroll-decoration {
box-shadow: none !important;
}
.minimap, .editor-scrollable>.decorationsOverviewRuler {
opacity: 0.6;
}
.editor-container {
background: transparent !important;
}
.search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,
.monaco-editor-background,
.monaco-editor .margin,
.monaco-workbench>.part>.content,
.monaco-workbench>.editor>.content>.one-editor-silo.editor-one,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title,
.monaco-workbench>.part>.title,
.monaco-workbench,
.monaco-workbench>.part,
body {
background: transparent !important;
}
.editor-group-container>.tabs {
background-color: transparent !important;
}
.editor-group-container>.tabs .tab {
background-color: transparent !important;
}
.editor-group-container>.tabs .tab.active, .editor-group-container>.tabs .monaco-breadcrumbs {
background-color: rgba(37, 37, 37,0.3) !important;
}
.monaco-list.settings-toc-tree .monaco-list-row.focused {
outline-color: rgb(37, 37, 37,0.6) !important;
}
.monaco-list.settings-toc-tree .monaco-list-row.selected,
.monaco-list.settings-toc-tree .monaco-list-row.focused,
.monaco-list .monaco-list-row.selected,
.monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
background-color: rgb(37, 37, 37,0.6) !important;
}
.monaco-list.settings-editor-tree .monaco-list-row {
background-color: transparent !important;
outline-color: transparent !important;
}
.monaco-inputbox {
background-color: rgba(41, 41, 41,0.2) !important;
}
.monaco-editor .selected-text {
background-color: rgba(58, 61, 65,0.6) !important;
}
.monaco-editor .focused .selected-text {
background-color: rgba(38, 79, 120,0.6) !important;
}
.monaco-editor .view-overlays .current-line {
border-color: rgba(41, 41, 41,0.2) !important;
}
.extension-editor,
.monaco-inputbox>.wrapper>.input,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,
.preferences-editor>.preferences-header,
.preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,
.monaco-editor, .monaco-editor .inputarea.ime-input {
background: transparent !important;
}
.monaco-workbench>.part.sidebar {
background-color: rgba(37, 37, 38, 0.3) !important;
}
.editor-group-container>.tabs .tab {
border: none !important;
}
</style>
`
function httpGet(theUrl)
{
@ -38,40 +161,14 @@ function activate(context) {
}
function replaceCss() {
var config = vscode.workspace.getConfiguration("vscode_custom_css");
console.log(config);
if (!config || !config.imports || !(config.imports instanceof Array)) {
vscode.window.showInformationMessage(msg.notconfigured);
console.log(msg.notconfigured);
fUninstall();
return;
};
var injectHTML = config.imports.map(function (x) {
if (!x) return;
if (typeof x === 'string') {
if (/^file.*\.js$/.test(x)) return '<script src="' + x + '"></script>';
if (/^file.*\.css$/.test(x)) return '<link rel="stylesheet" href="' + x + '"/>';
if (/^http.*\.js$/.test(x)) return '<script>' + httpGet(x) + '</script>';
if (/^http.*\.css$/.test(x)) return '<style>' + httpGet(x) + '</style>';
}
}).join('');
try {
var html = fs.readFileSync(htmlFile, 'utf-8');
html = html.replace(/<!-- !! VSCODE-CUSTOM-CSS-START !! -->[\s\S]*?<!-- !! VSCODE-CUSTOM-CSS-END !! -->/, '');
html = html.replace(/<!-- !! VSCODE-VIBRANCY-START !! -->[\s\S]*?<!-- !! VSCODE-VIBRANCY-END !! -->/, '');
if (config.policy) {
html = html.replace(/<meta.*http-equiv="Content-Security-Policy".*>/, '');
}
var indicatorClass = ''
var indicatorJS = ''
if (config.statusbar){
indicatorClass = '__CUSTOM_CSS_JS_INDICATOR_CLS'
indicatorJS = `<script src="${fileUrl(__dirname + '/statusbar.js')}"></script>`
}
html = html.replace(/<meta.*http-equiv="Content-Security-Policy".*>/, '');
html = html.replace(/(<\/html>)/,
'<!-- !! VSCODE-CUSTOM-CSS-START !! -->' + indicatorJS + injectHTML + '<!-- !! VSCODE-CUSTOM-CSS-END !! --></html>');
'<!-- !! VSCODE-VIBRANCY-START !! -->' + injectHTML + '<!-- !! VSCODE-VIBRANCY-END !! --></html>');
fs.writeFileSync(htmlFile, html, 'utf-8');
enabledRestart();
} catch (e) {
@ -100,6 +197,7 @@ function activate(context) {
function installItem(bakfile, orfile, cleanInstallFunc) {
fs.stat(bakfile, function (errBak, statsBak) {
console.log(errBak, statsBak)
if (errBak) {
// clean installation
cleanInstallFunc();
@ -197,13 +295,13 @@ function activate(context) {
fUninstall(true);
}
var installCustomCSS = vscode.commands.registerCommand('extension.installCustomCSS', fInstall);
var uninstallCustomCSS = vscode.commands.registerCommand('extension.uninstallCustomCSS', fUninstall);
var updateCustomCSS = vscode.commands.registerCommand('extension.updateCustomCSS', fUpdate);
var installVibrancy = vscode.commands.registerCommand('extension.installVibrancy', fInstall);
var uninstallVibrancy = vscode.commands.registerCommand('extension.uninstallVibrancy', fUninstall);
var updateVibrancy = vscode.commands.registerCommand('extension.updateVibrancy', fUpdate);
context.subscriptions.push(installCustomCSS);
context.subscriptions.push(uninstallCustomCSS);
context.subscriptions.push(updateCustomCSS);
context.subscriptions.push(installVibrancy);
context.subscriptions.push(uninstallVibrancy);
context.subscriptions.push(updateVibrancy);
}
exports.activate = activate;

View File

@ -1,10 +1,8 @@
exports.messages = {
admin: 'Run VS Code with admin privileges so the changes can be applied.',
enabled: 'Custom CSS and JS enabled. Restart to take effect. If Code complains about it is corrupted, CLICK DON\'T SHOW AGAIN. See README for more detail.',
disabled: 'Custom CSS and JS disabled and reverted to default. Restart to take effect.',
already_disabled: 'Custom CSS and JS already disabled.',
enabled: 'Vibrancy enabled. Restart to take effect. If Code complains about it is corrupted, CLICK DON\'T SHOW AGAIN. See README for more detail.',
disabled: 'Vibrancy disabled and reverted to default. Restart to take effect.',
already_disabled: 'Vibrancy already disabled.',
smthingwrong: 'Something went wrong: ',
restartIde: 'Restart Visual Studio Code',
notfound: 'Custom CSS and JS not found.',
notconfigured: 'Custom CSS and JS path not configured. Please set "vscode_custom_css.imports" in your user settings.'
restartIde: 'Restart Visual Studio Code'
};

View File

@ -1,13 +0,0 @@
(function () {
function patch() {
const e1 = document.querySelector('#workbench\\.parts\\.statusbar');
const e2 = document.querySelector('#workbench\\.parts\\.statusbar > .__CUSTOM_CSS_JS_INDICATOR_CLS');
if (e1 && !e2) {
let e = document.createElement('span');
e.className = 'statusbar-item right __CUSTOM_CSS_JS_INDICATOR_CLS';
e.innerHTML = `<i class="octicon octicon-paintcan"></i>`;
e1.appendChild(e)
}
};
setInterval(patch, 5000)
})();

BIN
step-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

BIN
step-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
vscode-vibrancy-1.0.0.vsix Normal file

Binary file not shown.

BIN
vscode-vibrancy-1.0.1.vsix Normal file

Binary file not shown.

BIN
warns.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

13
yarn.lock Normal file
View File

@ -0,0 +1,13 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
file-url@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/file-url/-/file-url-2.0.2.tgz#e951784d79095127d3713029ab063f40818ca2ae"
integrity sha1-6VF4TXkJUSfTcTApqwY/QIGMoq4=
xmlhttprequest@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
integrity sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=