Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is the stylesheet I use in Atom to get the design I like. It requires Fira Code (mono font) and FlottFlott (ligature font). But you can swap out your own fonts by replacing them in the sheet.
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
*
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
* http://lesscss.org
*/
/*
* Examples
* (To see them, uncomment and save)
*/
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// To style other content in the text editor's shadow DOM, use the ::shadow expression
// atom-text-editor::shadow .cursor {
// // border-color: red;
// }
// Adding ligatures
atom-text-editor {
font-family: 'Fira Code';
font-style: normal;
text-rendering: optimizeLegibility;
}
atom-text-editor.editor {
.syntax--string.syntax--quoted,
.syntax--string.syntax--regexp {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
.syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--control.syntax--flow.syntax--js,
.syntax--storage, .syntax--type .syntax--function {
vertical-align: baseline;
font-family: 'flottflott';
height: inherit;
font-size: 1.5em;
line-height: 1rem;
}
.syntax--source.syntax--js.syntax--jsx,
.syntax--storage.syntax--type.syntax--function.syntax--arrow.syntax--js,
.syntax--variable, .syntax--support.syntax--function.syntax--construct {
font-family: 'Fira Code';
font-style: normal;
}
.syntax--string.syntax--unquoted.syntax--js {
color: #CDD3DE;
}
.syntax--entity.syntax--name {
font-weight: bold;
}
.syntax--review {
font-family: 'Fira Code';
}
.syntax--keyword.syntax--control:not(.syntax--regexp) {
vertical-align: baseline;
font-family: 'flottflott';
height: inherit;
font-size: 1.5em;
line-height: 1rem;
}
.syntax--storage.syntax--type.syntax--class {
&.syntax--note, &.syntax--todo, &.syntax--review {
vertical-align: baseline;
font-family: 'Fira Code';
height: inherit;
font-weight: 600;
font-size: 1.3em;
line-height: 1rem;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment