Now you can choose light and dark theme

admin/design_themes.php

@@ -1,54 +1,114 @@
+<?php
+$savedTheme = $config->getThemes();
+$delay = 0.2;
+$themes = getThemesSeparated();
+?>
 <div class="row">
-    <?php
+    <div class="col-sm-6">
-    $savedTheme = $config->getTheme();
+        <div class="panel panel-default">
-    $delay = 0.2;
+            <div class="panel-heading">
-    foreach (glob("{$global['systemRootPath']}view/css/custom/*.css") as $filename) {
+                <?php echo __('Dark is Default'); ?>
-        //echo "$filename size " . filesize($filename) . "\n";
+                <div class="material-switch pull-right">
-        $file = basename($filename);         // $file is set to "index.php"
+                    <input class="defaultTheme" data-toggle="toggle" type="checkbox" value="" id="defaultThemeDark" <?php echo ($savedTheme->defaultTheme == 'dark') ? "checked" : ""; ?>>
-        $fileEx = basename($filename, ".css"); // $file is set to "index"
+                    <label for="defaultThemeDark" class="label-primary"></label>
-        ?>
-        <div class="col-xs-4  <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp', 'themess', $delay); ?>">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <?php echo ucfirst($fileEx); ?>
-                    <div class="material-switch pull-right">
-                        <input class="themeSwitch" data-toggle="toggle" type="checkbox" value="<?php echo($fileEx); ?>" id="themeSwitch<?php echo($fileEx); ?>" <?php echo ($fileEx == $savedTheme) ? "checked" : ""; ?>>
-                        <label for="themeSwitch<?php echo($fileEx); ?>" class="label-primary"></label>
-                    </div>
-                </div>
-                <div class="panel-body">
-                    <img src="<?php echo $global['webSiteRootURL'], "view/css/custom/", $fileEx, ".png"; ?>" class="img-responsive">
                 </div>
             </div>
+            <div class="panel-body">
+                <?php
+                foreach ($themes['dark'] as $fileEx) {
+                ?>
+                    <div class="col-xs-6  <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp', 'themess', $delay); ?>">
+                        <div class="panel panel-default">
+                            <div class="panel-heading">
+                                <?php echo ucfirst($fileEx); ?>
+                                <div class="material-switch pull-right">
+                                    <input class="themeSwitch isDarkTheme" data-toggle="toggle" type="checkbox" value="<?php echo ($fileEx); ?>" id="themeSwitch<?php echo ($fileEx); ?>" <?php echo ($fileEx == $savedTheme->dark) ? "checked" : ""; ?>>
+                                    <label for="themeSwitch<?php echo ($fileEx); ?>" class="label-success"></label>
+                                </div>
+                            </div>
+                            <div class="panel-body">
+                                <img src="<?php echo $global['webSiteRootURL'], "view/css/custom/", $fileEx, ".png"; ?>" class="img-responsive">
+                            </div>
+                        </div>
+                    </div>
+                <?php
+                }
+                ?>
+            </div>
         </div>
-        <?php
+    </div>
-    }
+    <div class="col-sm-6">
-    ?>
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <?php echo __('Light is Default'); ?>
+                <div class="material-switch pull-right">
+                    <input class="defaultTheme" data-toggle="toggle" type="checkbox" value="" id="defaultThemeLight" <?php echo ($savedTheme->defaultTheme == 'light') ? "checked" : ""; ?>>
+                    <label for="defaultThemeLight" class="label-primary"></label>
+                </div>
+            </div>
+            <div class="panel-body">
+                <?php
+                foreach ($themes['light'] as $fileEx) {
+                ?>
+                    <div class="col-xs-6  <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp', 'themess', $delay); ?>">
+                        <div class="panel panel-default">
+                            <div class="panel-heading">
+                                <?php echo ucfirst($fileEx); ?>
+                                <div class="material-switch pull-right">
+                                    <input class="themeSwitch isLightTheme" data-toggle="toggle" type="checkbox" value="<?php echo ($fileEx); ?>" id="themeSwitch<?php echo ($fileEx); ?>" <?php echo ($fileEx == $savedTheme->light) ? "checked" : ""; ?>>
+                                    <label for="themeSwitch<?php echo ($fileEx); ?>" class="label-success"></label>
+                                </div>
+                            </div>
+                            <div class="panel-body">
+                                <img src="<?php echo $global['webSiteRootURL'], "view/css/custom/", $fileEx, ".png"; ?>" class="img-responsive">
+                            </div>
+                        </div>
+                    </div>
+                <?php
+                }
+                ?>
+            </div>
+        </div>
+    </div>
 </div>
 <script>
-    function checkSwitch() {
+    function switchThemeDark(t) {
-        var defaultSwitch = $('#defaultSwitch').is(":checked");
+        $('.themeSwitch.isDarkTheme').not(t).prop('checked', false);
-        var netflixSwitch = $('#netflixSwitch').is(":checked");
+        saveTheme();
-        var gallerySwitch = $('#gallerySwitch').is(":checked");
-        if (!defaultSwitch && !netflixSwitch && !gallerySwitch) {
-            $('#netflixSwitch').prop('checked', false);
-            $('#gallerySwitch').prop('checked', false);
-            $('#defaultSwitch').prop('checked', true);
-        }
     }
-    $(document).ready(function () {
-        $('.themeSwitch').change(function (e) {
-            modal.showPleaseWait();
-            $('.themeSwitch').not(this).prop('checked', false);
-            $.ajax({
-                url: webSiteRootURL+'admin/themeUpdate.json.php',
-                data: {"theme": $(this).val()},
-                type: 'post',
-                success: function (response) {
-                    modal.hidePleaseWait();
-                }
-            });
 
+    function switchThemeLight(t) {
+        $('.themeSwitch.isLightTheme').not(t).prop('checked', false);
+        saveTheme();
+    }
+
+    function saveTheme() {
+        modal.showPleaseWait();
+        $.ajax({
+            url: webSiteRootURL + 'admin/themeUpdate.json.php',
+            data: {
+                "themeLight": $('.themeSwitch.isLightTheme:checked').val(),
+                "themeDark": $('.themeSwitch.isDarkTheme:checked').val(),
+                "defaultTheme": $('#defaultThemeDark').is(':checked')?'dark':'light',
+            },
+            type: 'post',
+            success: function(response) {
+                avideoResponse(response);
+                modal.hidePleaseWait();
+            }
+        });
+    }
+
+    $(document).ready(function() {
+        $('.themeSwitch.isDarkTheme').change(function(e) {
+            switchThemeDark(this);
+        });
+        $('.themeSwitch.isLightTheme').change(function(e) {
+            switchThemeLight(this);
+        });
+        $('.defaultTheme').change(function(e) {
+            $('.defaultTheme').not(this).prop('checked', false);
+            saveTheme();
         });
     });
 </script>

admin/themeUpdate.json.php

@@ -6,10 +6,20 @@ if (!isset($global['systemRootPath'])) {
 }
 require_once $global['systemRootPath'] . 'objects/user.php';
 if (!User::isAdmin()) {
-    die('{"error":"' . __("Permission denied") . '"}');
+    forbiddenPage('Admin Only');
 }
 
 $config = new AVideoConf();
-$config->setTheme($_POST['theme']);
+if(!empty($_POST['theme'])){
+    $config->setTheme($_POST['theme'], @$_REQUEST["defaultTheme"]);
+}else if(!empty($_POST['themeLight'])){
+    $config->setThemes($_REQUEST["themeLight"], $_REQUEST["themeDark"], $_REQUEST["defaultTheme"]);
+}
 
-echo '{"status":"' . $config->save() . '"}';
+$obj = new stdClass();
+$obj->error = empty($config->save());
+
+$config = new AVideoConf();
+$obj->themes = $config->getThemes();
+
+echo json_encode($obj);

install/checkConfiguration.php

@@ -5,7 +5,7 @@ if (file_exists("../videos/configuration.php")) {
 }
 
 
-$installationVersion = "14.2";
+$installationVersion = "14.3";
 
 require_once '../objects/functionsSecurity.php';
 

install/database.sql

@@ -324,7 +324,7 @@ CREATE TABLE IF NOT EXISTS `configurations` (
   `allow_download` TINYINT(1) NULL DEFAULT 0,
   `session_timeout` INT NULL DEFAULT 3600,
   `autoplay` TINYINT(1) NULL,
-  `theme` VARCHAR(45) NULL DEFAULT 'default',
+  `theme` TEXT NULL DEFAULT 'default',
   `smtp` TINYINT(1) NULL,
   `smtpAuth` TINYINT(1) NULL,
   `smtpSecure` VARCHAR(255) NULL COMMENT '\'ssl\'; // secure transfer enabled REQUIRED for Gmail',

objects/configuration.php

@@ -49,6 +49,8 @@ class AVideoConf extends ObjectYPT{
     // version 4
     protected $encoderURL;
 
+    const DARKTHEMES = array('cyborg','darkly','netflix','slate','superhero','solar');
+
     public function __construct($video_resolution = "")
     {
         $this->load();
@@ -417,9 +419,80 @@ class AVideoConf extends ObjectYPT{
         return $this->theme;
     }
 
-    public function setTheme($theme)
+    public function getThemes()
     {
-        $this->theme = $theme;
+        $theme = json_encode(array('light'=>'default', 'dark'=>'netflix', 'defaultTheme'=>'light'));
+        if (empty($this->theme)) {
+            return json_decode($theme);
+        }
+        $json = json_decode($this->theme);
+        if (empty($json)) {
+            if(in_array($this->theme, AVideoConf::DARKTHEMES)){
+                $theme = json_encode(array('light'=>'default', 'dark'=>$this->theme, 'defaultTheme'=>'dark'));
+            }else{
+                $theme = json_encode(array('light'=>$this->theme, 'dark'=>'netflix', 'defaultTheme'=>'light'));
+            }
+            return json_decode($theme);
+        }
+        return $json;
+    }
+
+    public function getThemeLight()
+    {
+        $theme = $this->getThemes();
+        return $theme->light;
+    }
+
+    public function getThemeDark()
+    {
+        $theme = $this->getThemes();
+        return $theme->dark;
+    }
+
+    public function getDefaultTheme()
+    {
+        if($this->isDefaultThemeDark()){
+            return  $this->getThemeDark();
+        }else{
+            return  $this->getThemeLight();
+        }
+    }
+
+    public function getAlternativeTheme()
+    {
+        if(!$this->isDefaultThemeDark()){
+            return  $this->getThemeDark();
+        }else{
+            return  $this->getThemeLight();
+        }
+    }
+
+    public function isDefaultThemeDark()
+    {
+        $theme = $this->getThemes();
+        return $theme->defaultTheme == 'dark';
+    }
+
+    public function setTheme($theme, $setDefault=false)
+    {
+        $themes = $this->getThemes();
+        if(in_array($theme, AVideoConf::DARKTHEMES)){
+            $themes->dark = $theme;
+            if($setDefault){
+                $themes->defaultTheme = 'dark';
+            }
+        }else{
+            $themes->light = $theme;
+            if($setDefault){
+                $themes->defaultTheme = 'light';
+            }
+        }
+        $this->theme = json_encode($themes);
+    }
+
+    public function setThemes($lightTheme, $darkTheme, $defaultTheme)
+    {
+        $this->theme = json_encode(array('light'=>$lightTheme, 'dark'=>$darkTheme, 'defaultTheme'=>$defaultTheme));
     }
 
     public function getSmtp()

objects/functions.php

@@ -5001,6 +5001,27 @@ function getThemes()
     return $_getThemes;
 }
 
+
+function getThemesSeparated()
+{
+    global $_getThemes, $global;
+    if (isset($_getThemes)) {
+        return $_getThemes;
+    }
+    $_getThemesLight = [];
+    $_getThemesDark = [];
+    foreach (glob("{$global['systemRootPath']}view/css/custom/*.css") as $filename) {
+        $fileEx = basename($filename, ".css");
+        if(in_array($fileEx, AVideoConf::DARKTHEMES)){
+            $_getThemesDark[] = $fileEx;
+        }else{
+            $_getThemesLight[] = $fileEx;
+        }
+    }
+    return array('light'=>$_getThemesLight, 'dark'=>$_getThemesDark);
+}
+
+
 function getCurrentTheme()
 {
     global $config;
@@ -5011,7 +5032,12 @@ function getCurrentTheme()
     if (!empty($_COOKIE['customCSS'])) {
         return $_COOKIE['customCSS'];
     }
-    return $config->getTheme();
+
+    if (!empty($_COOKIE['themeMode'])) {
+        return $config->getAlternativeTheme();
+    }else{        
+        return  $config->getDefaultTheme();
+    }
 }
 
 function isWindows()

plugin/Layout/darkModeSwitch.php

@@ -0,0 +1,47 @@
+<?php
+$checked = '';
+if (!empty($_COOKIE['themeMode'])) {
+    $checked = 'checked';
+}
+?>
+<label for="themeMode" class="row-label singleLineMenu hideIfCompressed" style="padding: 5px;">
+    <?php
+    if($config->isDefaultThemeDark()){
+        echo '<i class="fa-solid fa-sun"></i> ';
+        echo __('Light Mode');
+    }else{
+        echo '<i class="fa-solid fa-moon"></i> ';
+        echo __('Dark Mode');
+    }
+    ?>
+    <div class="material-switch">
+        <input type="checkbox" value="1" id="themeMode" <?php echo $checked; ?> onchange="toogleThemeMode();">
+        <label for="themeMode" class="label-success"></label>
+    </div>
+</label>
+<script>
+    function toogleThemeMode() {
+        var themeMode = Cookies.get('themeMode');
+        var isEmptythemeMode = empty(themeMode);
+        Cookies.set('themeMode', isEmptythemeMode ? 1 : 0, {
+            path: '/',
+            expires: 365
+        });
+
+        loadTheme();
+    }
+    function loadTheme() {
+        var themeMode = Cookies.get('themeMode');
+        var isEmptythemeMode = empty(themeMode);
+        var themeName = '<?php echo $config->getDefaultTheme(); ?>';
+        if (!isEmptythemeMode) {
+            themeName = '<?php echo $config->getAlternativeTheme(); ?>';
+        }
+
+        $('#themeMode').prop('checked', !isEmptythemeMode);
+        $('#customCSS').attr('href', webSiteRootURL + 'view/css/custom/' + themeName + '.css');
+    }
+    $(document).ready(function() {
+        loadTheme();
+    });
+</script>

updatedb/updateDb.v14.3.sql

@@ -0,0 +1,4 @@
+ALTER TABLE `configurations`
+MODIFY COLUMN `theme` TEXT NULL DEFAULT 'default';
+
+UPDATE configurations SET  version = '14.3', modified = now() WHERE id = 1;

view/configurations_body.php

@@ -7,12 +7,6 @@ if (User::isAdmin()) {
                 <div class="panel-heading tabbable-line">
 
                     <ul class="nav nav-tabs">
-                        <li class="nav-item">
-                            <a class="nav-link " href="#tabTheme" data-toggle="tab">
-                                <span class="fa fa-cog"></span>
-                                <?php echo __("Themes"); ?>
-                            </a>
-                        </li>
                         <li class="nav-item">
                             <a class="nav-link " href="#tabCompatibility" data-toggle="tab">
                                 <span class="fa fa-cog"></span>
@@ -41,76 +35,6 @@ if (User::isAdmin()) {
                 </div>
                 <div class="panel-body">
                     <div class="tab-content clearfix">
-                        <div class="tab-pane" id="tabTheme">
-                            <div class="panel panel-default">
-                                <div class="panel-heading">
-                                    <h2><?php echo __("Themes"); ?></h2>
-                                </div>
-                                <div class="panel-body">
-
-                                    <h1 class="alert alert-warning">
-                                        <span class="fa fa-warning"></span>
-                                        <?php echo __("Do not forget to save after choose your theme"); ?>
-                                    </h1>
-                                    <div class="alert alert-info">
-                                        <span class="fa fa-info-circle"></span>
-                                        <?php echo __("We would like to thanks http://bootswatch.com/"); ?>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-xs-4">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading"><?php echo __('Customize Your site colors'); ?> <div class="pull-right"><?php echo getPluginSwitch('Customize'); ?></div>
-                                                </div>
-                                                <div class="panel-body">
-                                                    <img src="<?php echo $global['webSiteRootURL'], "view/css/custom/customize.png"; ?>" class="img-responsive">
-                                                    <?php
-                                                    if (!AVideoPlugin::exists('Customize')) {
-                                                    ?>
-                                                        <a href="https://youphp.tube/marketplace/" class="btn btn-success btn-radio btn-block btn-xs" id=""> <i class="fas fa-palette"></i> Purchase the Customize Plugin</a>
-                                                    <?php
-                                                    } else {
-                                                    ?>
-                                                        <a href="<?php echo $global['webSiteRootURL']; ?>admin/?page=design_colors" class="btn btn-success btn-radio btn-block btn-xs" id=""> <i class="fas fa-palette"></i> Customize Colors</a>
-                                                    <?php }
-                                                    ?>
-                                                </div>
-                                            </div>
-
-                                        </div>
-                                        <?php
-                                        $themes = getThemes();
-                                        $savedTheme = $config->getTheme();
-                                        foreach ($themes as $fileEx) {
-                                            if ($fileEx == $savedTheme) {
-                                        ?>
-                                                <script>
-                                                    $(document).ready(function() {
-                                                        setTimeout(function() {
-                                                            $("#btn<?php echo ($fileEx); ?>").trigger("click");
-                                                        }, 1000);
-                                                    });
-                                                </script>
-                                            <?php }
-                                            ?>
-                                            <div class="col-xs-4">
-                                                <div class="panel panel-default">
-                                                    <div class="panel-heading"><?php echo ucfirst($fileEx); ?></div>
-                                                    <div class="panel-body">
-
-                                                        <img src="<?php echo $global['webSiteRootURL'], "view/css/custom/", $fileEx, ".png"; ?>" class="img-responsive img-radio">
-                                                        <button type="button" class="btn btn-default btn-radio btn-block btn-xs" id="btn<?php echo ($fileEx); ?>"><?php echo ucfirst($fileEx); ?></button>
-                                                        <input type="checkbox" value="<?php echo ($fileEx); ?>" class="hidden left-item">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        <?php }
-                                        ?>
-                                    </div>
-
-                                </div>
-                            </div>
-
-                        </div>
                         <div class="tab-pane" id="tabCompatibility">
                             <div class="alert alert-success">
                                 <span class="fa fa-film"></span>

view/css/navbar.css

@@ -20,11 +20,11 @@
 }
 
 #menuBackButton,
-#compressMenu{
+.compressMenu{
     display: none;
 }
 
-body.youtube #compressMenu,
+body.youtube .compressMenu,
 body.pwa #menuBackButton{
     display: inline-block;
 }
@@ -39,17 +39,17 @@ body.youtube #buttonMenu{
     border-bottom-left-radius: 0;
 }
 
-body.youtube #compressMenu .compress{
+body.youtube .compressMenu .compress{
     display: inline-block;
 }
-body.youtube #compressMenu .expand{
+body.youtube .compressMenu .expand{
     display: none;
 }
 
-body.youtube.compressedMenu #compressMenu .expand{
+body.youtube.compressedMenu .compressMenu .expand{
     display: inline-block;
 }
-body.youtube.compressedMenu #compressMenu .compress{
+body.youtube.compressedMenu .compressMenu .compress{
     display: none;
 }
 

view/include/navbarMenuAndLogo.php

@@ -8,7 +8,7 @@
                 <?php
                 echo getHamburgerButton('buttonMenu', 'x', 'class="btn btn-default pull-left hamburger"  data-toggle="tooltip"  title="' . __("Main Menu") . '" data-placement="bottom"');
                 ?>
-                <button type="button" id="compressMenu" class="btn btn-default" onclick="YPTSidebarCompressToggle();">
+                <button type="button" class="btn btn-default compressMenu" onclick="YPTSidebarCompressToggle();">
                     <i class="fa-solid fa-compress compress" data-toggle="tooltip" title="<?php echo __('Compress Menu'); ?>" data-placement="bottom"></i>
                     <i class="fa-solid fa-expand expand" data-toggle="tooltip" title="<?php echo __('Expand Menu'); ?>" data-placement="bottom"></i>
                 </button>

view/include/navbarSidebar.php

@@ -76,6 +76,16 @@ global $avideoLayout;
                 </li>
             <?php
             }
+            ?>
+            <li>
+                <hr>
+            </li>
+            <li>
+                <?php
+                include $global['systemRootPath'] . 'plugin/Layout/darkModeSwitch.php';
+                ?>
+            </li>
+            <?php
             if (Video::videoMadeForKidsExists()) {
             ?>
                 <li>
@@ -689,6 +699,20 @@ global $avideoLayout;
             ?>
         </ul>
     </div>
+    <!--
+    <div style="position: absolute; top: 55px; right:-19px;" onclick="YPTSidebarCompressToggle();">
+        <button class="btn btn-default btn-lg compressMenu" style="
+                                                                padding: 6px 3px;
+                                                                border-radius: 0 20px 20px 0;
+                                                                border-left: none;
+                                                                border-left-width: initial;
+                                                                border-left-style: none;
+                                                            ">
+            <i class="fa-solid fa-chevron-right expand" data-toggle="tooltip" title="<?php echo __('Expand Menu'); ?>" data-placement="right"></i>
+            <i class="fa-solid fa-chevron-left compress" data-toggle="tooltip" title="<?php echo __('Compress Menu'); ?>" data-placement="right"></i>
+        </button>
+    </div>
+            -->
 </div>
 <script>
     $(document).ready(function() {