• Stars
    star
    205
  • Rank 191,264 (Top 4 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vibrancy effect for Atom One themes

One Vibrancy

Note: ⚠️ This package can currently cause Atom to crash. See this comment for more infos.

This package adds a vibrancy effect (translucent background) to Atom One themes.

one-vibrancy-dark

one-vibrancy-light

Note: Works only on macOS

Install

apm install one-vibrancy

Settings

In the package settings you can switch between different effects:

  • auto (default) -> Automatically switches between dark and medium-light based on the current One UI theme
  • auto-opaque -> Automatically switches between ultra-dark and light based on the current One UI theme
  • light
  • medium-light
  • dark
  • ultra-dark

FAQ

I can't see any vibrancy!

  1. Make sure you're using Atom 1.19 or higher.
  2. Make sure you use either One Dark UI or One Light UI. Other themes might work too, see next question.
  3. Make sure you have macOS's "Reduce transparency" disabled, see this gif.

Does it work for other Atom themes too?

Possibly. But only the One themes are maintained.

If there are parts that are not translucent, you can override it in your styles.less file. Find the right selector in the DevTools, then make the background transparent. For example:

.one-vibrancy {
  // <- Add selectors here
  atom-pane,
  atom-panel,
  .tree-view {
    background-color: transparent !important;
  }
}

The font doesn't look sharp!

Yes, sub-pixel aliasing is lost when using a transparent background. A small price for a cool effect in return. 😉

Is performance ok?

Hard to say. Haven't noticed major slowdowns, but an opaque background is probably still better for performance.

More Repositories

1

duotone-dark-syntax

DuoTone dark - A syntax theme for Atom
CSS
271
star
2

filter.css

A collection of CSS filter combos
CSS
135
star
3

ZEN-Player

HTML5 Audio player
CSS
119
star
4

duotone-syntax

Master template for DuoTone syntax themes
CSS
117
star
5

tone-syntax

An Atom theme with customizable colors
CSS
82
star
6

umbrUI

appearance:none styling.
CSS
61
star
7

duotone-light-syntax

DuoTone light - A syntax theme for Atom
CSS
58
star
8

duotone-dark-sea-syntax

A dark blue-green DuoTone syntax theme for Atom
CSS
48
star
9

simurai.com

simurai's site
JavaScript
34
star
10

duotone-dark-space-syntax

A dark blue-red DuoTone syntax theme for Atom
CSS
33
star
11

cssconf-app

A totally fake CSSConf app
CSS
30
star
12

one-dark-vivid-syntax

A more vivid One Dark Syntax theme
CSS
26
star
13

chameleon-ui

A color shifting UI theme for Atom.
CSS
20
star
14

chameleon-syntax

A color shifting syntax theme for Atom.
CSS
16
star
15

duotone-dark-forest-syntax

A dark green-yellow DuoTone syntax theme
CSS
14
star
16

duotone-dark-sky-syntax

A dark blue-yellow DuoTone syntax theme for Atom
CSS
11
star
17

user-styles

Customize your beloved websites
CSS
11
star
18

duotone-dark-earth-syntax

A dark brown-orange DuoTone syntax theme
CSS
10
star
19

vscode-tritone

JavaScript
7
star
20

digit-info

Demo showing how you can change color, size and spacing of the Digit components.
CSS
3
star
21

roots

Back to the :roots
CSS
2
star
22

digit-layout

Some starter layouts to be used with the Digit UI set.
CSS
2
star
23

open-from-github

Opens stuff from github.com in Atom
JavaScript
2
star
24

none-syntax

None Syntax theme for Atom
CSS
1
star