Cowlevel Deep Blue

A Solarized like dark theme for Cowlevel.net. Repository: https://github.com/Arcadia822/cowlevel_deep_blue

// ==UserScript==
// @name         Cowlevel Deep Blue
// @namespace    Arc
// @version      1.8.3
// @description  A Solarized like dark theme for Cowlevel.net. Repository: https://github.com/Arcadia822/cowlevel_deep_blue
// @author       Arcadia
// @match        https://*.cowlevel.net/*
// ==/UserScript==




// Color Palette by Paletton.com
// Palette URL:
// http://paletton.com/#uid=73B1q0kkDcj63jybndRts8ARM6w


// Primary color:

var MAIN_COLOR_0='rgb(26,44,64)';
var MAIN_COLOR_1='rgb(84,92,102)';
var MAIN_COLOR_2='rgb(48,60,72)';
var MAIN_COLOR_3='rgb(7,25,45)';
var MAIN_COLOR_4='rgb(1,16,34)';
var MAIN_COLOR_0_1='rgba(26,44,64,0.1)';
var MAIN_COLOR_0_2='rgba(26,44,64,0.4)';
var MAIN_COLOR_0_3='rgba(26,44,64,0.9)';
var MAIN_COLOR_0_4='rgba(26,44,64,1)';

// Secondary color (1):

var SECOND_COLOR_0 = 'rgb(70, 25, 62)';
var SECOND_COLOR_1 = 'rgb(112, 91,108)';
var SECOND_COLOR_2 = 'rgb(79, 51, 74)';
var SECOND_COLOR_3 = 'rgb(49,  4, 40)';
var SECOND_COLOR_4 = 'rgb(37,  0, 30)';

// Secondary color (2):

var THIRD_COLOR_0 = 'rgb(80, 94, 33)';
var THIRD_COLOR_1 = 'rgb(142,149,121)';
var THIRD_COLOR_2 = 'rgb(97,105, 68)';
var THIRD_COLOR_3 = 'rgb(52, 65,  5)';
var THIRD_COLOR_4 = 'rgb(38, 50,  0)';

// Complement color:

var COM_COLOR_0 = 'rgb(98, 73, 35)';
var COM_COLOR_1 = 'rgb(156,144,126)';
var COM_COLOR_2 = 'rgb(110, 95, 71)';
var COM_COLOR_3 = 'rgb(68, 44,  5)';
var COM_COLOR_4 = 'rgb(52, 31,  0)';

// Generated by Paletton.com (c) 2002-2014


var MAIN_BG_COLOR = MAIN_COLOR_0;
var SECOND_BG_COLOR = MAIN_COLOR_3;
var LIGHT_BG_COLOR = MAIN_COLOR_2;
var RED_BG_COLOR = SECOND_COLOR_0;
var INPUT_BG_COLOR = MAIN_BG_COLOR;


function addGlobalStyle(css) {
    var style = document.createElement('style');
    //style.type = 'text/css';
    style.innerHTML = css;
    document.body.appendChild(style);
}

function changeInlineAttrBySelector(selector, attr_name, css) {
    try {
        $(selector).css(attr_name,css);
    }
    catch (err) {
    }
}

(function() {
    'use strict';
    // Your code here...

    var css_value=`
        /* header */
        #snow-target.header-nav {
            background: `+SECOND_BG_COLOR+` !important;
        }
        .top-nav {
            background: `+SECOND_BG_COLOR+` !important;
        }
        .bottom-nav {
            background: `+SECOND_BG_COLOR+` !important;
        }
        nav.header-nav.clearfix {
            background: `+SECOND_BG_COLOR+` !important;
        }


        /* body */
        article.main.wrap-outer {
            background: `+MAIN_BG_COLOR+` !important;
        }
        article.main {
            background: `+MAIN_BG_COLOR+` !important;
        }

        /*
        body > article > section {
            background: `+MAIN_BG_COLOR+` !important;
        }
        */

        body {
            background: `+MAIN_BG_COLOR+` !important;
        }


        /* footer */
        .footer {
            background: `+MAIN_BG_COLOR+` !important;
        }


        /* transparent background*/
        .bg-gradient {
            background: -moz-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* ff3.6+ */
            background: -webkit-gradient(linear, 0 10%, 0 100%, from(`+MAIN_COLOR_0_1+`), to(`+MAIN_COLOR_0_4+`)) !important;
            background: -webkit-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* safari5.1+,chrome10+ */
            background: -o-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* opera 11.10+ */
            background: -ms-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* ie10+ */
            background: linear-gradient(180deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* w3c */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1A2C40', endColorstr='#1A2C40',GradientType=0 ); /* ie6-9 */
        }

        .bg-gradient-2 {
            background: -moz-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* ff3.6+ */
            background: -webkit-gradient(linear, 0 10%, 0 100%, from(`+MAIN_COLOR_0_1+`), to(`+MAIN_COLOR_0_4+`)) !important;
            background: -webkit-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* safari5.1+,chrome10+ */
            background: -o-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* opera 11.10+ */
            background: -ms-linear-gradient(270deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* ie10+ */
            background: linear-gradient(180deg, rgba(26,44,64,0.1) 0%, rgba(26,44,64,0.1) 10%, rgba(26,44,64,1) 100%); /* w3c */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1A2C40', endColorstr='#1A2C40',GradientType=0 ); /* ie6-9 */
        }

        .bg-gradient-3{
            background: -moz-linear-gradient(270deg, rgba(26,44,64,0) 0%, rgba(26,44,64,0) 20%, rgba(26,44,64,1) 85%, rgba(26,44,64,1) 100%); /* ff3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26,44,64,0)), color-stop(20%, rgba(26,44,64,0)), color-stop(85%, rgba(26,44,64,1)), color-stop(100%, rgba(26,44,64,1))); /* safari4+,chrome */
            background: -webkit-linear-gradient(270deg, rgba(26,44,64,0) 0%, rgba(26,44,64,0) 20%, rgba(26,44,64,1) 85%, rgba(26,44,64,1) 100%); /* safari5.1+,chrome10+ */
            background: -o-linear-gradient(270deg, rgba(26,44,64,0) 0%, rgba(26,44,64,0) 20%, rgba(26,44,64,1) 85%, rgba(26,44,64,1) 100%); /* opera 11.10+ */
            background: -ms-linear-gradient(270deg, rgba(26,44,64,0) 0%, rgba(26,44,64,0) 20%, rgba(26,44,64,1) 85%, rgba(26,44,64,1) 100%); /* ie10+ */
            background: linear-gradient(180deg, rgba(26,44,64,0) 0%, rgba(26,44,64,0) 20%, rgba(26,44,64,1) 85%, rgba(26,44,64,1) 100%); /* w3c */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1A2C40', endColorstr='#1A2C40',GradientType=0 ); /* ie6-9 */
        }

        .tip-window {
            background: `+MAIN_COLOR_0_4+`
        }


        /* settings */
            div.setting-card {
            background: `+SECOND_BG_COLOR+`
        }


        /* invite */
        section.invite-header.flex-box {
            background: `+SECOND_BG_COLOR+`
        }


        /* editor */


        /* layui */
        .layui-layer-wrap {
            background: `+MAIN_BG_COLOR+`
        }
        #layui-layer1 > div {
            background: `+MAIN_BG_COLOR+`
        }
        .layui-layer-title {
            background: `+MAIN_BG_COLOR+`
        }
        .feedback-layer {
            background: `+MAIN_BG_COLOR+`
        }
        .layer {
            background: `+MAIN_BG_COLOR+`
        }


        /* element */
        .vm-draft-card {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-article {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-answer {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-question {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-review {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-game {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-played {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-answer-comment {
            background: `+SECOND_BG_COLOR+`
        }
        div.vm-personal-card > .clearfix {
            background: `+LIGHT_BG_COLOR+`
        }
        .vm-style-double-bevel {
            background: `+LIGHT_BG_COLOR+`;
            padding-top: 3px
        }
        .vm-layer-more-user {
            background: `+MAIN_BG_COLOR+`
        }
        .vm-element-item {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-element-item.white.on {
            background: `+RED_BG_COLOR+`
        }
        .vm-element-game-item {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-element-header {
            background: `+SECOND_BG_COLOR+`
        }
        section.vm-user-item-card {
            background: `+SECOND_BG_COLOR+`
        }
        section.vm-invitation-item.bg-img {
            background-image: url("http://www.mountnoon.com/assets/files/2017-03-22/04:07:240-ticket2x-solarized.png")
        }
        .vm-feed-card-pic {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-video {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-feed-card-article-comment {
            background: `+SECOND_BG_COLOR+`
        }
        .vm-quote-article {
            background: `+LIGHT_BG_COLOR+`
        }


        /* comments */
        .comments.wrapper.fat-footer {
            background: `+SECOND_BG_COLOR+`
        }
        .comments {
            background: `+MAIN_BG_COLOR+`
        }


        /* other */
        .open-layer {
            background: `+SECOND_BG_COLOR+`
        }
        .setting-list {
            background: `+SECOND_BG_COLOR+`
        }
        .single-post {
            background: `+MAIN_BG_COLOR+`
        }


        .btn-card-border {
            background: `+SECOND_BG_COLOR+`
        }
        .notice-tip-window {
            background-color: `+MAIN_BG_COLOR+`
        }
        .notice-tab li.weidu {
            background-color: `+MAIN_BG_COLOR+`
        }
        .tip-tag {
            background: `+SECOND_BG_COLOR+`
        }
        div.tip-game {
            background: `+SECOND_BG_COLOR+`
        }
        .hot-box.cl-card {
            background: `+SECOND_BG_COLOR+`
        }
        .swiper-slide.cl-shadow.block {
            background: `+SECOND_BG_COLOR+`
        }
        .wanguo-swiper.shouchang-swiper.swiper-slide {
            background: `+SECOND_BG_COLOR+`
        }
        section.vm-avatar.flex-box {
            background: `+SECOND_BG_COLOR+`
        }
        .left-bevel {
            display: none
        }
        .right-bevel {
            display: none
        }
        .cl-card {
            background: `+SECOND_BG_COLOR+`
        }
        div.desc.sticky-box > .flex-box.flex-align-items-center.footer-info-box {
            background: `+SECOND_BG_COLOR+`
        }
        div.tag-box.white {
            background: `+SECOND_BG_COLOR+`
        }
        div.tag-box.white.on {
            background: `+RED_BG_COLOR+`
        }
        div.tag-box.white.hover {
            background: `+LIGHT_BG_COLOR+`
        }
        .add-question-box {
            background: `+SECOND_BG_COLOR+`
        }
    `;
    addGlobalStyle(css_value);


    //change in-line style
    /* body */
    changeInlineAttrBySelector("v3-main", "background", MAIN_BG_COLOR);
    changeInlineAttrBySelector("body > article:nth-child(13)", "background", MAIN_BG_COLOR);

    /* editor */
    changeInlineAttrBySelector(".fr-counter", "background", INPUT_BG_COLOR);
    changeInlineAttrBySelector(".fr-basic", "background", INPUT_BG_COLOR);

    /* transparent background */
})();