Skip to content

Instantly share code, notes, and snippets.

@rieckpil
Last active Oct 14, 2021
Embed
What would you like to do?
Custom Crayon Theme (Inspired by the IntelliJ IDEA Light Theme)
.crayon-theme-rieckpil {
border-width: 0px !important;
border-color: #999 !important;
border-style: solid !important;
text-shadow: none !important;
background: #fdfdfd !important;
}
.crayon-theme-rieckpil-inline {
border-width: 1px !important;
border-color: #ddd !important;
border-style: solid !important;
background: #fafafa !important;
}
.crayon-theme-rieckpil .crayon-table .crayon-nums {
background: #F4F4F4 !important;
color: #000000 !important;
border-right-width: 0px !important;
border-right-color: #008000 !important;
border-right-style: solid !important;
}
.crayon-theme-rieckpil .crayon-striped-line {
background: #f7f7f7 !important;
}
.crayon-theme-rieckpil .crayon-striped-num {
background: #dddd !important;
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-marked-line {
background: #fffee2 !important;
border-width: 1px !important;
border-color: #e9e579 !important;
}
.crayon-theme-rieckpil .crayon-marked-num {
color: #000000 !important;
background: #eee !important;
border-width: 1px !important;
border-color: #eee !important;
}
.crayon-theme-rieckpil .crayon-marked-line.crayon-striped-line {
background: #faf8d1 !important;
}
.crayon-theme-rieckpil .crayon-marked-num.crayon-striped-num {
background: #eee !important;
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-marked-line.crayon-top {
border-top-style: solid !important;
}
.crayon-theme-rieckpil .crayon-marked-num.crayon-top {
border-top-style: solid !important;
}
.crayon-theme-rieckpil .crayon-marked-line.crayon-bottom {
border-bottom-style: solid !important;
}
.crayon-theme-rieckpil .crayon-marked-num.crayon-bottom {
border-bottom-style: solid !important;
}
.crayon-theme-rieckpil .crayon-info {
background: #faf9d7 !important;
border-bottom-width: 1px !important;
border-bottom-color: #b1af5e !important;
border-bottom-style: solid !important;
color: #7e7d34 !important;
}
.crayon-theme-rieckpil .crayon-toolbar {
background: #F4F4F4 !important;
border-bottom-width: 1px !important;
border-bottom-color: #BBB !important;
border-bottom-style: solid !important;
}
.crayon-theme-rieckpil .crayon-toolbar > div {
float: left !important;
}
.crayon-theme-rieckpil .crayon-toolbar .crayon-tools {
float: right !important;
}
.crayon-theme-rieckpil .crayon-title {
color: #333 !important;
}
.crayon-theme-rieckpil .crayon-language {
color: #999 !important;
}
.crayon-theme-rieckpil .crayon-button {
background-color: #F4F4F4 !important;
}
.crayon-theme-rieckpil .crayon-button:hover {
background-color: #EEE !important;
color: #666;
}
.crayon-theme-rieckpil .crayon-button.crayon-pressed:hover {
background-color: #EEE !important;
color: #666;
}
.crayon-theme-rieckpil .crayon-button.crayon-pressed {
background-color: #BCBCBC !important;
color: #FFF;
}
.crayon-theme-rieckpil .crayon-button.crayon-pressed:active {
background-color: #BCBCBC !important;
color: #FFF;
}
.crayon-theme-rieckpil .crayon-button:active {
background-color: #BCBCBC !important;
color: #FFF;
}
.crayon-theme-rieckpil .crayon-pre .crayon-c {
color: #808080 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-s {
color: #008000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-p {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-ta {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-k {
color: #000080 !important;
font-weight: bold !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-st {
color: #000080 !important;
font-weight: bold !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-r {
color: #000080 !important;
font-weight: bold !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-t {
color: #000080 !important;
font-weight: bold !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-m {
color: #000080 !important;
font-weight: bold !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-i {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-e {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-v {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-cn {
color: #0828fb !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-o {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-sy {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-n {
color: #808000 !important;
font-style: italic !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-f {
color: #000000 !important;
}
.crayon-theme-rieckpil .crayon-pre .crayon-h {
color: #006fe0 !important;
}
@rieckpil
Copy link
Author

rieckpil commented Oct 14, 2021

Copy the content and create a rieckpil folder within the Crayon themes/ folder and paste it to a file called rieckpil.css. Next, refresh the Crayon settings page in your WordPress web interface and select the theme from the list.

If you want to rename this theme, replace all occurrences of rieckpil with yourtheme.

Ensure you're using the correct file permission for your web server to access the folder and the .css file. (hint sudo chown -R www-data:www-data rieckpil/)

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