]> git.wh0rd.org - nano-editor.git/commitdiff
css: merge light & dark into one file
authorMike Frysinger <vapier@gentoo.org>
Tue, 14 Nov 2023 16:16:01 +0000 (11:16 -0500)
committerMike Frysinger <vapier@gentoo.org>
Tue, 14 Nov 2023 16:16:01 +0000 (11:16 -0500)
This relies on CSS variables, but all major browsers should support
them since 2014-2016 timeframe.

style-dark.css [deleted file]
style-light.css [deleted file]
style.css [new file with mode: 0644]
top.php

diff --git a/style-dark.css b/style-dark.css
deleted file mode 100644 (file)
index 6e621b5..0000000
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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%;
-}
diff --git a/style-light.css b/style-light.css
deleted file mode 100644 (file)
index 7af7eb2..0000000
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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%;
-}
diff --git a/style.css b/style.css
new file mode 100644 (file)
index 0000000..e9dcf1f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,60 @@
+@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%;
+}
diff --git a/top.php b/top.php
index 0b0d162f277bd9ccee0ff9651c6186d382e778f1..8f613e1663c82658023a5699ed49ce9cd8e294b5 100644 (file)
--- a/top.php
+++ b/top.php
@@ -9,8 +9,7 @@
    <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>