Mars Light Theme

mars_light_theme.user.js

// ==UserScript==
// @name Mars Light Theme
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match *://*/mars/*
// @icon https://www.google.com/s2/favicons?domain=marscloud.dev
// @grant none
// ==/UserScript==

(function() {
'use strict';
const initialTheme = localStorage.getItem('lightTheme')

var tabs = document.getElementById('Tabs1__BV_tab_controls_');
var toggleBtn = document.createElement('li')

toggleBtn.className = 'p-2'
toggleBtn.style.cursor = 'pointer'
toggleBtn.innerHTML = `
<a href="#" id="changeTheme" style="cursor: pointer; background-color: ${initialTheme ? 'black' : 'white'}"></a>
`
toggleBtn.isLight = localStorage.getItem('lightTheme')
tabs && tabs.appendChild(toggleBtn)

toggleBtn.addEventListener('click', e => {
e.preventDefault()

toggleBtn.isLight = localStorage.getItem('lightTheme') === 'true'
toggleBtn.isLight = !toggleBtn.isLight

localStorage.setItem('lightTheme', toggleBtn.isLight)

toggleStyle(toggleBtn.isLight)
})

const toggleStyle = initStyle(document.createElement('style'))
toggleStyle(initialTheme)

function initStyle(style){
style.innerHTML = `
.monaco-editor .lines-content .cigr {
box-shadow: 1px 0 0 0 #40404021 inset;
}

.monaco-editor .view-overlays .current-line {
border: 2px solid #28282824 !important;
}

.monaco-editor .squiggly-error {
box-shadow: 0 4px 2px -1px #ff000066;
}

.editor-monaco-editor .attr-name,
.mtk1 {
color: #0b28f3 !important;
}

.str-found {
background-color: #fff8d7!important
}

#MainNav1 .nav-link {
color: #6c757d !important;
}

.tab-container {
overflow: auto hidden !important;
}

.monaco-editor .view-overlays .current-line {
border: 2px solid #28282866
}

#BlockTabs1 .tab-wrapper .tab:hover [data-role="remove"]:after,
#BlockTabs1 .tab-wrapper .nav-link.active [data-role="remove"]:after,
.monaco-editor .squiggly-hint {
filter: brightness(0);
}

.tree {
background-color: rgb(255 255 255) !important;
border-color: rgb(198 198 198) !important;
}

.monaco-list.list_id_6 .monaco-list-row.focused {
background-color: #062f4a1f !important;
}

.monaco-editor .wordHighlight {
background-color: rgb(173 214 255 / 55%);
}

.monaco-list .monaco-list-row.focused {
background-color: #b0dfff !important;
}

.monaco-list .monaco-list-row.focused:hover {
background-color: #e8f6ff !important;
}

.monaco-editor .parameter-hints-widget {
background-color: #fbfbfb !important;
color: black !important;
}

#MainNav1 .nav-link.active {
color: #070065 !important;
}

.monaco-editor .wordHighlightStrong {
background-color: rgb(153 153 153 / 60%);
}

.monaco-editor .focused .selected-text {
background-color: #3a3d413b;
}

.monaco-editor .selected-text {
background-color: #9292924f;
}

.monaco-list.list_id_6:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
background-color: #062f4a47 !important;
}

.mtk4 {
color: #f90101
}

#BlockFiles1 .nav .nav-link.active {
color: #002bff!important;
}

.cms-tree .btn-link:hover,
.cms-tree a:hover {
color: #aba7a7 !important
}

.mtk8 {
color: rgb(164, 46, 162) !important
}

.mtk5 {
color: rgb(83, 160, 83) !important
}

.mtk22 {
color: rgb(226, 90, 80) !important
}
.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input,
.monaco-editor .margin,
#IdeNavPanel,
block-files-div,
#BlockTabs1 .tab-wrapper .nav-link.active,
#BlockTabs1 .tab-wrapper .nav-link,
.monaco-editor .monaco-editor-hover,
#MainNav1 .bg,
.data-table-tree,
.ide-project,
#BlockTabs1 .tab-wrapper,
#BlockTabs1 .tab-wrapper .nav-link:focus,
#BlockTabs1 .tab-wrapper .nav-link:hover,
.monaco-editor .monaco-editor-hover .hover-row .actions,
#BlockFiles1 .nav-classic,
.monaco-editor .find-widget,
.monaco-editor .find-widget textarea,
.monaco-editor .find-widget .controls,
.block-files-div,
body {
background-color: white !important;
}

#BlockFiles1 .nav .nav-link,
.monaco-editor .line-numbers,
.cms-tree .btn-link,
.cms-tree a,
.mtk9,
#BlockTabs1 .tab-wrapper .nav-link.active,
#CreateNewBlock1 input,
#CreateNewBlock1 select,
.monaco-editor .monaco-editor-hover,
.monaco-editor .find-widget,
.search-input.text-white.form-control,
.monaco-editor .find-widget textarea,
.monaco-editor .suggest-widget {
color: black !important
}
`;
return (isLight = true) => {
isLight = isLight ? (isLight).toString() : 'false'
isLight = isLight === 'true'

isLight ? document.body.appendChild(style) : style.remove(style)
toggleBtn.style.backgroundColor = `${isLight ? 'black' : 'white'}`
}
}
})();