DEV Community: Auroral UI

Firefox theme `Aurora Future`

Benny Guo — Sun, 25 Apr 2021 13:19:31 +0000

Recently I had switched back to Firefox for web development.

Thinking back, I had left Firefox since 4-5 years ago, I remember Firefox had the best layout debug tool called firebug.

Not sure how many of the web developer now days hear of this tool.

Therefore I decided to make a Aurora Theme for Firefox as well and here it is!

(Side note I still love Chrome, I still switch between the two from time to time, but a lot more on Firefox now days, because for some reason Chrome is very laggy for my MacBookPro. Also I am thinking of making a chrome theme as well~)

Here is place to download this theme: https://addons.mozilla.org/en-US/firefox/addon/aurora-future/

A futuristic dark theme `Aurora Future`

Benny Guo — Sat, 17 Apr 2021 16:32:34 +0000

Aurora Future

This theme is inspired by Adam Argyle's Kung-Fury-Theme.

Purple, pink and blue are the main colors of this theme. These colors combine give us a futuristic feel. The color scheme is inspired by Adam Argyle's theme.

However I have change the colors, to follow the colors used in Auroral-UI, basically the same colors used in my Hexo Theme Aurora.

Why make this theme?

First is because I fall in love with Adam Argyle's sublime3 theme when I watched his Youtube videos. The syntax highlight he did is just pure awesomeness, but his VSCode's version of the theme is very outdated, also the color saturation is just a bit too high for my own liking, therefore I decided to make my own base on his ideas. Another thing is that I would like to have my own custom theme to go with my Auroral-UI project.

I have used many themes in VSCode, but most of them used way too many colors. After writing hours of codes, my eyes gets very tiring of looking at those colors.

Therefore the main goal of this theme is to use the main colors of Auroral-UI and draw back all the distractions from the colors. Which help us focus on what is important and keep the visual harmony in the theme.

Features

I follow the same goals as Adam Argyle's sublime3 theme, because I couldn't agree more on his design concepts.

Accentuates the signal of your code, while pushing back the noise
Colors, italics, and subdued colors are meaningful to help you understand the code via consistent coloring, there's rhyme and reason for the choices beyond visual harmony
If your code has no errors, then it looks pythonic (noise reduction)
Dark mode that's been tested heavily for day and night use
Leverages cursive if you're using Dank Mono or Operator Mono

Recommended combination

Font: use Dank Mono or Operator Mono
Icon theme: Material Theme Icon Dark

Screenshots

JavaScript

Vue

Vue-HTML

Json

Yaml

How to get this theme?

Go search for the theme from VSCode extension, use the theme name Aurora Future.

Go to the extension's page here

Hope you enjoy!~

Hexo Aurora Theme released today!

Benny Guo — Tue, 30 Mar 2021 16:16:43 +0000

New theme hexo-theme-aurora version 1.0.0 released today!

Aurora is a next generation theme using Aurora colours and UI elements. It give you the feel of smooth flow of colours and a futuristic feeling.

Introduction

My very first theme is hexo-theme-obsidian which got quite a bit of attention. A lot of bloggers loved this theme, but later on the theme gets a bit hard to maintain due to the fact that it's not using a framework like Vue or React.

Ever since than, I start to think about refactoring that theme using Vue, and that's when I started my journey of using Vue to build a Hexo theme.

As I was refactoring Obsidian, I figure some of the user interface isn't as fine tuned as it should be, and as I notice the "Aurora UI" trend in UI designs. (Know as the trend of using gradient colors for UI elements.), at the end I decided to make a brand new theme using the popular UI design elements.

Aurora is a next generation theme using Aurora colours and UI elements. It give you the feel of smooth flow of colours and a futuristic feeling.

Compare to Obsidian

The main significant difference between Obsidian and Aurora, is that Aurora is base on Vue3, which means its performance and user interactions are much better than Obsidian.

Obsidian uses vanilla JavaScript and JQuery to support most of the user interaction and blog features. Of course, I am not saying using vanilla JavaScript and JQuery cannot build a fast and high-quality blog application. It's just using Vue is much more enjoyable for the developer and even more for the readers or viewers.

Why? Because using Vue, we could turn our blog into a Single Page Application (SPA), therefore users will notice fewer distractions during page to page hopping. For an article-reading blog site, SPA is best for this kind of purpose.

Why vue3?

Many asked me that: "Why use Vue3 with Hexo, why not just use the default EJS template system with vuejs."

Of course, I could add in vuejs with the support of the default ejs template system. Honestly, it wasn't easy making the blog fully customizable using fully restful APIs. It could have been much easier with EJS templates.

But in the modern frontend development trend, most web applications had switch to frameworks like Vue, React or Angular, because they are much easier and quicker for development. With the support of SPA for these frameworks, it would improve the user accessibility and interactions of the application.

Thinking through the pros and cons, I had decided to use Vue3 as the framework for developing Aurora.

What's in Aurora?

Let's us take a look at the feature list and plans for Aurora:

⭐️ Features

✔ Featured section - Can add a feature meta to any post, those will be pinned into the feature section on the home page.
✔ Multi-language support - Can dynamically switch the language of the main texts in the application.
✔ Statistics - Statistic of article words, posts, categories and tags counts.
✔ Article reading time - Show the estimated reading time of an article.
✔ Mathjax support - Support mathjax syntax in markdown files.
✔ SPA - No page loading or freezing from page to page.
NEW Comment plugins - Support the using Gitalk or Valine plugins
NEW Comment plugins - Support the using Gitalk or Valine plugins
NEW Blog search - Enable to search all the articles in the blog.
NEW Latest comments - Added a widget showing the latest comments, supported using Gitalk or Valine.

🎨 Theme

✔ Light and dark - Light and dark theme support.
✔ Magazine Layout - Modern magazine grid layout.
✔ Gradient Colours - Modern gradient colour styles.
✔ Timeline styled archives - Archived posts into a timeline format.

🛠 Configuration

✔ Beian Config - This feature is especially for China users, for those that need to put Beian info at the footer of the blog.
✔ Customizable menu - Can customize your menu with internal links, external links, custom pages.
NEW Post navigation - Can navigate to the previous and next article at the end of the article page.
NEW Custom pages - Can add any custom pages, need to use the customized menu to display in the menu.
NEW Page navbar - Can set up a sidebar on the specific page, act as the sub-menu of the page.

What is yet to come?

Everything listed here are currently under development.

WIP Related posts - _Show a list of the related posts at the end of an article. _

What might be coming?

What Aurora might add in the future.

Will host voting events in Discord from time to time. You are welcome to come build Aurora together!

Image Gallery - Adding an image gallery page.
Links of friends - Allow you to list all your friends' blogs.
Tweeting - Allow posting tweets like tweeter for you and your visitors.

Get the theme now!

Github Repo: https://github.com/auroral-ui/hexo-theme-aurora
Usage document: https://aurora.tridiamond.tech/