为任何你不拥有的网站定制主题

太长不看？请阅读结论！

内容

• 我为什么写这篇文章
• 如何为任何网站设置主题
• 示例：主题开发.to
• 示例结果
• 结论

我为什么写这篇文章

几周前，Stack Overflow 终于发布了深色主题。我在他们的博客上看到，深色主题是他们收到的所有功能请求中得票最高的。

这让我陷入了沉思。我知道网络上充斥着许多设计糟糕的网站，用户体验设计漏洞百出。如果这些网站把主题设置权交给最终用户呢？事实上，有些网站已经这么做了！实际上，每个网站都在这么做，只是有些网站让用户操作起来更麻烦一些。

在思考这个问题的时候，我看到dev.to论坛上有一位用户请求添加一个粉彩主题。事实证明，dev.to已经让懂CSS的用户可以轻松实现这个愿望，而这个论坛里懂CSS的人应该不少。

我在那篇文章的评论区发布了一个主题原型（如下所示），只使用了作者提供的颜色。我觉得这个原型不太美观。不过，我还是挺喜欢它的，所以目前还在用，没有更换的打算。

如何为任何网站设置主题

让我们直入正题——如何为任何非您所有的网站定制主题。或者更确切地说，如何修改您访问的任何网站的 CSS。解决方案是使用支持实时 CSS 编辑的浏览器扩展程序。有了这类扩展程序，您就可以编写自己的 CSS 代码并添加到您访问的网站上。

只需在谷歌搜索“实时CSS编辑器”加上你使用的浏览器名称，就会出现很多选择。我没试过很多，所以就不推荐具体的了。不过我个人用的是Amino。

关于安全性的说明。 当然，所有扩展程序都需要获得读取和修改您在网站上所有数据的权限才能正常工作。您可以在 Chrome 浏览器的扩展程序设置页面中，选择允许扩展程序在哪些网站上启用。

示例：主题开发.to

我们来看看如何使用 Amino 来设置 dev.to 的样式。操作非常简单，就像他们的文档里描述的那样。你只需点击浏览器工具栏中的 Amino 图标，然后填写你自己的 CSS 代码即可。CSS 的优先级规则同样适用。

Dev.to 大量使用 CSS id 和 class，这让我们的工作变得极其轻松，这些 id 和 class 并非由任何 CSS 框架自动生成。此外，由于 CSS 选择器不太可能经常更改，这使得我们的更改非常持久，但这对于频繁更新 CSS 的网站来说可能是一个问题（就我个人而言，我几乎从未遇到过这个问题，而且我已经在很多网站上使用它至少一年多了）。

这是我添加到 Amino 的 CSS 代码，用于将 dev.to 的样式设置为之前提到的调色板主题。这是一个非常快捷的解决方案，并不全面，但足以更新主题颜色。

#top-bar {
    background-color: #d7eeff;
}

#page-content-inner {
    background-color: #e0d7ff;
}

#substories .single-article, #articles-list .single-article {
    background-color: #ffcce1;
}

.top-bar--search-input {
    background-color: #faffc7;
}

.crayons-btn, #substories .single-article .engage-button {
    background-color: #faffc7;
    color: var(--card-color);
}

要查找 CSS 选择器，我只需右键单击网页上的元素，然后选择“检查”即可在 Chrome 开发者工具中找到该元素。对于 dev.to 网站来说，很容易找到合适的 ID 和类名。如果您找不到某个选择器，也可以在开发者工具中右键单击该元素，然后选择“复制选择器”。

说实话，即使 dev.to 是每个婆婆梦寐以求的网站，但并非所有网站都那么容易设计样式。有些网站不仅外观丑陋，设计起来也同样糟糕。使用!important CSS 属性确实可以快速覆盖不兼容的 CSS 代码，虽然我绝不建议在网站开发过程中使用它，但在使用 Amino 时，你可以随意地在网站上使用它。只要你不搞砸自己的那几行 CSS 代码，就不会有人受到影响。

示例结果

我经常使用Amino。这是我的Google搜索结果。

这是 YouTube。我使用了他们的深色主题，并做了一些改动，比如把字体颜色改成红色，以匹配他们的标志。

这里还有我常看的报纸的默认版本和我自定义的版本。请注意，我还使用了`display: none;`来完全移除网站左下角附近的“tipsa oss - vi granskar”框。这样，当广告拦截器失效时，Amino 就可以作为其补充。

结论

如果你想用自己的 CSS 来设计网站样式，可以搜索“实时 CSS 编辑器”，然后找到一个与你的浏览器兼容的浏览器扩展程序。它允许你在网站原有 CSS 的基础上编写自定义 CSS 代码，这对于设置网站主题或进行其他样式调整（例如移除不需要的元素或增加间距）非常有用。我个人使用Amino来设计网站样式。但请记住，和所有扩展程序一样，它们也可能包含恶意代码。

注意安全，我是你的好兄弟。