Merge pull request #454 from SethFalco/theming

chore: clean up theming

libretranslate/static/css/dark-theme.css

@@ -1,122 +0,0 @@
-@media (prefers-color-scheme: dark) {
-    .white {
-        background-color: #111 !important;
-        color: #fff;
-    }
-
-    .blue.darken-3 {
-        background-color: #1E5DA6 !important;
-    }
-
-    /* like in btn-delete-text */
-    .btn-flat {
-        color: #666;
-    }
-
-    .btn-switch-type {
-        background-color: #333;
-        color: #5CA8FF;
-    }
-    .btn-switch-type:hover {
-        background-color: #444 !important;
-        color: #5CA8FF;
-    }
-    .btn-switch-type.active {
-        background-color: #3392FF !important;
-        color: #fff;
-    }
-    .btn-switch-type.active:hover {
-        background-color: #5CA8FF !important;
-        color: #fff;
-    }
-
-    .btn-switch-language {
-      color: #fff;
-    }
-
-    .language-select:after {
-      border: solid #fff;
-      border-width: 0 2px 2px 0;
-    }
-
-    /* like in textarea */
-    .card-content {
-        border: 1px solid #444 !important;
-        background-color: #222 !important;
-        color: #fff;
-    }
-
-    .file-dropzone {
-        background: #222;
-        border: 1px solid #444;
-        margin-top: 1rem;
-    }
-
-    select, select#locales{
-        color: #fff;
-        background: #111;
-    }
-
-    option {
-        color: #fff;
-        background: #222;
-    }
-
-    textarea {
-        border: 1px solid #444 !important;
-        background-color: #222 !important;
-        color: #fff;
-    }
-    /* like in file dropzone */
-    .textarea-container {
-        margin-top: 1rem;
-    }
-
-    .code {
-        border: 1px solid #444;
-        background: #222;
-        color: #fff;
-    }
-    code[class*="language-"], pre[class*="language-"] {
-        color: #fff;
-        text-shadow: 0 1px #000;
-    }
-
-    .token.atrule,
-    .token.attr-value,
-    .token.keyword {
-        color: #40b5e8;
-    }
-
-    .language-css .token.string,
-    .style .token.string,
-    .token.entity,
-    .token.operator,
-    .token.url {
-        color: #eecfab;
-        background: hsla(0,0%,15%,.5);
-    }
-
-    .token.attr-name,
-    .token.builtin,
-    .token.char,
-    .token.inserted,
-    .token.selector,
-    .token.string {
-        color: #acd25f;
-    }
-
-    .token.boolean,
-    .token.constant,
-    .token.deleted,
-    .token.number,
-    .token.property,
-    .token.symbol,
-    .token.tag {
-        color: #ff8bcc;
-    }
-
-    .token.class-name, .token.function {
-        color: #ff7994;
-    }
-}

libretranslate/static/css/main.css

@@ -1,18 +1,73 @@
 /* Custom styles for LibreTranslate page */
 
-html,
+:root {
-body,
+  --pri-bg-color: #fff;
-select {
+  --sec-bg-color: #f3f3f3;
+  --code-bg-color: #fbfbfb;
+  --border-color: #ccc;
+  --fg-color: #000;
+  --nav-fg-color: #fff;
+  --accent-color: #1565c0;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --pri-bg-color: #111;
+    --sec-bg-color: #222;
+    --code-bg-color: #222;
+    --border-color: #444;
+    --fg-color: #fff;
+  }
+
+  .token.atrule, .token.attr-value, .token.keyword {
+    color: #40b5e8;
+  }
+
+  .language-css .token.string, .style .token.string,
+  .token.entity, .token.operator, .token.url {
+    color: #eecfab;
+    background: hsla(0,0%, 15%, .5);
+  }
+
+  .token.attr-name, .token.builtin, .token.char,
+  .token.inserted, .token.selector, .token.string {
+    color: #acd25f;
+  }
+
+  .token.boolean, .token.constant, .token.deleted, .token.number,
+  .token.property, .token.symbol, .token.tag {
+    color: #ff8bcc;
+  }
+
+  .token.class-name, .token.function {
+    color: #ff7994;
+  }
+}
+
+html, body, select {
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif !important;
 }
 
-a {
+body {
-  text-decoration: underline;
+  background-color: var(--pri-bg-color);
+  color: var(--fg-color);
 }
 
-a.noline{
+nav, #nav, #nav-mobile, .locale-panel, .page-footer {
-  text-decoration: none;
+  background-color: var(--accent-color);
+}
+
+nav, nav .material-icons {
+  color: var(--nav-fg-color);
+}
+
+.material-icons {
+  color: var(--fg-color);
+}
+
+a:not(.noline) {
+  text-decoration: underline;
 }
 
 #app {
@@ -39,7 +94,7 @@ h3.header {
   position: relative;
 }
 
-.top-nav .locale-panel{
+.top-nav .locale-panel {
   position: absolute;
   top: 64px;
   height: 68px;
@@ -66,7 +121,6 @@ h3.header {
   display: block;
 }
 
-
 .locale-panel select{
   display: block;
   height: 32px;
@@ -121,6 +175,10 @@ h3.header {
   float: none;
 }
 
+select {
+  color: var(--fg-color);
+}
+
 .language-select {
   display: inline-flex;
   align-items: center;
@@ -152,7 +210,7 @@ h3.header {
   width: 0.5em;
   height: 0.5em;
   margin: 0 0 0.25rem -0.75rem;
-  border: solid black;
+  border: solid var(--fg-color);
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 3px;
@@ -171,6 +229,10 @@ h3.header {
   position: relative;
 }
 
+.textarea-container .material-icons {
+  color: #666;
+}
+
 .btn-delete-text {
   position: absolute;
   right: 1.5rem;
@@ -202,8 +264,8 @@ h3.header {
 }
 
 .btn-switch-type {
-  background-color: #fff;
+  background-color: var(--sec-bg-color);
-  color: #1565C0;
+  color: var(--fg-color);
   display: flex;
   align-items: center;
   margin: .5rem;
@@ -214,19 +276,22 @@ h3.header {
 }
 
 .btn-switch-type:hover {
-    background-color: #eee !important;
+  background-color: var(--sec-bg-color);
-    color: #1565C0;
 }
 
 .btn-switch-type.active {
-    background-color: #1565C0 !important;
+  background-color: var(--accent-color);
-    color: #fff;
+  color: #FFF;
+}
+
+.btn-switch-type.active .material-icons {
+  color: #FFF;
 }
 
 .file-dropzone {
   font-size: 1.1rem;
-  border: 1px solid #ccc;
+  background: var(--sec-bg-color);
-  background: #f3f3f3;
+  border: 1px solid var(--border-color);
   padding: 1rem 2rem 1rem 1.5rem;
   min-height: 220px;
   position: relative;
@@ -253,6 +318,7 @@ h3.header {
 .btn-blue {
   color: #1565C0;
 }
+
 .btn-action:disabled {
   color: #666;
 }
@@ -296,8 +362,8 @@ h3.header {
 .textarea-container textarea {
   font-size: 1.25rem;
   resize: none;
-  border: 1px solid #ccc;
+  background: var(--sec-bg-color);
-  background: #f3f3f3;
+  border: 1px solid var(--border-color);
   padding: 1rem 2rem 1rem 1.5rem;
   overflow-y: hidden;
 }
@@ -316,8 +382,8 @@ h3.header {
 .code {
   font-size: 90%;
   padding: 1rem 1.5rem;
-  border: 1px solid #ccc;
+  background: var(--code-bg-color);
-  background: #fbfbfb;
+  border: 1px solid var(--border-color);
   overflow: auto;
   font-family: monospace;
   min-height: 280px;
@@ -325,6 +391,11 @@ h3.header {
   overflow: auto;
 }
 
+code[class*="language-"], pre[class*="language-"] {
+  color: var(--fg-color);
+  text-shadow: 0 1px var(--pri-bg-color);
+}
+
 .page-footer .footer-copyright {
   justify-content: center;
   padding: 0.5rem 1rem;
@@ -348,12 +419,6 @@ h3.header {
   color: white;
 }
 
-@media (min-width: 993px) {
-  nav button.sidenav-trigger {
-    display: none;
-  }
-}
-
 #download-btn-wrapper {
   display: flex;
   justify-content: center;
@@ -384,3 +449,9 @@ h3.header {
     display: none;
   }
 }
+
+@media (min-width: 993px) {
+  nav button.sidenav-trigger {
+    display: none;
+  }
+}

libretranslate/templates/index.html

@@ -22,7 +22,6 @@
 	<link rel="preload" href="{{ url_for('static', filename='css/material-icons.css') }}" as="style"/>
 	<link rel="preload" href="{{ url_for('static', filename='css/prism.min.css') }}" as="style"/>
 	<link rel="preload" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" as="style"/>
-	<link rel="preload" href="{{ url_for('static', filename='css/dark-theme.css') }}" as="style"/>
 
 	<meta property="og:title" content="LibreTranslate - {{ _h('Free and Open Source Machine Translation API') }}" />
 	<meta property="og:type" content="website" />
@@ -49,15 +48,14 @@
 	<link rel="stylesheet" href="{{ url_for('static', filename='css/material-icons.css') }}" />
 	<link rel="stylesheet" href="{{ url_for('static', filename='css/prism.min.css') }}" />
 	<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" />
-	<link rel="stylesheet" href="{{ url_for('static', filename='css/dark-theme.css') }}" />	
 </head>
 
-<body class="white">
+<body>
 	<header>
-		<nav class="blue darken-3" role="navigation">
+		<nav role="navigation">
 			<div class="nav-wrapper container">
 				<button data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></button>
-				<a id="logo-container" href="/" class="brand-logo">
+				<a id="logo-container" href="/" class="brand-logo noline">
 					<img src="{{ url_for('static', filename='icon.svg') }}" alt="" class="logo">
 					<span>LibreTranslate</span>
 				</a>
@@ -73,7 +71,7 @@
 					{% endif %}
 					<li class="change-language"><a class="noline" href="javascript:void(0)" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
 					</li>
-					<li class="locale-panel blue darken-3">
+					<li class="locale-panel">
 						<select id="locales" onchange="changeLocale(this)">
 							{% for l in available_locales %}<option value="{{ l['code'] }}" {{ 'selected' if current_locale == l['code'] else ''}}>{{ l['name'] }}</option>{% endfor %}
 						</select>
@@ -82,7 +80,7 @@
 					{% endset %}
 					{{ menulinks }}
 				</ul>
-				<ul id="nav-mobile" class="sidenav blue darken-3">
+				<ul id="nav-mobile" class="sidenav">
 					{{ menulinks }}
 				</ul>
 				<script>
@@ -327,7 +325,7 @@
 	</div>
 	</main>
 
-	<footer class="page-footer blue darken-3">
+	<footer class="page-footer">
 		<div class="container">
 			<div class="row">
 				<div class="col l12 s12">