Skip to content

Instantly share code, notes, and snippets.

@crucialfelix
Last active September 16, 2021 18:39
Show Gist options
  • Save crucialfelix/7344ae3f609a7c289e34 to your computer and use it in GitHub Desktop.
Save crucialfelix/7344ae3f609a7c289e34 to your computer and use it in GitHub Desktop.
Powerline style status bar and cursor styling for Atom vim-mode
// add or import these into your Atom styles.less
/****************** VIM MODE STATUS BAR ****************************************/
// green
@normal-bg: rgb(105, 238, 103);
// blue
@insert-bg: rgb(7, 193, 242);
// yellowish
@visual-bg: rgb(255, 206, 98);
// change the current cursor-line background color
// based on vim mode
atom-text-editor.is-focused.editor {
.cursor-line {
// background: rgba(64, 64, 37, 5);
background: fadeout(@normal-bg, 80%);
}
&.insert-mode {
.cursor-line {
background: fadeout(@insert-bg, 90%);
}
}
}
// vim mode in the status bar at the bottom
// make it nice and big so you can see it out of the corner of your eye
// without thinking about it.
.status-bar-vim-mode-normal,
.status-bar-vim-mode-insert,
.status-bar-vim-mode-visual {
font-weight: bold;
text-align: center;
font-size: 1.5em;
width: 18rem;
text-transform: uppercase;
}
.status-bar-vim-mode-normal {
background: @normal-bg;
color: rgb(4, 111, 11);
}
.status-bar-vim-mode-insert {
background: @insert-bg;
color: white;
}
.status-bar-vim-mode-visual {
background: @visual-bg;
color: rgb(168, 117, 5);
}
// change cursor color in normal mode
atom-text-editor.vim-mode.normal-mode.is-focused.editor {
.cursor {
background-color: @normal-bg;
}
}
// visual mode and selected text
atom-text-editor.editor .selection .region {
background-color: fadeout(@visual-bg, 75%);
}
@andreikoenig
Copy link

@crucialfelix, this does not seem to work for me. Has Atom updated something? I am on Atom 1.13.1

@crucialfelix
Copy link
Author

crucialfelix commented Jan 27, 2017

I just updated the gist to the current markup since Atom has removed the shadow DOM.

However it was still working for me in 1.13.1 - they just upgrade it automatically on startup and post a deprecation warning. I'm not sure why yours isn't working.

Actually maybe I do know - you have to restart atom or Window:reload or they won't upgrade your styles.less. They only do it on startup, not if you just edit it.

check the medium post again.

@andrewdc
Copy link

andrewdc commented Mar 15, 2017

hey, @andreikoenig If you are using atom vim-mode-plus like me the selectors need to be updated:

.status-bar-vim-mode-plus-normal,
.status-bar-vim-mode-plus-insert,
.status-bar-vim-mode-plus-visual 

Note -plus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment