Automatyczny motyw Bootstrap 5.3 na bazie pory dnia

W tym wpisie chciałbym się podzielić fajnym sposobem na realizację automatycznego motywu strony na Bootstrap 5.3 który zmienia się w zależności od tego czy jest dzień czy noc, zmieniając się z jasnego na ciemny a także naśladujący tak zwane złote i niebieskie godziny w fotografii, co może obrazować zbliżający się zachód słońca i wieczór. Do tego celu wykorzystałem własne rozszerzenie Bootstrap 5.3, w którym wprowadzono dwa motywy light i dark a ja dodałem jeszcze motywy golden i twilight. Przedstawiam klasę Theme do Koseven do realizacji tego zadania.

Klasa Theme do obługi motywu

<?php

defined('SYSPATH') OR die('No direct script access.');

class Theme
{

    const DAY = 10;
    const GOLDEN = 20;
    const TWILIGHT = 30;
    const NIGHT = 40;

    public static $daytime = Theme::DAY;

    public static function daytime($golden_duration = 3600, $twilight_duration = NULL)
    {
        $suninfo = Date::suninfo();
        $sunrise_time = Arr::get($suninfo, 'sunrise');
        $sunset_time = Arr::get($suninfo, 'sunset');
        $civil_twilight_begin_time = Arr::get($suninfo, 'civil_twilight_begin');
        $civil_twilight_end_time = Arr::get($suninfo, 'civil_twilight_end');
        $now = time();

        $twilight_morning_start_time = $twilight_duration !== NULL ? $sunrise_time - $twilight_duration : $civil_twilight_begin_time;        
        $golden_morning_start_time = $sunrise_time;
        $golden_morning_end_time = $sunrise_time + $golden_duration;
        $golden_evening_start_time = $sunset_time - $golden_duration;
        $golden_evening_end_time = $sunset_time;
        $twilight_evening_end_time = $twilight_duration !== NULL ? $sunset_time + $twilight_duration : $civil_twilight_end_time;        

        if (($now >= $twilight_morning_start_time) && ($now < $golden_morning_start_time))
        {
            return Theme::TWILIGHT;
        }
        elseif (($now >= $golden_morning_start_time) && ($now < $golden_morning_end_time))
        {
            return Theme::GOLDEN;
        }
        elseif (($now >= $golden_morning_end_time) && ($now < $golden_evening_start_time))
        {
            return Theme::DAY;
        }
        elseif (($now >= $golden_evening_start_time) && ($now < $golden_evening_end_time))
        {
            return Theme::GOLDEN;
        }
        elseif (($now >= $golden_evening_end_time) && ($now < $twilight_evening_end_time))
        {
            return Theme::TWILIGHT;
        }
        else
        {
            return Theme::NIGHT;
        }
    }

    public static function auto($day = 'light', $golden = 'golden', $twilight = 'twilight', $night = 'dark')
    {
        switch (Theme::$daytime)
        {
            case Theme::DAY:
                return $day;
            case Theme::GOLDEN:
                return $golden;
            case Theme::TWILIGHT:
                return $twilight;
            case Theme::NIGHT:
                return $night;
        }
    }

}

Klasa wykorzystuje dodatkową funkcję w klasie Date do obliczania godziny wschodu i zachodu słońca na bazie funkcji date_sun_info. Domyślna wartość $timestamp = NULL oznacza aktualną datę i godzinę pobraną funkcją time() jako UNIX Timestamp a domyśle wartości $latitude oraz $longitude dotyczą Warszawy.

Rozszerzenie klasy Date do obliczania wschodu i zachodu słońca

<?php

defined('SYSPATH') OR die('No direct script access.');

class Date extends Kohana_Date
{

    public static function suninfo($timestamp = NULL, $latitude = 52.2297, $longitude = 21.0122)
    {
        if ($timestamp === NULL)
        {
            $timestamp = time();
        }

        return date_sun_info($timestamp, $latitude, $longitude);
    }

}

Modyfikacja bootstrap.php

W pliku bootstrap.php w projekcie na frameworku Koseven użyłem kodu podstawiającego do Theme::$daytime wartość aktualnej pory dnia obliczonej fukncją daytime().

//...tutaj różne ustawienia w bootstrap.php

Theme::$daytime = Theme::daytime();

Przykładowy kod html

Teraz można użyć tak przygotowanej funkcji w dowolnym widoku renderowanym przez clasę View w Koseven. Oto przykładowy kod.

<!DOCTYPE html>
<html lang="en" data-bs-theme="<?= Theme::auto() ?>">
    <head>
        <title>Bootstrap 5.3 Auto Theme</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="bootstrap_extra.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="p-5 text-center">
            <h2>Example Bootstrap Page</h2>
            <p>Some Bootstrap buttons:</p>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-secondary">Secondary</button>
        </div>
        <div class="container p-5">
            <div class="row">
                <div class="col-sm-4">
                    <h3>Column 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-4">
                    <h3>Column 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-4">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
            </div>
        </div>
    </body>
</html>

Użyłem dodatkowego css bootstrap extra do realizacji pośrednich motywów golden i twilight http://www.dariuszrorat.ugu.pl/assets/css/bootstrap/extra.css

Jak działa klasa Theme?

Wartości pory dnia są obliczane funkcją Theme::daytime() i są ustalane na wartości: Theme::DAY, THEME::GOLDEN, Theme::TWILIGHT i Theme::NIGHT. Fotograficzna niebieska i złota godzina są obliczane na bazie wschodu i zachodu słońca. Niebieska godzina jest obliczana przez funkcję date_sun_info. Złota godzina domyślnie zaczyna się o wschodzie słońca i kończy 60 min po nim albo zaczyna na 60 min przed zachodem słońca i kończy o zachodzie słońca.

Kiedy dziś wschodzi i zachodzi słońce?

Wartości w poniższej tabeli dotyczą współrzędnych geograficznych długość 21.0122 i szerokość 52.2297.

Kiedy jest dziś złota i niebieska godzina?

Przykładowe widoki z tymi motywami

Motyw light (obecnie załadowany)

Motyw golden

Motyw twilight

Motyw dark