return function () {
$common = common();
$current = $common->bs_current_theme();
$intro = '<p class="docs-demo-intro">The theme switcher of the framework, <code>common()->bs_theme_changer()</code> (the same dropdown
as in the navbar): it stores the choice in the <code>yf_theme</code> cookie and reloads; <code>common()->bs_current_theme()</code>
accepts only the names of <code>bs_get_avail_themes()</code>, so a forged cookie falls back to the default. The themes are built
by the framework (<code>make themes</code>): stock Bootstrap, <b>slate</b> and <b>cyborg</b>, for Bootstrap 3 and 5.
Current theme: <b>' . _prepare_html($current, 0) . '</b>; available: ' . _prepare_html(implode(', ', $common->bs_get_avail_themes()), 0) . '.</p>';
$switcher = '<nav class="navbar navbar-default navbar-expand bg-body-tertiary docs-demo-theme-nav"><div class="container-fluid">'
. '<span class="navbar-brand">Pick a theme</span>'
. '<ul class="nav navbar-nav navbar-nav">' . $common->bs_theme_changer() . '</ul></div></nav>';
$buttons = '';
foreach (['default' => 'Default', 'primary' => 'Primary', 'success' => 'Success', 'info' => 'Info', 'warning' => 'Warning', 'danger' => 'Danger'] as $class => $label) {
$buttons .= '<button type="button" class="btn btn-' . $class . '">' . $label . '</button> ';
}
$preview = '<h4>Components in this theme</h4>'
. '<p>' . $buttons . '</p>'
. '<div class="alert alert-info">An info alert with <a href="#" class="alert-link">a link</a>.</div>'
. '<p><span class="label label-primary badge text-bg-primary">label</span> <span class="label label-success badge text-bg-success">success</span> '
. '<span class="label label-danger badge text-bg-danger">danger</span> <a href="#">A plain link</a></p>'
. '<div class="row"><div class="col-sm-6 col-md-6">'
. '<table class="table table-striped table-bordered table-condensed table-sm"><thead><tr><th>Theme</th><th>Base</th></tr></thead><tbody>'
. '<tr><td>bootstrap</td><td>stock Bootstrap</td></tr><tr><td>slate</td><td>dark grey (Bootswatch port)</td></tr><tr><td>cyborg</td><td>black (Bootswatch port)</td></tr></tbody></table>'
. '</div><div class="col-sm-6 col-md-6">'
. '<div class="form-group mb-2"><input class="form-control" placeholder="A text input"></div>'
. '<div class="progress"><div class="progress-bar" role="progressbar" style="width:60%">60%</div></div>'
. '<ul class="pagination"><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li></ul>'
. '</div></div>';
css('.docs-demo-theme-nav { margin-bottom:15px; } .docs-demo-theme-nav .navbar-nav { flex-direction:row; }');
return $intro . $switcher . $preview;
};