Do you want to manually implement CSDN dark mode for web page '?

start

As a front-end little hand , Address user needs , Achieve functional effects , It's my interest and work .

The situation a ：

Tomato myself is a heavy Dark Mode lovers . for example ：Vscode,github, Various types app I always set the theme to dark mode .

But some websites , Dark mode is not supported , Or you have to pay to support dark mode .

This makes me feel bad , The white background is always dazzling . But I need to visit these websites often , What do I do ？

Scenario two :

Good friends A： Brother Tomato , Is there any way to open a new browser tab every time , Automatically open the search box ？ Every time I browse the information, I open a new browser tab , You need to press ctrl+f, Open the browser to search , Both fingers are tired .

tomato ： This …enenenen

Good friends A： Help me with this , It's my treat , Night crayfish .

tomato ： Crayfish …

Problem analysis

All right, guys , Crayfish makes my mouth water , Collect your thoughts , Think about how to solve the problems described above .

In fact, the essence of the above scene is ： When browsing the web , Do some operations on other people's web pages , For example, make a dark pattern , For example, make a custom search box .

Browser

1. We can enter our own code directly into the browser console ？

Every time you open a new tab All pages need to enter code , tomato , lazy , Don't want to move .

2. Write a browser plug-in , own diy All kinds of functions ？

Not yet understood , It costs time to understand , I will have time to study later .

3. Browser plug-in Tampermonkey Be commonly called greasemonkey .

Customize js Script Open a web page to execute Our custom script √

Tampermonkey greasemonkey

1. home page

Tampermonkey • home page

2. Download plug-ins

chrome Users may be blocked by walls , This demonstration uses Edge Demonstrated .

Mode one ： Download from the official website
Tampermonkey download -chrome

Mode two ： Plug in store

1. visit Edge Plug in store
   Microsoft Edge add-in

2. Search for Tampermonkey And install

Rubbish talk

1. In the future, if I really need to make browser plug-ins , I must go and have a look at the source code of this oil monkey , Learning and learning .

2. Complete documentation (tampermonkey.net)

Realization function .

1. Add a custom script

2. The language written is js, Just a shuttle .

3. The notes at the top are important , Is the relevant configuration information .

Top note

// ==UserScript==
// @name csdn free  diy  Dark Mode 
// @namespace http://tampermonkey.net/
// @version 0.1
// @description csdn free  diy  Dark Mode 
// @author tomato7
// @include https://blog.csdn.net/*
// @grant none
// ==/UserScript==

Be careful ：@include Configure the web site where this script takes effect .
For detailed use of the tutorial, you can view the official website documents by yourself .

1. Dark Mode

1. Oil monkey can help us open the website and load my script . So here's what we're going to do , Add code to the script to handle the style of the web page , White background =》 Black background , Black font =》 White font , You can customize the dark color mode

2. The dark patterns of different websites need to be customized css Handle .

3. Let me show you C Dark mode of station ,C Station official is to provide dark mode , But not free , Need to open VIP.

4. Open those VIP The web page of , View element styles , Look at the , It shows how the dark theme of this website is realized .

Conclusion ： It's an independent css The document is direct !important Override the implementation of the original content style .
… It's a little simple

5. A shuttle , direct cv Its dark theme css Style of file , Paste into our code .
6. Trunk code

// ==UserScript==
// @name C standing   Dark Mode 
// @namespace http://tampermonkey.net/
// @version 0.1
// @description C standing   Dark Mode 
// @author tomato7
// @include https://blog.csdn.net/*
// @grant none
// ==/UserScript==

console.log(' Start ')

window.onload = function() {
    
 addCss()
}

function addCss() {
    
 //  I will simply add one of the style arrays added here 
 var css = ['body .article-search-tip {', ' background: #2e2e32 !important', '}'].join('\n')
 if (typeof GM_addStyle !== 'undefined') {
    
   GM_addStyle(css)
 } else if (typeof PRO_addStyle !== 'undefined') {
    
   PRO_addStyle(css)
 } else if (typeof addStyle !== 'undefined') {
    
   addStyle(css)
 } else {
    
   var node = document.createElement('style')
   node.type = 'text/css'
   node.appendChild(document.createTextNode(css))
   var heads = document.getElementsByTagName('head')
   if (heads.length > 0) {
    
     heads[0].appendChild(node)
   } else {
    
     // no head yet, stick it whereever
     document.documentElement.appendChild(node)
   }
 }
}

7. test （ Just find a blog of others ）
   

2. Custom search box

1. How to implement the search box ？ JS Add a search box to all open web pages in the code , Then search all html The content in , Then highlight the corresponding text content .

2. Code
   A little

end

Although not a pure technical blog , But I think it is very meaningful .

Open the website to allow js Script execution , It offers infinite possibilities . Based on this plug-in , There are many scripts with more complex functions that others have written . You can do it yourself diy Some scripts . Very interesting , Fabulous ！