思源筆記主題調整

最近爬牆到思源筆記了,自己搭建了一個docker服務器,用起來很順
思源筆記提供了好幾個好看的主題,可以自己選擇,不過出於個人習慣,我還是自己調整了一下

方案1:使用思源筆記默認提供的調整方案

思源筆記的設置中可以調整樣式,點擊開啟之后還可以調整各種顏色

方案2:自定義css調整腳本

注意這個方案只能在瀏覽器使用,會css的可以自己調整,不過在css上調整的,換瀏覽器就找不到了,我們也可以找一下主題的css文件進行修改

在暴力猴這種腳本插件中創建一個插件,使用下面的腳本調整css,css可以自己修改,第四行需要設置思源筆記的地址 ,組成是http://ip:6806/*

// ==UserScript==
// @name        思源筆記
// @namespace   Violentmonkey Scripts
// @match       http://自己的思源筆記的ip:6806/*
// @grant       none
// @version     1.0
// @author      -
// @description 2021/9/10 上午6:49:17
// ==/UserScript==

(function(){
// 引用的思源筆記的樣式
  var cssdetail='.protyle-wysiwyg [data-node-id] span[data-anchor]{background-color: var(--b3-protyle-inline-blockref-color)!important;color: white!important;padding:0 10px}  ';
//引用的圖片添加背景色(粘貼的圖片明顯一點,否則粘貼失敗只有一個小圖標不明顯)
  cssdetail+=' .b3-typography .img, .protyle-wysiwyg .img{background-color: red;padding: 0 20px;}';
//標題左對齊,加下划線
  cssdetail+='.protyle-wysiwyg [data-node-id].h1 div, .b3-typography h1 div{text-align: left!important;border-bottom:2px solid #c5c7ca !important}';
// 代碼塊換顏色
  cssdetail+='.protyle-wysiwyg [data-node-id] code, .b3-typography code:not(.hljs), .protyle-wysiwyg code:not(.hljs){background-color: #faad143d!important;color: #ec5152!important;}';
loadCssCode(cssdetail);
	// $(".protyle-wysiwyg [data-node-id] span[data-anchor]").css("background-color","bisque");
	// $(".protyle-wysiwyg [data-node-id] span[data-anchor]").css("padding","0 10px");
	  console.log("qweqwwq")
	// $(".protyle-wysiwyg [data-node-id] span[data-anchor]").css({"background-color":"bisque","padding":"0 10px"});
})();
//將css添加到html中
function loadCssCode(code){
    var style = document.createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    //for Chrome Firefox Opera Safari
    style.appendChild(document.createTextNode(code));
    //for IE
    //style.styleSheet.cssText = code;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}