@phoenix-plugin-registry/seandeee.funlightcolors/theme.less

Newly Updated Fun Color Custom Theme, try it now!

/* Colors */

@white: #ffffff;
@light: #f2f2f2;
@gray: #e6e6e6;
@dark: rgba(0, 0, 0, 0.7);
@green: #8ed576;
@darkblue: #78aad6;
@aqua: #99ebff;
@orangered: #FCA369;
@yellow: #ffec99;
@beige: #cda869;
@purple: #D6ACD6;
@orange: #ffab64;
@red: #f2777a;
@php: #9c27b0;
/*Custom Colors */

@htmltagcolor: #9999ff;
@htmlattribute: #f27375;
@stringcolor: #bee7b1;
@jsvariable: #249d7f;
@var1: #fffccc;
@var2: #d1b3ff;
@var3: #99e6ff;
@cssvalue: #7561ff;
@cssclass: #f8b068;
@numbercstm: #ed6e55;
/* Editor styling */

//@background: rgb(26, 26, 26, 15); // Code background
@background: #1e1e1e; // Code background
//@foreground: #cccccc; // Code foreground
@foreground: #ddd; // Code foreground
@comment: #8a8a80; // Comment color
@comment-active: #adada6; // Comment active 
@cursor: #ffffff; // Cursor color 
@activeline-background: rgb(64, 64, 64, 0.2); // Active line
@activeline-foreground: rgba(0, 0, 0, 0.3);
@matchingtag-background: rgba(89, 89, 89, 0.7); // Matching html tag
@selected-background: rgba(255, 255, 255, 0.08); // Selected text
@matchingbracket-background: rgba(102, 204, 255, .5); // Matching bracket
/* Inline styling */

@string: @stringcolor; // String
@tag: @htmltagcolor; // HTML tag and primary variable
@variable: @jsvariable; // JS Var
@variable2: @light; // Alt variable
@number: @numbercstm; // Numb #
@definition: @cssvalue; // CSS value
@keyword: @var1; // CSS !important, JavaScript variable definition and function
@operator: @beige; // Math
@meta: @php; // DOCTYPE and PHP background
@meta-color: @light; // DOCTYPE and PHP font color
@id: #f8b068; // CSS ID, built in
@attribute: @htmlattribute; // HTML attr
@property: #6ce890; // CSS key
@qualifier: @cssclass; // CSS class
@error: @red; // Error!
/* Styles */

.CodeMirror,
.CodeMirror-scroll {
    background: @background;
    color: @foreground;
    line-height: 1.9;
}

// Overlay
.CodeMirror-selected {
    background: @selected-background  !important;
    border-bottom: 2px solid #ff6666;
}

// Selected text
.CodeMirror-linenumber {
    color: @comment;
}

// Line numbers
.cm-comment {
    color: @comment  !important;
    text-shadow: 0 0 8px @comment;
}

.cm-keyword {
    color: @keyword;
    text-shadow: 0 0 8px @keyword;

}

// Keyword
.cm-atom {
    color: @definition;
    text-shadow: 0 0 8px @definition;
}

// Definition
.cm-number {
    color: @number;
    text-shadow: 0 0 8px @number;
}

// Number
.cm-def {
    color: @definition;
    text-shadow: 0 0 8px @definition;
}

// Definition
.cm-variable {
    color: @var2;
    text-shadow: 0 0 8px @var2;
}

// Variable
span.cm-variable-2 {
    color: @var3;
    text-shadow: 0 0 8px @var3;
}

// Variable 2
span.cm-tag {
    color: @tag;
    text-shadow: 0 0 8px @tag;
}

// Tag
span.cm-variable-3,
span.cm-def {
    color: @variable;
    text-shadow: 0 0 8px @variable;
}

// Variable
.cm-operator {
    color: @operator;
    text-shadow: 0 0 8px @operator;
}

// Math
.cm-string {
    color: @string;
    text-shadow: 0 0 8px @string;
}

// String
.cm-string-2 {
    color: @string;
    text-shadow: 0 0 8px @string;
}

.cm-meta {
    background: @meta;
    color: @meta-color;
    border-radius: 2px;
}

// Meta
.cm-builtin {
    color: @id;
}

// Built in and id
.cm-tag {
    color: @tag;
}

// Tag
.cm-attribute {
    color: @attribute;
    text-shadow: 0 0 8px @attribute;

}

// Attribute
.cm-header {
    color: @attribute;
    text-shadow: 0 0 8px @attribute;
}

// Header
.cm-hr {
    color: @comment;
}

.cm-link {
    color: @operator;
}

.cm-error {
    background: #ed5c65;
    color: #fff;
    border-radius: 2px;

    /*color: @error;
    background: RGBA(245, 119, 120, .1);*/
}

.cm-qualifier {
    color: @qualifier;
    text-shadow: 0 0 8px @qualifier;
}

// Qualifier
.cm-property {
    color: @property;
    text-shadow: 0 0 8px @property;

}

// Property
.cm-quote {
    color: @keyword
}

// Quote
.cm-link,
.cm-link.cm-variable-2 {
    color: @darkblue  !important
}

// Links
.cm-em {
    color: @purple
}

// Italic
.cm-strong {
    color: @orangered
}

// Bold
.cm-image {
    color: @darkblue
}

// Image
.cm-image-marker {
    color: @purple
}

.cm-header {
    color: @orange
}

.cm-string.cm-variable-2.cm-url {
    color: @green
}

/* Additional styles */

.CodeMirror-matchingbracket {
    // Matching bracket
    outline: 1px solid #888;
    color: white !important;
    background: @matchingbracket-background;
    border-bottom: 2px solid #ff6666;
    border-radius: 2px;
}

.CodeMirror-activeline .cm-comment {
    color: @comment-active  !important;
}

// Active comment
.CodeMirror-matchingtag {
    background: @matchingtag-background;
}

// Matching tag
.CodeMirror .CodeMirror-cursor {
    border-left: 1px solid @cursor  !important;
}

.CodeMirror .CodeMirror-overwrite .CodeMirror-cursor {
    border-left: none !important;
    border-bottom: 1px solid @cursor;
    width: 1.2ex;
}

.CodeMirror-guttermarker {
    color: @white;
}

.CodeMirror-guttermarker-subtle {
    color: @gray;
}

.CodeMirror .CodeMirror-gutters {
    background-color: @background;
    border-right: 0;
}

.CodeMirror-gutter-elt {
    color: @comment  !important;
}

.CodeMirror-activeline .CodeMirror-gutter-elt {
    color: #fff !important;
}

.CodeMirror .CodeMirror-linenumber {
    color: @activeline-foreground;
}

.CodeMirror-activeline-background,
.CodeMirror-activeline .CodeMirror-gutter-elt {
    background: @activeline-background  !important;
}

.cm-meta.CodeMirror-searching {
    background: #000 !important;
    color: #fff !important;
    /*     background: #f5ee92 !important;
    color: #4e4225 !important;*/
    border-bottom: 2px solid #ff6666;
}

.cm-meta.CodeMirror-searching.searching-current-match {
    background: #000 !important;
    color: #fff !important;
    border-bottom: 2px solid #ff6666;
}