Git Product home page Git Product logo

atom-transparency's Introduction

How To Achieve Atom Editor Transparency

In atom, there is no easy config (yet) to set window or background transparency as you would in iTerm or TextMate. Here's a straightforward guide on how to achieve transparent window awesomeness.

This has been tested on both macOS and Ubuntu 14.04 desktop, for Atom versions 1.0 up through 1.11.

Atom must be built from source with 2 additional lines of code. This makes Atom run as a frameless window which allows transparency to be enabled within Electron. After cloning or forking Atom, add the following to options:

frame: false
transparent: true

in src/browser/atom-window.coffee (pre-v1.9) or src/main-process/atom-window.coffee in versions 1.9+,

changing this:

options =
  show: false
  title: 'Atom'
  backgroundColor: "#fff"
  ...

to this:

options =
  frame: false
  transparent: true
  show: false
  title: 'Atom'
  #backgroundColor: "#fff"
  ...

Note backgroundColor is commented out.

Then run:

./script/clean && ./script/build

Refer to the official build guides for additional instructions if necessary. You may want to build a debian package, for example.

This can take awhile, but once complete, fire up Atom.

On linux, add an additional --enable-transparent-visuals flag while starting atom.

In Atom v1.7+, atom must be started with an additional --disable-gpu flag. Otherwise, there will be a lot of UI flickering.

Open up your editor LESS stylesheet (⌘-shift-p or ctrl-shift-p, then Application: Open Your Stylesheet), and add the following CSS. This is a basic guide - you can experiment with your own settings to get the effect you want. For example, to avoid text-on-text collisions in the autocomplete popups, I set atom-overlay > * to near-complete opacity.

html, html * {
  background: rgba(0, 0, 0, 0) !important;
}

atom-pane, atom-panel, atom-notification {
  background: rgba(0, 0, 0, 0.5) !important;
}

atom-overlay > * {
  background: rgba(0, 0, 0, 0.9) !important;
}

atom-text-editor::shadow {
  .cursor-line {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .selection .region {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .gutter {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}

In the CSS above, this works pre-v1.9:

html * {
  background: rgba(0, 0, 0, 0) !important;
}

but for v1.9+, this must be:

html, html * {
  background: rgba(0, 0, 0, 0) !important;
}

That's it--pretty simple!

atom-transparency's People

Contributors

staticskies avatar transcranial avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

atom-transparency's Issues

Doesn't work on Atom 1.25.0-dev

Tried cloning current atom repo (v1.2.5.0-dev). Added following lines to styles.less:

// following added for transparency
html, html * {
  background: rgba(0, 0, 0, 0) !important;
}

atom-pane, atom-panel, atom-notification {
  background: rgba(0, 0, 0, 0.5) !important;
}

atom-overlay > * {
  background: rgba(0, 0, 0, 0.9) !important;
}

atom-text-editor::shadow {
  .cursor-line {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .selection .region {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .gutter {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}

But Atom ends up looking like this:
screen shot 2017-12-29 at 11 24 32 am 2

I tried switching back to the branch 1.11-release-archived, but I think some parts of it may be incompatible with current node modules, since the build step is failing with some deprecation errors.

Any ideas? Or do you happen to know the last release this will work on? Thanks.

Wiki練習用

概要

練習用のWikiです。
マークダウンは苦手です。

日時でやること

  • 高麗さんの日報提出
  • マカロニの日報提出
  • 業界ニュースピックアップ
  • メールチェック
  • カレンダーチェック

週次でやること

  • 業界ニュースピックアップ(月曜日)
  • 議事録の必要事項記入(火曜日)
  • 一週間の振り返り(金曜日)

月次でやること

  • 理解度テスト
  • 勤怠スレ立て
  • 一ヶ月の振り返り(最終日)

関連課題


関連する課題があればここにリンク形式で載せる(Backlog)

親課題


親の課題があればここにリンク形式で載せる(Backlog)

備考


別途記載する必要があれば書く

Transparency Modifications Not Functioning in Atom 1.61

Have made modifications for version 1.28 as directed by rstacruz/atom-transparency

master ✗ $ grep transparent -A 2 -B 4 src/main-process/atom-window.js
    const options = {
      show: false,
      title: getAppName(),
      tabbingIdentifier: 'atom',
      transparent: true,
      webPreferences: {
        // Prevent specs from throttling when the window is in the background:

Unfortunately, there doesn't seem to be any transparency whatsoever. Curious if there are additional modifications required beyond what was specified for 1.28 that I have not identified.

OS: Debian 11 bullseye
DE: GNOME 3.38.4
Node: v16.14.0
npm: 8.5.3

image

Make this a plugin?

Hi,

Would it be possible to make this an Atom plugin that someone can just install?

Thanks,

archlinux

iam arch linux how can i make it ??

Cannot find module 'fs-extra'

@transcranial Trying to install this on win 10, but I get this;

18:32:09 Wed Jul 19 $ ./script/clean && ./script/build
module.js:471
    throw err;
    ^

Error: Cannot find module 'fs-extra'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\atom\script\lib\clean-caches.js:3:12)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

I did; npm install -g fs-extra
Got this; -- [email protected]

But did not work.

Additional info;
node; v6.11.1
npm; 3.10.10

Maybe you forgot some to add some dependencies? (fs-extra as a dependencie in the package.json, I can't find it there?), or I may be overseeing something here? Did not work for me tough only adding "fs-extra": "4.0.0", in package.json

It doesn't work now?

Hi,
I wanna make atom transparent like yours, and I do the same configs like yours,
the only difference is I write the css into style.less
but it doesn't work after build.

Anything wrong with current version?
Or do you have the version that works? Push it to a repo?

hoping for your reply, Tks !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.