Merge pull request #826 from Joduai/master

add dark + light mode option #809 by @Joduai

config/config.ini.example

@@ -202,3 +202,6 @@ views.root = "themes/twentysixteen"
 
 ; Framework config. No need to edit.
 views.layout = "layout"
+
+; Admin theme: light or dark mode
+admin.theme = "dark"

lang/en_US.ini

@@ -321,3 +321,4 @@ msg_error_field_req_feedurl = "You need to specify the feed url."
 rss_feeds_description_select = "RSS Description"
 rss_description_body = "Post Body"
 rss_description_meta = "Post Meta Description"
+admin_theme = "Admin theme"

system/admin/views/add-content.html.php

@@ -195,7 +195,7 @@ $( function() {
                 <div class="col-sm-6" id="preview-col">
                     <label><?php echo i18n('Preview');?></label>
                     <br>
-                    <div id="wmd-preview" class="wmd-panel wmd-preview" style="width:100%;overflow:auto;"></div>
+                    <div id="wmd-preview" class="wmd-panel wmd-preview <?php if (config('admin.theme') === 'dark'){echo "card";}?>" style="width:100%;overflow:auto;"></divd
                 </div>
             </div>
         </form>

system/admin/views/add-page.html.php

@@ -58,7 +58,7 @@
                 <div class="col-sm-6" id="preview-col">
                     <label><?php echo i18n('Preview');?></label>
                     <br>
-                    <div id="wmd-preview" class="wmd-panel wmd-preview" style="width:100%;overflow:auto;"></div>
+                    <div id="wmd-preview" class="wmd-panel wmd-preview <?php if (config('admin.theme') === 'dark'){echo "card";}?>" style="width:100%;overflow:auto;"></div>
                 </div>
             </div>
         </form>

system/admin/views/config.html.php

@@ -168,6 +168,28 @@ Please install and enable the INTL extension to format the date format to your l
       <small><em><?php echo i18n('explain_version');?></em></small>
     </div>
   </div>
+  
+  <div class="form-group row">
+    <label class="col-sm-2 col-form-label"><?php echo i18n('admin_theme');?></label>
+    <div class="col-sm-10">
+      <div class="col-sm-10">
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="-config-admin.theme" id="admin.theme1" value="light" <?php if (config('admin.theme') === 'light' || is_null(config('admin.theme'))):?>checked<?php endif;?>>
+          <label class="form-check-label" for="admin.theme1">
+            Light
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="-config-admin.theme" id="admin.theme2" value="dark" <?php if (config('admin.theme') === 'dark'):?>checked<?php endif;?>>
+          <label class="form-check-label" for="admin.theme2">
+            Dark
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  
   <hr />
   <div class="form-group row">
     <div class="col-sm-10">

system/admin/views/edit-content.html.php

@@ -245,7 +245,7 @@ $( function() {
                 <div class="col-sm-6" id="preview-col">
                     <label><?php echo i18n('Preview');?></label>
                     <br>
-                    <div id="wmd-preview" class="wmd-panel wmd-preview" style="width:100%;overflow:auto;"></div>
+                    <div id="wmd-preview" class="wmd-panel wmd-preview <?php if (config('admin.theme') === 'dark'){echo "card";}?>" style="width:100%;overflow:auto;"></div>
                 </div>
             </div>
         </form>

system/admin/views/edit-page.html.php

@@ -168,7 +168,7 @@ $images = image_gallery(null, 1, 40);
                 <div class="col-sm-6" id="preview-col">
                     <label><?php echo i18n('Preview');?></label>
                     <br>
-                    <div id="wmd-preview" class="wmd-panel wmd-preview" style="width:100%;overflow:auto;"></div>
+                    <div id="wmd-preview" class="wmd-panel wmd-preview <?php if (config('admin.theme') === 'dark'){echo "card";}?>" style="width:100%;overflow:auto;"></div>
                 </div>
             </div>
         </form>

system/admin/views/layout.html.php

@@ -28,12 +28,12 @@ if (isset($_GET['search'])) {
     header("Location: $url");
 }
 ?>
-<body class="hold-transition sidebar-mini">
+<body class="hold-transition sidebar-mini <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "light-mode" : "dark-mode"); ?>">
 <div id="top"></div>
 <div class="wrapper">
 <style>.error-message ul {margin:0;padding:0;}</style>
   <!-- Navbar -->
-  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
+  <nav class="main-header navbar navbar-expand <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "navbar-white navbar-light" : "navbar-gray-dark navbar-dark"); ?>">
     <!-- Left navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
@@ -54,7 +54,7 @@ if (isset($_GET['search'])) {
   <!-- /.navbar -->
 
   <!-- Main Sidebar Container -->
-  <aside class="main-sidebar sidebar-dark-primary elevation-4">
+  <aside class="main-sidebar <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "sidebar-light-primary" : "sidebar-dark-primary"); ?> elevation-4">
 
 
     <!-- Sidebar -->
@@ -335,7 +335,7 @@ if (isset($_GET['search'])) {
 </div>
 <!-- ./wrapper -->
 <?php } else { ?>
-<body class="hold-transition login-page">
+<body class="hold-transition login-page <?php echo ((config('admin.theme') === 'light' || is_null(config('admin.theme'))) ? "light-mode" : "dark-mode"); ?>">
 <div class="login-box">
   <div class="login-logo">
     <h1><a href="https://www.htmly.com" target="_blank"><img width="200px" src="<?php echo site_url(); ?>system/resources/images/logo-big.png" alt="HTMLy"/></a></h1>

system/configList.json

@@ -93,5 +93,6 @@
     "mfa.state",
     "show.version",
     "thumbnail.width",
-    "rss.description"
+    "rss.description",
+    "admin.theme"
 ]