Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark-mode support and improve readability #257

Closed
wants to merge 2 commits into from
Closed

Add dark-mode support and improve readability #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54caad6
Enable syntax highlighting
Alhadis Sep 19, 2023
8b82b6e
Add dark-mode support and refactor stylesheet
Alhadis Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ repository and update `index.md` with a line under the appropriate section,
keeping entries in alphabetical order.
The line must be formatted as:

| [Software Name](URL) | Short description | [YYYY-MM-DD / X.X.X](URL) |
``` markdown
| [Software Name](URL) | Short description | [YYYY-MM-DD / X.X.X](URL) |
```

For the third field, the date and version number should be those of the first
release of the software available with `NO_COLOR` support, with a link to the
Expand All @@ -34,8 +36,10 @@ rebuilt within a few minutes.
If you are making extensive changes to the output and want to verify them in a
browser before committing, you can setup a Jekyll environment with:

no_color$ bundle install
no_color$ bundle exec jekyll serve
``` console
$ bundle install
$ bundle exec jekyll serve
```

And then visit
[http://127.0.0.1:4000/](http://127.0.0.1:4000/).
77 changes: 64 additions & 13 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
<!doctype html>
<html lang="en">
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NO_COLOR: disabling ANSI color output by default</title>
<style>
* {
box-sizing: border-box;
tab-size: 4;
}
html {
font: 11pt/1.33 sans-serif;
}
body {
font-family: sans-serif;
font-size: 11pt;
margin: 1em;
}

/* Links */
a:link, a:visited {
color: #0969da;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* Headings */
h1 {
font-size: 20pt;
margin: 0;
Expand All @@ -28,23 +44,28 @@
font-weight: normal;
}

/* Centred column */
#wrapper {
margin: 3em auto;
width: 800px;
margin: 1em auto;
max-width: 800px;
}
#wrapper > h1:first-of-type {
margin-top: 0;
}

/* Tables */
table {
width: 100%;
}

th {
background-color: #ddd;
}

th, td {
padding: 0.25em;
vertical-align: top;
}
th {
background-color: #ddd;
border-bottom-style: solid;
}

table tr td:first-child {
width: 20%;
Expand All @@ -65,15 +86,45 @@
padding: 3px;
}

/* Insets */
blockquote, pre {
margin-left: 3em;
overflow: auto;
}

@media only screen and (max-width: 800px) {
#wrapper {
margin: 1em;
width: auto;
blockquote > p {
margin: 0;
}

blockquote > p:not(:last-child) {
margin-bottom: 1em;
}

/* Smartphone-size viewports */
@media (max-width: 600px) {
ol, ul {
padding-left: 1em;
}
blockquote, pre {
margin-left: 1.5em;
}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
Copy link

@SethFalco SethFalco Sep 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it'd be better to define CSS variables in :root and override those variables in @media (prefers-color-scheme: dark)?

I've seen some projects maintain themes like without them before, but it tends to lead to inconsistent use of colors, and broken themes on updates. ^-^'

Maintaining color pallets is a lot easier than maintaining individual overrides.

For example:

:root {
  --pri-bg-color: #fff;
  --link-color: #0969da;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pri-bg-color: #161b22;
    --link-color: #2f81f7;
  }
}

body {
  background-color: var(--pri-bg-color);
}

a:link, a:visited {
  color: var(--link-color);
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using variables for values that're only referenced once is wasteful, IMHO. Especially for such a decidedly simple design.

It's your call, though.

:root {
background-color: #0d1117;
color: #e6edf3;
}
a:link, a:visited {
color: #2f81f7;
}
th {
background-color: #161b22;
border-color: #30363d;
}
td code, p code {
background-color: rgba(110, 118, 129, 0.3);
}
}
</style>
Expand Down
28 changes: 15 additions & 13 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,22 +35,24 @@ with this standard.

## Example Implementation

#include <stdbool.h>
#include <stdio.h>
#include <stdlib.h>
``` c
#include <stdbool.h>
#include <stdio.h>
#include <stdlib.h>

int
main(int argc, char *argv[])
{
char *no_color = getenv("NO_COLOR");
bool color = true;
int
main(int argc, char *argv[])
{
char *no_color = getenv("NO_COLOR");
bool color = true;

if (no_color != NULL && no_color[0] != '\0')
color = false;
if (no_color != NULL && no_color[0] != '\0')
color = false;

/* do getopt(3) and/or config-file parsing to possibly turn color back on */
...
}
/* do getopt(3) and/or config-file parsing to possibly turn color back on */
...
}
```

## Frequently Asked Questions

Expand Down