-
Notifications
You must be signed in to change notification settings - Fork 81
Custom Slate Themes
To make basic changes to the sizes, padding, and colors, you can edit
source/stylesheets/_variables.scss
.
If you don't need to make any major changes, this is the preferred way to edit Slate, since it makes updating Slate a
little easier.
If you want to make more significant changes to Slate's overall look and feel, feel free to dive into
source/stylesheets/screen.css.scss
and
source/stylesheets/print.css.scss
(the print stylesheet). They're fairly well documented and organized, but if you need some help, feel free to submit an
issue.
If you wish to modify the styling of code highlighting, while you can modify the above SCSS files and include rules,
you will have a much easier time by modifying the Slate Rouge theme, using a different builtin Rouge theme, or
by creating your own. You can modify the theme Slate uses by diving into
lib/monokai_sublime_slate.rb
,
which is an extension off the Rouge MonokaiSublime theme. Alternatively, if you wish to use a different Rouge
theme, you will want to edit
source/layouts/layout.erb
and modify this
line to point to the theme you want:
<%= Rouge::Themes::MonokaiSublimeSlate.render(:scope => '.highlight') %>
A full list of available builtin Rouge themes can be found here. You can also see the list of available tokens you can style here.
Some people have done some cool heavy styling on their Slate pages — you can take a look at their Slate sources below: