Add toggle night mode in web UI

view/css/yla-dialog.css

@@ -1 +1 @@
-.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:60px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-dialog__overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:32px}.yla-dialog__overlay .yla-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:400px;min-height:0;max-height:100%;overflow:hidden;background-color:#FFF;font-size:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;min-height:0;background-color:#353535;color:#EEE;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>p{-webkit-box-flex:1;flex:1 0;font-weight:600;font-size:1em;text-transform:uppercase}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.yla-dialog__content{grid-column-start:1;grid-column-end:3;align-self:baseline;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.label{padding:8px 0;align-self:stretch;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>input,.yla-dialog__overlay .yla-dialog>.yla-dialog__body>textarea{color:#232323;padding:8px;border:1px solid #E5E5E5;font-size:.9em;min-height:37px;resize:vertical}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>.suggestion{position:absolute;display:block;padding:8px;background-color:#EEE;border:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a{text-transform:uppercase;padding:0 8px;font-size:.9em;font-weight:600;border-bottom:1px dashed transparent}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:focus{outline:none;color:#F44336;border-bottom:1px dashed #F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>i{width:19px;line-height:19px;text-align:center}
+.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:60px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-dialog__overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:32px}.yla-dialog__overlay .yla-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:400px;min-height:0;max-height:100%;overflow:hidden;background-color:#FFF;font-size:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;min-height:0;background-color:#292929;color:#FFF;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>p{-webkit-box-flex:1;flex:1 0;font-weight:600;font-size:1em;text-transform:uppercase}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.yla-dialog__content{grid-column-start:1;grid-column-end:3;align-self:baseline;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.label{padding:8px 0;align-self:stretch;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>input,.yla-dialog__overlay .yla-dialog>.yla-dialog__body>textarea{color:#232323;padding:8px;border:1px solid #E5E5E5;font-size:.9em;min-height:37px;resize:vertical}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>.suggestion{position:absolute;display:block;padding:8px;background-color:#EEE;border:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a{text-transform:uppercase;padding:0 8px;font-size:.9em;font-weight:600;border-bottom:1px dashed transparent}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:focus{outline:none;color:#F44336;border-bottom:1px dashed #F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>i{width:19px;line-height:19px;text-align:center}

view/css/yla-tooltip.css

@@ -1 +1 @@
-.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:70px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-tooltip{font-size:14px;color:#EEE;background-color:#232323;padding:8px;border-radius:4px;position:relative;z-index:1000}.yla-tooltip::after{content:'';display:block;position:absolute;border:8px solid transparent}.yla-tooltip.left{margin-left:-14px}.yla-tooltip.left::after{top:50%;right:-16px;margin-top:-8px;border-left-color:#232323}.yla-tooltip.top{margin-top:-14px}.yla-tooltip.top::after{left:50%;bottom:-16px;margin-left:-8px;border-top-color:#232323}.yla-tooltip.right{margin-left:14px}.yla-tooltip.right::after{top:50%;left:-16px;margin-top:-8px;border-right-color:#232323}.yla-tooltip.bottom{margin-top:14px}.yla-tooltip.bottom::after{left:50%;top:-16px;margin-left:-8px;border-bottom-color:#232323}
+.header-link{border-right:1px solid #E5E5E5;color:#232323;cursor:pointer;font-size:.9em;line-height:60px;overflow:hidden;padding:0 16px}.header-link:hover{color:#F44336}.full-overlay{position:fixed;z-index:101;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;background-color:rgba(0,0,0,0.5);top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-box-pack:center;justify-content:center;padding:32px}.yla-tooltip{font-size:14px;color:#FFF;background-color:#232323;padding:8px;border-radius:4px;position:relative;z-index:1000}.yla-tooltip::after{content:'';display:block;position:absolute;border:8px solid transparent}.yla-tooltip.left{margin-left:-14px}.yla-tooltip.left::after{top:50%;right:-16px;margin-top:-8px;border-left-color:#232323}.yla-tooltip.top{margin-top:-14px}.yla-tooltip.top::after{left:50%;bottom:-16px;margin-left:-8px;border-top-color:#232323}.yla-tooltip.right{margin-left:14px}.yla-tooltip.right::after{top:50%;left:-16px;margin-top:-8px;border-right-color:#232323}.yla-tooltip.bottom{margin-top:14px}.yla-tooltip.bottom::after{left:50%;top:-16px;margin-left:-8px;border-bottom-color:#232323}

view/index.html

@@ -24,7 +24,7 @@
 </head>
 
 <body>
-    <div id="index-page">
+    <div id="index-page" :class="{night: nightMode}">
         <div id="sidebar">
             <p id="logo">栞</p>
             <yla-tooltip placement="right" content="Reload data">
@@ -49,8 +49,8 @@
                 </a>
             </yla-tooltip>
             <yla-tooltip placement="right" content="Toggle night mode">
-                <a>
+                <a @click="toggleNightMode">
-                    <i class="fas fa-moon fa-fw"></i>
+                    <i class="fas fa-fw" :class="nightMode ? 'fa-moon' : 'fa-sun'"></i>
                 </a>
             </yla-tooltip>
             <yla-tooltip placement="right" content="Log out">
@@ -219,6 +219,10 @@
                     this.$refs.content.scrollTop = 0;
                     localStorage.setItem('shiori-list-view', this.listView ? '1' : '0');
                 },
+                toggleNightMode() {
+                    this.nightMode = !this.nightMode;
+                    localStorage.setItem('shiori-night-mode', this.nightMode ? '1' : '0');
+                },
                 showDialogAdd() {
                     this.showDialog({
                         title: 'New Bookmark',

view/less/stylesheet.less

@@ -72,7 +72,7 @@ a {
                 align-items: baseline;
                 padding: 8px;
                 p {
-                    color: @colorLight;
+                    color: @color;
                     font-size: 0.9em;
                     margin-right: 16px;
                     min-width: 65px;
@@ -87,13 +87,13 @@ a {
                 a {
                     display: block;
                     cursor: pointer;
-                    color: @colorLight;
+                    color: @color;
                     text-align: center;
                     font-size: 0.9em;
                     flex: 1 0;
                     i {
                         margin-right: 8px;
-                        color: @colorLight;
+                        color: @color;
                     }
                     &:hover {
                         color: @main;
@@ -135,7 +135,7 @@ a {
         display: flex;
         flex-flow: column nowrap;
         flex-shrink: 0;
-        background-color: @darkBg;
+        background-color: @sidebarBg;
         min-width: 0;
         min-height: 0;
         overflow: hidden;
@@ -152,7 +152,7 @@ a {
             line-height: 60px;
             text-align: center;
             display: block;
-            color: @colorLight;
+            color: @colorSidebar;
             &:hover {
                 background-color: @color;
             }
@@ -185,6 +185,7 @@ a {
                 line-height: 60px;
                 padding: 0 16px;
                 font-size: 1em;
+                background-color: @contentBg;
                 border-right: 1px solid @border;
             }
             a {
@@ -315,7 +316,9 @@ a {
                         padding: 8px;
                         text-align: center;
                         font-size: 0.9em;
+                        color: @color;
                         border: 1px solid @border;
+                        background-color: @contentBg;
                         margin: 0 8px;
                     }
                     p {
@@ -350,14 +353,13 @@ a {
                         border-bottom-width: 1px;
                         position: relative;
                         padding-left: 100px;
-                        background-color: #FAFAFA;
+                        background-color: @contentBg;
                         &:first-of-type {
                             border-top-width: 1px;
                         }
                         .bookmark-content {
                             display: flex;
                             flex-flow: column nowrap;
-                            background-color: @contentBg;
                             border-left: 1px solid @border;
                             padding: 16px 24px 8px;
                             img {
@@ -378,7 +380,6 @@ a {
                             }
                         }
                         .bookmark-menu {
-                            background-color: @contentBg;
                             border-left: 1px solid @border;
                             padding: 0 24px 16px;
                         }
@@ -390,6 +391,46 @@ a {
             }
         }
     }
+    &.night {
+        background-color: @nightBg;
+        #body {
+            #header {
+                color: @nightColor;
+                border-color: @nightBorder;
+                background-color: @nightContentBg;
+                input {
+                    color: @nightColor;
+                    border-color: @nightBorder;
+                    background-color: @nightContentBg;
+                }
+            }
+            #content {
+                #grid {
+                    .bookmark {
+                        border-color: @nightBorder;
+                        background-color: @nightContentBg;
+                        .bookmark-content {
+                            border-color: @nightBorder;
+                            .title,
+                            .excerpt {
+                                color: @nightColor;
+                            }
+                        }
+                        .bookmark-menu {
+                            border-color: @nightBorder;
+                        }
+                    }
+                    .pagination-box {
+                        input {
+                            color: @nightColor;
+                            border-color: @nightBorder;
+                            background-color: @nightContentBg;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 #cache-page {
@@ -483,4 +524,24 @@ a {
             color: white;
         }
     }
+}
+
+.night .yla-dialog {
+    color: @nightColor;
+    background-color: @nightBg;
+    >.yla-dialog__header {
+        background-color: @nightContentBg;
+        border-bottom: 1px solid @nightBorder;
+    }
+    >.yla-dialog__body {
+        >input,
+        >textarea {
+            color: @nightColor;
+            border-color: @nightBorder;
+            background-color: @nightContentBg;
+        }
+    }
+    >.yla-dialog__footer {
+        border-color: @nightBorder;
+    }
 }

view/less/variable.less

@@ -2,18 +2,21 @@
 //
 // Background
 @bg: #EEE;
-@darkBg: #353535;
+@sidebarBg: #292929;
 @contentBg: #FFF;
+@nightBg: #1F1F1F;
+@nightContentBg: #292929;
 //
 // Border
 @border: #E5E5E5;
-@borderDark: #9E9E9E;
+@nightBorder: #191919;
 //
 // Font color
 @color: #232323;
 @colorLink: #999;
-@colorLight: #EEE;
+@colorSidebar: #FFF;
 @fontSize: 0.9em;
+@nightColor: #FFF;
 //
 // Color theme
 @main: #F44336;
@@ -22,8 +25,13 @@
 //
 // Tooltip
 @tooltipBg: #232323;
+@tooltipColor: #FFF;
 @arrowWidth: 8px;
 //
+// Dialog
+@dialogHeaderBg: #292929;
+@dialogHeaderColor: #FFF;
+//
 // Other variable
 @headerHeight: 60px;
 //

view/less/yla-dialog.less

@@ -29,8 +29,8 @@
             flex-flow: row nowrap;
             padding: 16px;
             min-height: 0;
-            background-color: @darkBg;
+            background-color: @dialogHeaderBg;
-            color: @colorLight;
+            color: @dialogHeaderColor;
             flex-shrink: 0;
             >p {
                 flex: 1 0;

view/less/yla-tooltip.less

@@ -1,7 +1,7 @@
 @import "variable";
 .yla-tooltip {
     font-size: 14px;
-    color: @colorLight;
+    color: @tooltipColor;
     background-color: @tooltipBg;
     padding: 8px;
     border-radius: 4px;