零编码经验如何修改网站leftcolumn背景色并制作深色主题插件

Hey there! Let's walk through this simple solution since you're new to coding and want a way to tweak that bright left column for you and your friend. Since we can’t edit the original website’s CSS files directly (unless you own the site), we’ll make either a quick user script or a tiny Chrome extension to override the style automatically when you visit the site. Both are beginner-friendly, so let’s break them down:

Option 1: Use Tampermonkey (Quick User Script) #

Tampermonkey is a free Chrome tool that lets you run custom style/script tweaks on specific websites. It’s super easy to set up:

• Install Tampermonkey from the Chrome Web Store (just search for it and add it to your browser).
• Click the Tampermonkey icon in your toolbar, then select "Create a new script".
• Delete all the default code, then paste this:

// ==UserScript==
// @name         Darken Left Column
// @version      0.1
// @description  Changes .leftcolumn background to #806546
// @author       You
// @match        https://your-target-site.com/*  // Replace this with the actual site URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Inject our custom CSS
    const customStyle = document.createElement('style');
    customStyle.textContent = `
        .leftcolumn {
            background-color: #806546 !important;
        }
    `;
    document.head.appendChild(customStyle);
})();

• Replace https://your-target-site.com/* with the actual URL of the site you want this to work on (keep the /* to apply it to all pages on the site).
• Save the script (Ctrl+S or Cmd+S). Now whenever you visit the site, the left column will switch to your desired warm brown color!
• To share with your friend: just copy the entire script code and send it to them. They’ll need to install Tampermonkey too, create a new script, paste the code, and save it—done!

Option 2: Create a Tiny Chrome Extension #

If you want a proper extension file to share (instead of a script), here’s how to build one in 5 minutes:

1. Make a new folder on your computer (name it something like "DarkLeftColumnExtension").
2. Inside the folder, create a file named manifest.json and paste this:

{
    "manifest_version": 3,
    "name": "Darken Left Column",
    "version": "1.0",
    "description": "Swaps .leftcolumn background to #806546",
    "content_scripts": [
        {
            "matches": ["https://your-target-site.com/*"], // Replace with your site URL
            "css": ["custom-styles.css"]
        }
    ]
}

3. Create another file in the same folder named custom-styles.css and add this single line:

.leftcolumn {
    background-color: #806546 !important;
}

4. Load the extension into Chrome:
   • Open Chrome and go to chrome://extensions/
   • Toggle on "Developer mode" (top-right corner)
   • Click "Load unpacked" and select the folder you created.
   • The extension will appear in your extensions list and work automatically on your target site.
5. Share with your friend: Zip the entire folder (right-click > Send to > Compressed (zipped) folder) and send the zip file. They’ll load it the same way you did—enable developer mode, click "Load unpacked", and select the unzipped folder.

A quick note on !important #

We add !important to the style rule to make sure our custom color overrides the original site’s CSS (exactly like how you got it working in Chrome DevTools).

That’s all! Both methods are totally doable even without coding experience. Let me know if you hit any small snags along the way.

内容的提问来源于stack exchange，提问作者YaxYaxYaxYaxYax