+++ /dev/null
-/*
- * The dark style when user prefers that in their browser/OS.
- */
-
-body {
- color: #cc88ff;
- background-color: #111;
-}
-.inverted {
- color: white;
- background-color: #9200ff;
-}
-
-a {
- color: #cc88ff;
-}
-a:visited {
- color: #bb77ff;
-}
-a:active {
- color: #FF0000;
-}
-
-.inverted a {
- color: white;
-}
-
-* {
- box-sizing: border-box;
-}
-
-.onecolumn {
- float: left;
- width: 45%;
- padding: 5%;
-}
+++ /dev/null
-/*
- * The default (light) style.
- */
-
-body {
- color: #440077;
- background-color: white;
-}
-.inverted {
- color: white;
- background-color: #440077;
-}
-
-a {
- color: #440077;
-}
-a:visited {
- color: #51188E;
-}
-a:active {
- color: #FF0000;
-}
-
-.inverted a {
- color: white;
-}
-
-* {
- box-sizing: border-box;
-}
-
-.onecolumn {
- float: left;
- width: 45%;
- padding: 5%;
-}
--- /dev/null
+@charset "utf-8";
+
+/* Variables for light & dark modes. */
+
+:root {
+ --nano-content-bg-color: #fff;
+ --nano-content-fg-color: #440077;
+ --nano-inverted-bg-color: #407;
+ --nano-inverted-fg-color: #fff;
+ --nano-a-color: #407;
+ --nano-a-visited-color: #51188E;
+ --nano-a-active-color: #F00;
+ --nano-a-inverted-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+:root {
+ --nano-content-bg-color: #111;
+ --nano-content-fg-color: #cc88ff;
+ --nano-inverted-bg-color: #9200ff;
+ --nano-inverted-fg-color: #fff;
+ --nano-a-color: #c8f;
+ --nano-a-visited-color: #b7f;
+ --nano-a-active-color: #F00;
+ --nano-a-inverted-color: #fff;
+}
+}
+
+body {
+ color: var(--nano-content-fg-color);
+ background-color: var(--nano-content-bg-color);
+}
+.inverted {
+ color: var(--nano-inverted-fg-color);
+ background-color: var(--nano-inverted-bg-color);
+}
+
+a {
+ color: var(--nano-a-color);
+}
+a:visited {
+ color: var(--nano-a-visited-color);
+}
+a:active {
+ color: var(--nano-a-active-color);
+}
+
+.inverted a {
+ color: var(--nano-a-inverted-color);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+.onecolumn {
+ float: left;
+ width: 45%;
+ padding: 5%;
+}
<meta name="description" content="GNU nano is a small editor for on the terminal. It supports syntax highlighting, spell checking, justifying, completion, undo/redo...">
<?php endif; ?>
<link rel="icon" href="/favicon.ico">
- <link rel="stylesheet" href="style-dark.css" media="(prefers-color-scheme: dark)">
- <link rel="stylesheet" href="style-light.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
+ <link rel="stylesheet" href="style.css">
</head>
<body>
projects / nano-editor.git / commitdiff