Posted November 13, 2022 (Updated November 25, 2022)
The other day I was reading some on color schemes (specifically discussion of Solarized), this lead into a bit of a rabbit hole of links to other well-thought-through colors schemes (including Selenized, Gruvbox and Penumbra).
For my text editor purposes I will often (even prior to this) use Solarized Dark, but have had some issues with its contrast when using minimal backlight (This editor was recently changed to Cobalt for this very reason—I just noticed and changed it back). The Selenized theme claims that this lack of contrast in Solarized was one of the reasons it exists, however I found it to look… kinda ugly.
But then, I found Penumbra, whose first sample images are both higher contrast and visually appealing. Further reading showed that Penumbra has well-balanced colors, and several more-enhanced contrast modes.
It occurred to me that I hadn’t paid too much attention to the colors on this website, and no attention to the dark mode colors. So, I’ve attempted to adapt Penumbra’s Contrast++ to this website, I had difficulty reading the lower contrast version without having to specially adapt the dark and light modes. The current color scheme allows using the same seven primary colors in both dark and light modes, with merely reversing the order in which they are used (excepting the foot icons… for now).
For more colorful elements (such as links) I’ve used some of colors from the six-color accent palette. Penumbra attempts to evenly space the accent colors, I’d like to space out a set of four-ish colors for the website (needing more seems unlikely), but that’s a future thing.
Name
Contrast++
Dark Mode Usage
Light Mode Usage
sun+
#FFFDFB
White image background
White image background
sun
#FFF7ED
Highlight background, preformatted text
Main Background, disabled inputs
sun-
#F2E6D4
Borders
Navbar, footer, inputs
sky+
#DEDEDE
Main Text
Highlight Text, preformatted background
sky
#AEAEAE
Muted text, post meta, image selection, placeholder text
Muted text, post meta, image selection, placeholder text
sky-
#636363
Highlight Text, preformatted background
Main Text
shade+
#3E4044
Navbar, footer, inputs
Borders
shade
#181B1F
Main Background, footer icons, disabled inputs
Highlight background, footer icons, preformatted text
name
Accent-6
Usage
red
#CB7459
Visited links
cyan
#00B0D2
Hovered links, focused links
blue
#8C96EC
Tags, links
magenta
#D07EBA
Code
Hugo Tests
This is the details shortcode
It has some details inside of a div, and runs the summary through safeHTML.
Not sure if that helps anything.
This is the details shortcode with no summary.
A quote, but not just a Quote, but in fact a Blockquote. Yes, a Blockquote with a Citation.
Me, 2022
This is column 1.
This is column 2.
This is column 3.
View of Earth taken during ISS Expedition 53.
Earth Science and Remote Sensing Unit, NASA Johnson Space Center
The rest of this page is derived from "Drop-in Minimal CSS" by dohliam originally under the MIT License. This provides a set most HTML tags for visual inspection with this site's CSS.
Text
Headings
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.
Heading 6 (followed by Paragraph)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.
Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit.
Heading 6 (followed by text)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.
Asides
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.
Sodales purus inceptos sagittis congue eu cum molestie dapibus mauris torquent elementum, class massa ultrices nisi vel odio sem tristique velit tincidunt ultricies risus, nulla maecenas facilisis volutpat ipsum senectus eros commodo taciti nisl. Nullam suspendisse maecenas taciti facilisi erat eget hac elit velit metus, sociosqu sagittis facilisis pretium phasellus laoreet interdum habitant ante, commodo vestibulum elementum nostra proin praesent leo parturient varius. Platea cum litora tincidunt fermentum habitant felis primis nibh vulputate eros, habitasse ornare mi adipiscing volutpat feugiat viverra magnis cubilia, tortor gravida urna lacus suscipit aenean consectetur sociosqu accumsan. Facilisis nullam lobortis phasellus magnis urna laoreet ut fermentum parturient, ante sagittis maecenas varius risus at feugiat ullamcorper nam, malesuada ad blandit sollicitudin per commodo sociis accumsan. Nascetur molestie platea vitae mollis lorem aptent consectetur enim consequat inceptos, tellus commodo dui quam pretium proin lobortis interdum. Nullam risus aliquet adipiscing habitant porttitor semper vulputate iaculis tempus, pellentesque cum aenean vehicula tincidunt sociosqu imperdiet egestas sem, facilisis turpis montes mus natoque dolor curae condimentum. Lobortis ac molestie dictum augue nostra adipiscing ut libero eget non curae, tellus pellentesque nam aptent inceptos mauris dictumst luctus elit per, rutrum ornare consequat montes placerat dapibus senectus ad a leo.
Scelerisque sollicitudin vulputate non penatibus nulla arcu tempus nostra, tincidunt ante etiam parturient amet curabitur rutrum montes, aenean varius purus dignissim mauris donec taciti. Ultricies hendrerit maecenas turpis tristique laoreet pretium netus malesuada lobortis ullamcorper class magna ligula, litora urna mauris nascetur semper praesent in bibendum lorem rutrum tortor. Per sociosqu turpis amet velit dictum id congue nisl quam torquent, vel adipiscing lobortis vehicula dignissim ad malesuada scelerisque mi, at faucibus facilisis platea quisque gravida aptent auctor pharetra. Enim volutpat in integer posuere nunc potenti mus, cras magna vestibulum lacus mattis ullamcorper convallis fermentum, aliquet odio blandit phasellus proin purus. In cursus potenti rhoncus consequat bibendum quam neque aliquam ultrices ut, sollicitudin cubilia ligula quisque nam faucibus lacus nullam etiam, et magnis curabitur nibh vivamus senectus arcu inceptos habitant. Nulla vivamus tempus viverra ipsum risus ornare ac etiam, mattis primis lobortis accumsan ante urna aliquam massa felis, cum egestas nostra phasellus volutpat imperdiet elementum. Auctor taciti habitant ultrices integer mattis faucibus vitae, vehicula imperdiet dis ut luctus molestie, facilisi semper class montes ipsum vulputate.
Blockquotes
Etiam porttitor egestas elit, at venenatis neque accumsan eu. Nulla viverra odio nisi, quis commodo tellus tristique non. Proin ac ante at orci euismod eleifend. Quisque nisi sapien, dapibus in venenatis sit amet, posuere non purus. In sit amet metus erat. Pellentesque nec neque eleifend, luctus ipsum at, ullamcorper nunc. Pellentesque sagittis, dolor eu bibendum lacinia, orci ex bibendum risus, at tincidunt augue lacus eleifend diam. Nulla facilisis velit ut est auctor sollicitudin. Morbi eget lectus a lacus maximus molestie in ut lorem.
Vestibulum ut erat sapien. Duis eros est, tempus a rutrum eu, rhoncus at ante. Vestibulum congue vel nunc et dapibus. Ut tristique facilisis orci ac pretium. Nunc et sodales turpis. Nulla pretium augue vitae faucibus tempor. Aliquam convallis mollis feugiat. Ut non pellentesque sem. Suspendisse interdum, neque at hendrerit varius, enim neque imperdiet enim, pellentesque efficitur leo orci non erat.
Said no one, ever.
Lists
Definition list
Definition List Title
This is a definition list division.
Ordered List
List Item 1
List Item 2
List Item 3
Nested Ordered List Item 3.1
Nested Ordered List Item 3.2
Nested Ordered List Item 3.3
List Item 4
Nested Unordered List Item 4.1
Nested Unordered List Item 4.2
Nested Unordered List Item 4.3
Unordered List
List Item 1
List Item 2
List Item 3
Nested Ordered List Item 3.1
Nested Ordered List Item 3.2
Nested Ordered List Item 3.3
List Item 4
Nested Unordered List Item 4.1
Nested Unordered List Item 4.2
Nested Unordered List Item 4.3
Horizontal rules
Details & Summary
This is a detail
This is its contents.This is another detail
This is more contents.
Tabular data
Table Caption
Table Heading 1
Table Heading 2
Table Heading 3
Table Heading 4
Table Heading 5
Table Footer 1
Table Footer 2
Table Footer 3
Table Footer 4
Table Footer 5
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 5
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 5
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 5
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 5
Code
Keyboard input:Cmd
Inline code:<div>code</div>
Sample output:This is sample output from a computer program.
Pre-formatted text
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Pre-formatted Code
int main(){
printf('hello world');
return 0;
}
Inline elements
This is a text link. Strong is used to indicate strong importance. This text has added emphasis. The b element is stylistically different text from normal text, without any special importance. The i element is text that is offset from the normal text. The u element is text with an unarticulated, though explicitly rendered, non-textual annotation. This text is deleted and This text is inserted. This text has a strikethrough. Superscript®. Subscript for things like H2O. This small text is small for for fine print, etc. Abbreviation: HTML This text is a short inline quotation. This is a citation. The dfn element indicates a definition. The mark element indicates a highlight. The variable element, such as x = y. The time element:
Embedded content
Images
No <figure> element
Wrapped in a <figure> element, no <figcaption>
Wrapped in a <figure> element, with a <figcaption>
