commit 3983a1bb5cb77e4c9c9e82b482f30752d0db2f84
parent 4b33a48cd57c79dde3234fdb6f3d16eb37d6cf62
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Thu, 23 Jul 2020 17:00:38 -0700
Merge pull request #8 from AsherMorgan/dark-theme
Implement dark theme.
Diffstat:
7 files changed, 131 insertions(+), 6 deletions(-)
diff --git a/Songs2Slides/static/global.css b/Songs2Slides/static/global.css
@@ -1,9 +1,44 @@
+/******** Variable styles ********/
+:root {
+ --theme-color: #ffff50;
+ --foreground-color: #000000;
+ --background-color: #ffffff;
+ --border-color: #808080;
+ --hover-color: #f0f0f0;
+}
+
+
+
/******** Global styles ********/
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
touch-action: manipulation;
margin-top: 80px;
+ color: var(--foreground-color);
+ background-color: var(--background-color);
+}
+
+button, input, select, textarea {
+ background-color: var(--background-color);
+ border: 1px solid var(--border-color);
+ color: var(--foreground-color);
+ border-radius: 0px;
+}
+
+button:hover:enabled {
+ cursor: pointer;
+ background-color: var(--hover-color);
+}
+
+button:disabled {
+ background-color: var(--hover-color);
+ color: var(--border-color);
+}
+
+input[type="file"] {
+ background-color: var(--hover-color);
+ border: none;
}
h1 {
@@ -16,16 +51,38 @@ h1 {
top: 0px;
left: 0px;
width: 100%;
- background-color: #ffff50;
+ background-color: var(--theme-color);
}
.container {
margin: auto;
padding: 10px;
- background-color: #F0F0F0;
+ background-color: var(--hover-color);
}
button {
height: 25px;
}
+
+
+
+/******** Dark styles ********/
+body.dark {
+ --foreground-color: #e0e0e0;
+ --background-color: #121416;
+ --hover-color: #323436;
+ --border-color: #505050;
+}
+
+.dark h1 {
+ color: #000000;
+}
+
+.dark button, .dark input, .dark select {
+ --background-color: #222426;
+}
+
+.dark a {
+ color: #0080ff;
+}
diff --git a/Songs2Slides/static/global.js b/Songs2Slides/static/global.js
@@ -0,0 +1,28 @@
+// Updates the interface theme
+function UpdateTheme(theme = null) {
+ // Get theme from localStorage
+ if (theme === null) {
+ theme = localStorage.getItem("theme");
+ }
+
+ // Detect preferred color scheme
+ if (theme === null) {
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ theme = "Dark";
+ }
+ else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+ theme = "Light";
+ }
+ }
+
+ // Apply theme
+ if (theme === "Dark") {
+ document.body.classList.add("dark");
+ }
+ else {
+ document.body.classList.remove("dark");
+ }
+
+ // Save theme
+ localStorage.setItem("theme", theme);
+}
diff --git a/Songs2Slides/static/home.css b/Songs2Slides/static/home.css
@@ -1,3 +1,11 @@
+/******** Variable styles ********/
+:root {
+ --song-color: #C0C0C0;
+ --error-color: #E00000;
+}
+
+
+
/******** Songs styles ********/
#songsContainer {
width: fit-content;
@@ -16,14 +24,15 @@ h3 {
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
- background: #C0C0C0;
+ background: var(--song-color);
border-radius: 5px;
}
-.songRemove {
+.songRemove, .dark .songRemove {
cursor: pointer;
margin-left: 3px;
margin-right: 3px;
+ color: var(--foreground-color);
}
#addSong {
@@ -33,7 +42,7 @@ h3 {
width: 40px;
line-height: 40px;
font-size: 40px;
- background-color: #C0C0C0;
+ background-color: var(--song-color);
border: none;
border-radius: 50%;
cursor: pointer
@@ -75,7 +84,7 @@ h3 {
#errors {
margin-top: 15px;
- color: #E00000;
+ color: var(--error-color);
font-weight: bold;
}
@@ -88,3 +97,10 @@ h3 {
#submitLyricsButton {
float: right;
}
+
+
+
+/******** Dark styles ********/
+body.dark {
+ --song-color: #525456
+}
diff --git a/Songs2Slides/static/home.js b/Songs2Slides/static/home.js
@@ -7,6 +7,9 @@ setId = 0; // Next valid song id number
function onLoad() {
// Add song
AddSong();
+
+ // Set theme
+ UpdateTheme();
}
diff --git a/Songs2Slides/static/settings.js b/Songs2Slides/static/settings.js
@@ -13,6 +13,15 @@ function onLoad() {
// Loads settings
function loadSettings(settings) {
+ // Interface settings (not stored with other settings)
+ UpdateTheme();
+ if (document.body.classList.contains("dark")) {
+ document.getElementById("theme").value = "Dark";
+ }
+ else {
+ document.getElementById("theme").value = "Light";
+ }
+
// Parsing settings
document.getElementById("title-slides").checked = settings["title-slides"];
document.getElementById("slide-between-songs").checked = settings["slide-between-songs"];
@@ -47,6 +56,9 @@ function loadSettings(settings) {
// Saves settings to local storage
function saveSettings() {
+ // Save interface settings and update interface
+ UpdateTheme(document.getElementById("theme").value);
+
// Get settings
const settings = {
// Parsing settings
diff --git a/Songs2Slides/templates/layout.html b/Songs2Slides/templates/layout.html
@@ -12,6 +12,7 @@
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-32.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicon-180.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"></link>
+ <script src="{{ url_for('static', filename='global.js') }}"></script>
{% block header %}{% endblock %}
</head>
diff --git a/Songs2Slides/templates/settings.html b/Songs2Slides/templates/settings.html
@@ -8,6 +8,14 @@
{% block content %}
<div id="settings" class="container">
<h2>Settings</h2>
+ <h4>Interface</h4>
+ <div>
+ Theme:
+ <select id="theme" onchange="saveSettings();">
+ <option>Light</option>
+ <option>Dark</option>
+ </select>
+ </div>
<h4>Parsing</h4>
<div>
Add title slides:
