🧪 front-end lab will serve as a taxonomy of some front-end solutions, 🍚 front-end dining hall will focus on horizontal comparison and evaluation, 📔 front-end small notes will be a summary of some front-end basics

Starting in November, the Nuggets Editor will support official posts on themes. For details, please refer to this article or this article. There is also a gold-digging theme development tool made by enthusiastic gold-digging ER, which I also used to complete the Hydrogen theme.

This article is mainly a horizontal evaluation of the topic of gold digging. The evaluation scope is the open topic at the time of writing this article. Some topics may also be constantly updated at the time of writing this article, so please refer to the latest version.

I have also made a theme (Hydrogen). I will first briefly introduce the design concept of this theme, and then evaluate several themes of Nuggets with horizontal screenshots.

✨ Hydrogen, Hydrogen,

Hydrogen is the most advanced element in the periodic table of elements, and Hydrogen is also the lightest among gases. The design idea of Hydrogen theme is to optimize the reading experience of current gold-digging articles without making a lot of color customization. For specific design details, you can refer to the evaluation section in part 2, or you can apply Hydrogen to your article to see the effect. I hope you can like Hydrogen and use it comfortably 😘.

Of course, this theme is still in the stage of continuous improvement, if you have any opinions, you can directly on the nuggets of private letter to me or comment on the article, I will humbly listen to your suggestions.

🧪 several nuggets theme horizontal review

Text (h1 ~ h3 & p)

Smartblue and Channing-Cyan’s changes to this area are quite obvious, especially to the H1 element, and the rest of the theme is mostly color changes.

The modification of hydrogen is also restrained. Aiming at the problem that the original theme h1, H2 and H3 can only be identified by font size, some decorations have been added to H1 H2, so that readers can clearly perceive each level when reading. (When h2 is hovering, the color of the decorative bar on the left will change to the theme blue of the nuggets)

Links (a )

As for the link elements, the changes are pretty much the same except for the color, and most of them are underlined to enhance reading.

Why does the hydrogen have a link icon at the end? Because I often see links without text in Nuggets, only a faint underline indicates that there is a link, and I also want readers to recognize the link element immediately, so I added the link icon that already exists in nuggets. The underline also adds a transition effect.

Code (code )

Channing-cyan can look a bit blurry because the contrast between the two colors isn’t good enough, and Fancy removes the background color.

Both the Hydrogen and Cyanosis use an enhanced contrast color scheme to make it look sharper.

Reference (blockquote )

In addition to the color changes, Channing-Cyan has added a translucent effect so that the boundaries of the nested reference block can be clearly seen. The problem is that the background grid lines penetrate into the reference block. Smartblue’s color scheme doesn’t quite match its theme, and Cyanosis looks the freshest.

The Hydrogen also uses a translucent background scheme, but without the hassle of checkered lines, it’s very clean, while keeping its top and bottom filling in a narrow range.

Form (table )

Table is an element that is not frequently used, so it can be seen that the adaptation of table elements is not perfect. For example, the background color of Fancy and SmartBlue is transparent, and the grid line behind it will penetrate into the table.

The Hydrogen is still a very restrained change, with a thicker border so you can see its boundaries more clearly.

Line (hr )

Emmm, everybody is a color change.

The Hydrogen has made a very special change here (I don’t think it’s been updated to the server yet, so you’ll have to wait), adding the familiar gold digger icon, which is very ritual-like and perfect for inserting a divider at the end or in the middle of a post.

Expand elements (details & summary )

At present, no one has made any improvement on this, so we have not made a horizontal evaluation, but only put the hydrogen effect.

This is very suitable for some interviews or q&A articles.

You can see the effect directly below:

Here is a problem: System Requirements

Here are the answers: Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

📰 horizontal comparison of the overall effect of several themes

The theme preview

Here is a screenshot of the overall look of each of the other themes. Click on the image to zoom in and see the details.

juejin	github

smartblue	cyanosis

channing-cyan	fancy

Hydrogen, the preview

Related articles

1. The Nuggets Editor now supports Markdown theme customization
2. Lin Xiaoshuai – hand touch hand teach you to develop nuggets article theme
3. Lin xiao Shuai – how to use nuggets article themes?

If you like this article, please click 👍❤️⭐~~