WaniKani Breeze Dark Userstyles.org Hack

wkbd_hack.user.js

// ==UserScript==
// @name         WKBD Settings Hack
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Inject userstyle settings
// @author       Valeth
// @match        https://userstyles.org/styles/135572/wanikani-breeze-dark
// @include      https://code.jquery.com/jquery-3.2.1.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var inject = `
<ul id="style-settings">
<li>
<label for="setting-457418">Radicals Color</label>
<input id="setting-457418" name="ik-RADICALS_COLOR" type="text"class="style-setting-option color {hash:true,required:true}" value="#3DAEE9" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(61, 174, 233); color: rgb(0, 0, 0);">
</li>
<li>
<label for="setting-457419">Kanji Color</label>
<input id="setting-457419" name="ik-KANJI_COLOR" type="text" class="style-setting-option color {hash:true,required:true}" value="#FDBC4B" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(253, 188, 75); color: rgb(0, 0, 0);">
</li>
<li>
<label for="setting-457420">Vocabulary Color</label>
<input id="setting-457420" name="ik-VOCAB_COLOR" type="text" class="style-setting-option color {hash:true,required:true}" value="#2ECC71" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(46, 204, 113); color: rgb(0, 0, 0);">
</li>
<li>
<label for="setting-457421">Review Reading Background</label>
<input id="setting-457421" name="ik-REVIEW_READING_BG" type="text" class="style-setting-option color {hash:true,required:true}" value="#4D4D4D" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(77, 77, 77); color: rgb(255, 255, 255);">
</li>
<li>
<label for="setting-457422">Review Meaning Background</label>
<input id="setting-457422" name="ik-REVIEW_MEANING_BG" type="text" class="style-setting-option color {hash:true,required:true}" value="#31363B" size="7" maxlength="7" autocomplete="off" style="background-image: none; background-color: rgb(49, 54, 59); color: rgb(255, 255, 255);">
</li>
<li>
<label for="setting-457528">Review Character Background</label>
<select id="setting-457528" name="ik-REVIEW_CHAR_BG" class="style-setting-option">
<option value="ik-REVIEW_CHAR_BG_DARK" selected="">Dark</option>
<option value="ik-REVIEW_CHAR_BG_COLOR">Colored</option>
</select>
</li>
</ul>
`;

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function wait() {
        console.log("waiting for 2 seconds...");
        await sleep(2000);
        console.log("ready");
        $('#preview_image_div').after(inject);
    }

    $(document).ready(function() {
        // Usersyles.org doesn't want to inject the code on the ready event, so we wait a bit...
        wait();
    });
})();