Add dark theme

frontend/public/index.html

@@ -133,6 +133,9 @@
     </div>
   </div>
 
+  [{[ if .Theme -]}]
+    <link rel="stylesheet" href="/[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css" />
+  [{[ end ]}]
   [{[ if .CSS -]}]
     <link rel="stylesheet" href="/[{[ .StaticURL ]}]/custom.css" />
   [{[ end ]}]

frontend/public/themes/dark.css

@@ -0,0 +1,140 @@
+:root {
+  --background: #121212;
+  --surfacePrimary: #171819;
+  --surfaceSecondary: #212528;
+  --divider: rgba(255, 255, 255, 0.12);
+  --icon: #ffffff;
+  --textPrimary: rgba(255, 255, 255, 0.87);
+  --textSecondary: rgba(255, 255, 255, 0.6);
+}
+
+body {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+
+#loading {
+  background: var(--background);
+}
+#loading .spinner div {
+  background: var(--icon);
+}
+
+#login {
+  background: var(--background);
+}
+
+header {
+  background: var(--surfacePrimary);
+}
+
+#search #input {
+  background: var(--surfaceSecondary);
+}
+#search.active #input,
+#search.active .boxes {
+  background: var(--surfacePrimary);
+}
+#search.active input {
+  color: var(--textPrimary);
+}
+#search.active #result {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+#search.active .boxes h3 {
+  color: var(--textPrimary);
+}
+
+.action {
+  color: var(--textPrimary) !important;
+}
+.action i {
+  color: var(--icon) !important;
+}
+.action .counter {
+  border-color: var(--surfacePrimary);
+}
+
+nav > div {
+  border-color: var(--divider);
+}
+
+#breadcrumbs {
+  border-color: var(--divider);
+  color: var(--textPrimary) !important;
+}
+#breadcrumbs span {
+  color: var(--textPrimary) !important;
+}
+
+#listing .item {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+  border-color: var(--divider) !important;
+}
+#listing .item i {
+  color: var(--icon);
+}
+#listing .item .modified {
+  color: var(--textSecondary);
+}
+#listing h2,
+#listing.list .header span {
+  color: var(--textPrimary) !important;
+}
+#listing.list .header span {
+  color: var(--textPrimary);
+}
+#listing.list .header i {
+  color: var(--icon);
+}
+#listing.list .item.header {
+  background: var(--background);
+}
+
+.card {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+.button--flat:hover {
+  background: var(--surfaceSecondary);
+}
+
+.card h3,
+.dashboard #nav,
+.dashboard p label {
+  color: var(--textPrimary);
+}
+.input {
+  background: var(--surfaceSecondary);
+  color: var(--textPrimary);
+}
+
+.dashboard #nav li,
+.collapsible {
+  border-color: var(--divider);
+}
+.collapsible > label * {
+  color: var(--textPrimary);
+}
+
+.shell {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+
+@media (max-width: 736px) {
+  #file-selection {
+    background: var(--surfaceSecondary) !important;
+  }
+  #file-selection span {
+    color: var(--textPrimary) !important;
+  }
+  nav {
+    background: var(--surfaceSecondary) !important;
+  }
+  #dropdown {
+    background: var(--surfaceSecondary) !important;
+  }
+}

frontend/src/components/files/Editor.vue

@@ -10,6 +10,7 @@ import buttons from '@/utils/buttons'
 import ace from 'ace-builds/src-min-noconflict/ace.js'
 import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
 import 'ace-builds/webpack-resolver'
+import { theme } from '@/utils/constants'
 
 export default {
   name: 'editor',
@@ -45,6 +46,10 @@ export default {
       mode: modelist.getModeForPath(this.req.name).mode,
       wrap: true
     })
+
+    if (theme == 'dark') {
+      this.editor.setTheme("ace/theme/twilight");
+    }
   },
   methods: {
     keyEvent (event) {

frontend/src/components/settings/Themes.vue

@@ -0,0 +1,18 @@
+<template>
+  <select v-on:change="change" :value="theme">
+    <option value="">{{ $t('settings.themes.light') }}</option>
+    <option value="dark">{{ $t('settings.themes.dark') }}</option>
+  </select>
+</template>
+
+<script>
+export default {
+  name: 'themes',
+  props: [ 'theme' ],
+  methods: {
+    change (event) {
+      this.$emit('update:theme', event.target.value)
+    }
+  }
+}
+</script>

frontend/src/i18n/en.json

@@ -119,6 +119,11 @@
     "newArchetype": "Create a new post based on an archetype. Your file will be created on content folder."
   },
   "settings": {
+    "themes": {
+      "title": "Theme",
+      "light": "Light",
+      "dark": "Dark"
+    },
     "instanceName": "Instance name",
     "brandingDirectoryPath": "Branding directory path",
     "documentation": "documentation",

frontend/src/utils/constants.js

@@ -9,6 +9,7 @@ const version = window.FileBrowser.Version
 const logoURL = `/${staticURL}/img/logo.svg`
 const noAuth = window.FileBrowser.NoAuth
 const loginPage = window.FileBrowser.LoginPage
+const theme = window.FileBrowser.Theme
 
 export {
   name,
@@ -20,5 +21,6 @@ export {
   signup,
   version,
   noAuth,
-  loginPage
+  loginPage,
+  theme
 }

frontend/src/views/settings/Global.vue

@@ -29,6 +29,11 @@
           {{ $t('settings.disableExternalLinks') }}
         </p>
 
+        <p>
+          <label for="theme">{{ $t('settings.themes.title') }}</label>
+          <themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
+        </p>
+
         <p>
           <label for="branding-name">{{ $t('settings.instanceName') }}</label>
           <input class="input input--block" type="text" v-model="settings.branding.name" id="branding-name" />
@@ -98,10 +103,12 @@ import { mapState } from 'vuex'
 import { settings as api } from '@/api'
 import UserForm from '@/components/settings/UserForm'
 import Rules from '@/components/settings/Rules'
+import Themes from '@/components/settings/Themes'
 
 export default {
   name: 'settings',
   components: {
+    Themes,
     UserForm,
     Rules
   },

http/static.go

@@ -37,6 +37,7 @@ func handleWithStaticData(w http.ResponseWriter, r *http.Request, d *data, box *
 		"LoginPage":       auther.LoginPage(),
 		"CSS":             false,
 		"ReCaptcha":       false,
+		"Theme":           d.settings.Branding.Theme,
 	}
 
 	if d.settings.Branding.Files != "" {

settings/branding.go

@@ -5,4 +5,5 @@ type Branding struct {
 	Name            string `json:"name"`
 	DisableExternal bool   `json:"disableExternal"`
 	Files           string `json:"files"`
+	Theme           string `json:"theme"`
 }