From 9dc949b62c6b5e3c8872211f71b11714d9d22b22 Mon Sep 17 00:00:00 2001 From: Mario Date: Fri, 20 Jan 2023 11:05:15 +0000 Subject: native dark theme initial checkin --- view/theme/redbasic/css/style.css | 223 ++++++++++++----------------- view/theme/redbasic/js/redbasic.js | 27 ++++ view/theme/redbasic/php/config.php | 78 ++++++---- view/theme/redbasic/php/style.php | 111 ++++++++------ view/theme/redbasic/php/theme.php | 19 ++- view/theme/redbasic/schema/Focus-Boxy.css | 10 +- view/theme/redbasic/schema/Focus-Light.css | 9 +- view/theme/redbasic/schema/dark.css | 51 ------- view/theme/redbasic/schema/dark.php | 43 ------ view/theme/redbasic/tpl/theme_settings.tpl | 33 ++--- 10 files changed, 277 insertions(+), 327 deletions(-) delete mode 100644 view/theme/redbasic/schema/dark.css delete mode 100644 view/theme/redbasic/schema/dark.php (limited to 'view/theme') diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 9069500d9..ce791720c 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -6,14 +6,33 @@ */ -/* bootstrap variable */ +/* bootstrap variables */ :root { --bs-border-radius: $radius; - --bs-link-color: $link_colour; - --bs-link-hover-color: $link_hover_colour; - --bs-body-bg: $bgcolour; - --bs-highlight-bg: yellow; + --bs-highlight-bg: var(--bs-warning); +} + +[data-bs-theme=light] { + --bs-link-color: $link_color; + --bs-link-hover-color: $link_hover_color; + --hz-body-bg: $bgcolor; + --hz-body-bg-image: url('$background_image'); +} + +[data-bs-theme=dark] { + --bs-link-color: $link_color_dark; + --bs-link-hover-color: $link_hover_color_dark; + --hz-body-bg: $bgcolor_dark; + --hz-body-bg-image: url('$background_image_dark'); +} + +[data-bs-theme=light] .navbar-dark.bg-dark { + background-color: $nav_bg !important; +} + +[data-bs-theme=dark] .navbar-dark.bg-dark { + background-color: $nav_bg_dark !important; } .nav-tabs { @@ -41,12 +60,12 @@ html { body { font-size: 0.9rem; - background-color: var(--bs-body-bg); - background-image: url('$background_image'); + background-color: var(--hz-body-bg); + background-image: var(--hz-body-bg-image); background-attachment: fixed; background-size: cover; - color: $font_colour; - margin: 0px; + color: var(--bs-body-color); + margin: 0; } aside#region_1 { @@ -108,7 +127,6 @@ h6, .h6 { } #banner { - color: $banner_colour; font-weight: bold; white-space: nowrap; overflow: hidden; @@ -154,8 +172,8 @@ input, optgroup, select, textarea { input[type=text], textarea { resize: vertical; - background-color: $comment_item_colour; - color: $font_colour; + background-color: var(--bs-body-bg); + color: var(--bs-body-color); } .selected-doco-nav { @@ -176,11 +194,6 @@ input[type=text], textarea { color: #FF0000; } -nav { - opacity: $nav_float_min_opacity; - filter:alpha(opacity=$nav_percent_min_opacity); -} - #powered-by { font-size: 0.5rem; position: absolute; @@ -217,7 +230,7 @@ nav { left: 0px; width: 100%; max-height: 50%; - background: $comment_item_colour; + background: var(--bs-body-bg); padding: 1rem; border-bottom: #e0e0e0 1px solid; overflow: auto; @@ -243,7 +256,6 @@ nav { } .contextual-help-tool i { - color: $font_colour; font-size: 1.05rem; } @@ -279,10 +291,10 @@ nav { -moz-animation: rotation 1s infinite linear; -o-animation: rotation 1s infinite linear; animation: rotation 1s infinite linear; - border-left: .2rem solid rgba(77, 77, 77, .15); - border-right: .2rem solid rgba(77, 77, 77, .15); - border-bottom: .2rem solid rgba(77, 77, 77, .15); - border-top: .2rem solid rgba(77, 77, 77, .5); + border-left: .2rem solid var(--bs-border-color); + border-right: .2rem solid var(--bs-border-color); + border-bottom: .2rem solid var(--bs-border-color); + border-top: .2rem solid var(--bs-tertiary-color); border-radius: 100%; } @@ -410,7 +422,7 @@ footer { } .vcard-card { - background-color: rgba(254,254,254,0.5); + background-color: rgba(var(--bs-body-bg-rgb), .7); } .vcard { @@ -465,7 +477,7 @@ footer { .pager-prev, .pager-next, .pager_n { - border: 1px solid #e0e0e0; + border: 1px solid var(--bs-border-color); background: transparent; padding: 4px; } @@ -479,7 +491,6 @@ footer { .photo, .contact-block-img { border-radius: $radius; - box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; } #side-bar-photos-albums { @@ -493,7 +504,6 @@ footer { .profile-match-photo img, .directory-photo-img { border-radius: $radius; - box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; } .profile-match-photo img { @@ -502,7 +512,7 @@ footer { } #photo-view-wrapper { - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); } .pmenu.horizontal { @@ -573,10 +583,6 @@ footer { margin-left: 15px; } -.wall-item-conv { - background-color: $comment_item_colour; -} - #nav-notifications-template, #nav-notifications-forums-template { display: none; @@ -631,7 +637,7 @@ nav .acpopup { #cboxContent { padding: 3px; - border: 0px solid #fff; + border: 0px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: #fff; z-index: 1052; @@ -682,7 +688,7 @@ nav .acpopup { padding: 10px; height: 250px; overflow: auto; - border: 1px solid #ddd; + border: 1px solid var(--bs-border-color); } #prof-separator { @@ -694,7 +700,7 @@ nav .acpopup { padding: 10px; height: 450px; overflow: auto; - border: 1px solid #ddd; + border: 1px solid var(--bs-border-color); } #prof-edit-desc { @@ -774,10 +780,6 @@ div.jGrowl div.jGrowl-notification { text-align: center; } -.conv-participants { - color: $font_colour; -} - .contactname { display: block; overflow: hidden; @@ -797,7 +799,6 @@ div.jGrowl div.jGrowl-notification { .notification.notification-forum { font-size: 0.9rem; - color: $font_colour; } #acl-search::-webkit-input-placeholder { @@ -920,20 +921,11 @@ margin-right: 50px; a .generic-icons { font-size: 1rem; margin-right: 0.5rem; - color: $font_colour; } .generic-icons-right { font-size: 1rem; margin-left: 0.5rem; - color: $font_colour; -} - -.generic-icons:hover, -a .generic-icons:hover, -.generic-icons-right:hover, -a .generic-icons-right:hover { - color: $font_colour; } .generic-icons-nav { @@ -949,7 +941,6 @@ a .generic-icons-right:hover { .drop-icons, a .drop-icons { font-size: 1rem; - color: $font_colour; text-decoration: none; cursor: pointer; } @@ -1018,8 +1009,8 @@ img.mail-conv-sender-photo { } #profile-jot-wrapper { - background-color: rgba(254, 254, 254, 1); - border: 1px solid rgba(0, 0, 0, .2); + background-color: var(--bs-body-bg); + border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } @@ -1079,19 +1070,19 @@ img.mail-conv-sender-photo { } .wall-item-content-wrapper { - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); border-top-right-radius: var(--bs-border-radius); border-top-left-radius: var(--bs-border-radius); } .wall-item-content-wrapper.comment { - background-color: $comment_item_colour; + background-color: var(--bs-body-bg); border-top-right-radius: 0px; border-top-left-radius: 0px; } .hide-comments-outer { - background-color: $comment_item_colour; + background-color: var(--bs-body-bg); border-top-color: #e0e0e0; border-style: solid; border-top-style: dashed; @@ -1106,15 +1097,15 @@ img.mail-conv-sender-photo { .wall-item-comment-wrapper { padding: 7px 10px; - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); border-radius: 0px; border-bottom-right-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); - border-top: 3px solid $comment_item_colour; + border-top: 3px solid var(--bs-body-bg); } .wall-item-comment-wrapper-wc { - border-top: 0px solid $comment_item_colour; + border-top: 0px solid var(--bs-body-bg); } @@ -1123,7 +1114,6 @@ img.mail-conv-sender-photo { height: $top_photo; border: none; border-radius: var(--bs-border-radius); - box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444; } .comment .wall-item-photo { @@ -1146,7 +1136,7 @@ img.mail-conv-sender-photo { .comment-edit-text { - border: 1px solid #e0e0e0; + border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } @@ -1161,13 +1151,13 @@ img.mail-conv-sender-photo { } .directory-item .divgrow-showmore { - background-color: $comment_item_colour; + background-color: var(--bs-body-bg); } /* widgets */ .widget { - background-color: rgba(254,254,254,.5); + background-color: rgba(var(--bs-body-bg-rgb), .7); border-radius: var(--bs-border-radius); } @@ -1186,7 +1176,7 @@ img.mail-conv-sender-photo { } #datebrowse-sidebar select { - border: 1px solid #e0e0e0; + border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } @@ -1215,7 +1205,7 @@ img.mail-conv-sender-photo { .chat-item-title, .chat-item-title-self { border-radius: var(--bs-border-radius); - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); } #chatMembers img { @@ -1271,17 +1261,17 @@ img.mail-conv-sender-photo { } .generic-content-wrapper { - border: 1px solid #e0e0e0; + border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); margin-bottom: 1.5rem; } .section-title-wrapper { padding: 7px 10px; - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); - border-bottom: 3px solid $comment_item_colour; + border-bottom: 3px solid var(--bs-body-bg); } .section-title-wrapper h2, @@ -1299,21 +1289,21 @@ img.mail-conv-sender-photo { .section-subtitle-wrapper { padding: 4px 10px; - background-color: $item_colour; - border-bottom: 3px solid $comment_item_colour; + background-color: var(--bs-tertiary-bg); + border-bottom: 3px solid var(--bs-body-bg); } .section-content-tools-wrapper { padding: 7px 10px; - background-color: $comment_item_colour; - border-bottom: 3px solid $comment_item_colour; + background-color: var(--bs-body-bg); + border-bottom: 3px solid var(--bs-body-bg); } .section-content-success-wrapper { padding: 21px 10px; color: #155724; background-color: #d4edda; - border-bottom: 3px solid $comment_item_colour; + border-bottom: 3px solid var(--bs-body-bg); text-align: center; } @@ -1321,7 +1311,7 @@ img.mail-conv-sender-photo { padding: 21px 10px; color: #0c5460; background-color: #d1ecf1; - border-bottom: 3px solid $comment_item_colour; + border-bottom: 3px solid var(--bs-body-bg); text-align: center; } @@ -1329,7 +1319,7 @@ img.mail-conv-sender-photo { padding: 21px 10px; color: #856404; background-color: #fff3cd; - border-bottom: 3px solid $comment_item_colour; + border-bottom: 3px solid var(--bs-body-bg); text-align: center; } @@ -1337,7 +1327,7 @@ img.mail-conv-sender-photo { padding: 21px 10px; color: #721c24; background-color: #f8d7da; - border-bottom: 3px solid $comment_item_colour; + border-bottom: 3px solid var(--bs-body-bg); text-align: center; } .section-content-tools-wrapper .section-content-success-wrapper, @@ -1356,14 +1346,14 @@ img.mail-conv-sender-photo { .section-content-wrapper { padding: 7px 10px; - background-color: $comment_item_colour; + background-color: var(--bs-body-bg); border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); word-wrap: break-word; } .section-content-wrapper-np { - background-color: $comment_item_colour; + background-color: var(--bs-body-bg); border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); word-wrap: break-word; @@ -1408,7 +1398,7 @@ main.fullscreen .section-content-wrapper-np { .locs-index-row:hover td, [id^="cloud-index-"]:hover td, .cloud-index-active { - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); } [id^="webpage-list-item-"]:hover td, @@ -1416,15 +1406,15 @@ main.fullscreen .section-content-wrapper-np { [id^="layout-list-item-"]:hover td, [id^="menu-list-item-"]:hover td, [id^="mitem-list-item-"]:hover td { - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); } #perms-tool-table .highlight:hover { - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); } .notify-seen { - background-color: $item_colour; + background-color: var(--bs-tertiary-bg); } /* bootstrap overrides */ @@ -1436,30 +1426,11 @@ main.fullscreen .section-content-wrapper-np { blockquote { font-size: 1rem; font-style: italic; - border-left: 3px solid #e0e0e0; + border-left: 3px solid var(--bs-border-color); padding: 1em 0px 1em 1.5em; margin: 0px; } -.dropdown-menu { - color: $font_colour; -} - -.dropdown-item { - color: $font_colour; -} - -.dropdown-item:active, -.dropdown-item:focus, -.dropdown-item:hover, -.textcomplete-item:focus .dropdown-item, -.textcomplete-item:hover .dropdown-item, -.textcomplete-item.active .dropdown-item, -.textcomplete-item:active .dropdown-item { - color: $font_colour; - background-color: $item_colour; -} - .textcomplete-dropdown { max-height: 300px; max-width: 250px; @@ -1471,25 +1442,11 @@ blockquote { background-color: #007bff; } -.bg-dark { - background-color: $nav_bg !important; -} - .navbar { z-index:1030; } -.navbar-dark .navbar-nav .nav-link, -.usermenu i { - color: $nav_icon_colour; -} -.navbar-dark .navbar-nav .nav-link:focus, -.navbar-dark .navbar-nav .nav-link:hover, -.usermenu:focus i, -.usermenu:hover i { - color: $nav_active_icon_colour; -} @media screen and (max-width: 992px) { @@ -1578,8 +1535,9 @@ dl.bb-dl > dd > li { display: inline-block; border-radius: var(--bs-border-radius); cursor: text; - padding: 0px 10px; - width: 100%; + border-radius: 0px; + background-color: var(--bs-body-bg); + } .bootstrap-tagsinput .label { @@ -1588,6 +1546,12 @@ dl.bb-dl > dd > li { .bootstrap-tagsinput input { height: 2.5rem; + margin: 0; + max-width: 30%; +} + +.bootstrap-tagsinput { + padding: 0 .5rem; } /* Abusing theme-green is less work than makeing a new new one */ @@ -1610,27 +1574,22 @@ dl.bb-dl > dd > li { .onoffswitch.checkbox > div label { display: block; overflow: hidden; cursor: pointer; - border: 1px solid #e0e0e0; + border: 1px solid var(--bs-border-color); border-radius: 12px; margin:0px; - -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; font-weight: normal; } .onoffswitch.checkbox:hover label { - color: var(--bs-link-color); + color: var(--bs-primary); } .onoffswitch.checkbox:hover > div label { - border-color: var(--bs-link-color); + border-color: var(--bs-primary); } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; - -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; - -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { @@ -1641,25 +1600,23 @@ dl.bb-dl > dd > li { .onoffswitch-inner:before { content: attr(data-on); padding-right: 21px; - background-color: $item_colour; - color: $font_colour; + background-color: rgba(var(--bs-body-color-rgb), 0); text-align: right; } .onoffswitch-inner:after { content: attr(data-off); padding-left: 21px; - background-color: $item_colour; color: #e0e0e0; + background-color: rgba(var(--bs-body-color-rgb), 0); + color: var(--bs-border-color); text-align: left; } .onoffswitch-switch { display: block; width: 15px; margin:4px; - background: #e0e0e0; + background: var(--bs-secondary-bg); border-radius: 10px; position: absolute; top: 0; bottom: 0; right: 36px; - -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; - -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner { @@ -1668,7 +1625,7 @@ dl.bb-dl > dd > li { .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch { right: 0px; - background-color: var(--bs-link-color); + background-color: var(--bs-primary); } @@ -1747,7 +1704,7 @@ dl.bb-dl > dd > li { .cloud-icon-container { width: 64px; height: 64px; - border: 1px solid #eee; + border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 04469cb85..7584f9421 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -2,6 +2,19 @@ * redbasic theme specific JavaScript */ +let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode'); + +if (redbasic_dark_mode == 1) { + $('html').attr('data-bs-theme', 'light'); + $('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o'); +} + + +if (redbasic_dark_mode == 2) { + $('html').attr('data-bs-theme', 'dark'); + $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o'); +} + $(document).ready(function() { // CSS3 calc() fallback (for unsupported browsers) @@ -40,6 +53,20 @@ $(document).ready(function() { } }); + $('#theme-switch').click(function() { + if ($('html').attr('data-bs-theme') === 'dark') { + $('html').attr('data-bs-theme', 'light'); + localStorage.setItem('redbasic_dark_mode', 1); + $('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o'); + } + else { + $('html').attr('data-bs-theme', 'dark'); + localStorage.setItem('redbasic_dark_mode', 2); + $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o'); + } + }); + + $('#menu-btn').click(function() { if($('#navbar-collapse-1').hasClass('show')){ $('#navbar-collapse-1').removeClass('show'); diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php index 65834526d..96b9354ed 100644 --- a/view/theme/redbasic/php/config.php +++ b/view/theme/redbasic/php/config.php @@ -37,21 +37,27 @@ class RedbasicConfig { } $arr = array(); + $arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode'); $arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' ); $arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' ); - $arr['nav_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_icon_colour' ); - $arr['nav_active_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_active_icon_colour' ); - $arr['link_colour'] = get_pconfig(local_channel(),'redbasic', 'link_colour' ); - $arr['link_hover_colour'] = get_pconfig(local_channel(),'redbasic', 'link_hover_colour' ); - $arr['banner_colour'] = get_pconfig(local_channel(),'redbasic', 'banner_colour' ); - $arr['bgcolour'] = get_pconfig(local_channel(),'redbasic', 'background_colour' ); + $arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' ); +// $arr['nav_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_icon_colour' ); +// $arr['nav_active_icon_colour'] = get_pconfig(local_channel(),'redbasic', 'nav_active_icon_colour' ); + $arr['link_color'] = get_pconfig(local_channel(),'redbasic', 'link_color' ); + $arr['link_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_color_dark' ); + $arr['link_hover_color'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color' ); + $arr['link_hover_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color_dark' ); +// $arr['banner_color'] = get_pconfig(local_channel(),'redbasic', 'banner_color' ); + $arr['bgcolor'] = get_pconfig(local_channel(),'redbasic', 'background_color' ); + $arr['bgcolor_dark'] = get_pconfig(local_channel(),'redbasic', 'background_color_dark' ); $arr['background_image'] = get_pconfig(local_channel(),'redbasic', 'background_image' ); - $arr['item_colour'] = get_pconfig(local_channel(),'redbasic', 'item_colour' ); - $arr['comment_item_colour'] = get_pconfig(local_channel(),'redbasic', 'comment_item_colour' ); + $arr['background_image_dark'] = get_pconfig(local_channel(),'redbasic', 'background_image_dark' ); +// $arr['item_color'] = get_pconfig(local_channel(),'redbasic', 'item_color' ); +// $arr['comment_item_color'] = get_pconfig(local_channel(),'redbasic', 'comment_item_color' ); $arr['font_size'] = get_pconfig(local_channel(),'redbasic', 'font_size' ); - $arr['font_colour'] = get_pconfig(local_channel(),'redbasic', 'font_colour' ); +// $arr['font_colour'] = get_pconfig(local_channel(),'redbasic', 'font_colour' ); $arr['radius'] = get_pconfig(local_channel(),'redbasic', 'radius' ); - $arr['shadow'] = get_pconfig(local_channel(),'redbasic', 'photo_shadow' ); +// $arr['shadow'] = get_pconfig(local_channel(),'redbasic', 'photo_shadow' ); $arr['converse_width']=get_pconfig(local_channel(),"redbasic","converse_width"); $arr['top_photo']=get_pconfig(local_channel(),"redbasic","top_photo"); $arr['reply_photo']=get_pconfig(local_channel(),"redbasic","reply_photo"); @@ -66,20 +72,26 @@ class RedbasicConfig { if (isset($_POST['redbasic-settings-submit'])) { set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']); + set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']); set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']); - set_pconfig(local_channel(), 'redbasic', 'nav_icon_colour', $_POST['redbasic_nav_icon_colour']); - set_pconfig(local_channel(), 'redbasic', 'nav_active_icon_colour', $_POST['redbasic_nav_active_icon_colour']); - set_pconfig(local_channel(), 'redbasic', 'link_colour', $_POST['redbasic_link_colour']); - set_pconfig(local_channel(), 'redbasic', 'link_hover_colour', $_POST['redbasic_link_hover_colour']); - set_pconfig(local_channel(), 'redbasic', 'background_colour', $_POST['redbasic_background_colour']); - set_pconfig(local_channel(), 'redbasic', 'banner_colour', $_POST['redbasic_banner_colour']); + set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']); +// set_pconfig(local_channel(), 'redbasic', 'nav_icon_color', $_POST['redbasic_nav_icon_color']); +// set_pconfig(local_channel(), 'redbasic', 'nav_active_icon_color', $_POST['redbasic_nav_active_icon_color']); + set_pconfig(local_channel(), 'redbasic', 'link_color', $_POST['redbasic_link_color']); + set_pconfig(local_channel(), 'redbasic', 'link_color_dark', $_POST['redbasic_link_color_dark']); + set_pconfig(local_channel(), 'redbasic', 'link_hover_color', $_POST['redbasic_link_hover_color']); + set_pconfig(local_channel(), 'redbasic', 'link_hover_color_dark', $_POST['redbasic_link_hover_color_dark']); + set_pconfig(local_channel(), 'redbasic', 'background_color', $_POST['redbasic_background_color']); + set_pconfig(local_channel(), 'redbasic', 'background_color_dark', $_POST['redbasic_background_color_dark']); +// set_pconfig(local_channel(), 'redbasic', 'banner_color', $_POST['redbasic_banner_color']); set_pconfig(local_channel(), 'redbasic', 'background_image', $_POST['redbasic_background_image']); - set_pconfig(local_channel(), 'redbasic', 'item_colour', $_POST['redbasic_item_colour']); - set_pconfig(local_channel(), 'redbasic', 'comment_item_colour', $_POST['redbasic_comment_item_colour']); + set_pconfig(local_channel(), 'redbasic', 'background_image_dark', $_POST['redbasic_background_image_dark']); +// set_pconfig(local_channel(), 'redbasic', 'item_color', $_POST['redbasic_item_color']); +// set_pconfig(local_channel(), 'redbasic', 'comment_item_color', $_POST['redbasic_comment_item_color']); set_pconfig(local_channel(), 'redbasic', 'font_size', $_POST['redbasic_font_size']); - set_pconfig(local_channel(), 'redbasic', 'font_colour', $_POST['redbasic_font_colour']); +// set_pconfig(local_channel(), 'redbasic', 'font_color', $_POST['redbasic_font_color']); set_pconfig(local_channel(), 'redbasic', 'radius', $_POST['redbasic_radius']); - set_pconfig(local_channel(), 'redbasic', 'photo_shadow', $_POST['redbasic_shadow']); +// set_pconfig(local_channel(), 'redbasic', 'photo_shadow', $_POST['redbasic_shadow']); set_pconfig(local_channel(), 'redbasic', 'converse_width', $_POST['redbasic_converse_width']); set_pconfig(local_channel(), 'redbasic', 'top_photo', $_POST['redbasic_top_photo']); set_pconfig(local_channel(), 'redbasic', 'reply_photo', $_POST['redbasic_reply_photo']); @@ -100,21 +112,27 @@ class RedbasicConfig { '$theme' => \App::$channel['channel_theme'], '$expert' => $expert, '$title' => t("Theme settings"), + '$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))), '$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))), '$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']), - '$nav_icon_colour' => array('redbasic_nav_icon_colour', t('Navigation bar icon color '), $arr['nav_icon_colour']), - '$nav_active_icon_colour' => array('redbasic_nav_active_icon_colour', t('Navigation bar active icon color '), $arr['nav_active_icon_colour']), - '$link_colour' => array('redbasic_link_colour', t('Link color'), $arr['link_colour']), - '$link_hover_colour' => array('redbasic_link_hover_colour', t('Link hover color'), $arr['link_hover_colour']), - '$banner_colour' => array('redbasic_banner_colour', t('Set font-color for banner'), $arr['banner_colour']), - '$bgcolour' => array('redbasic_background_colour', t('Set the background color'), $arr['bgcolour']), + '$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']), +// '$nav_icon_colour' => array('redbasic_nav_icon_color', t('Navigation bar icon color '), $arr['nav_icon_color']), +// '$nav_active_icon_colour' => array('redbasic_nav_active_icon_color', t('Navigation bar active icon color '), $arr['nav_active_icon_color']), + '$link_color' => array('redbasic_link_color', t('Link color'), $arr['link_color']), + '$link_color_dark' => array('redbasic_link_color_dark', t('Dark link color'), $arr['link_color_dark']), + '$link_hover_color' => array('redbasic_link_hover_color', t('Link hover color'), $arr['link_hover_color']), + '$link_hover_color_dark' => array('redbasic_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']), +// '$banner_color' => array('redbasic_banner_color', t('Set font-color for banner'), $arr['banner_colour']), + '$bgcolor' => array('redbasic_background_color', t('Set the background color'), $arr['bgcolor']), + '$bgcolor_dark' => array('redbasic_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']), '$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']), - '$item_colour' => array('redbasic_item_colour', t('Set the background color of items'), $arr['item_colour']), - '$comment_item_colour' => array('redbasic_comment_item_colour', t('Set the background color of comments'), $arr['comment_item_colour']), + '$background_image_dark' => array('redbasic_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']), +// '$item_color' => array('redbasic_item_color', t('Set the background color of items'), $arr['item_color']), +// '$comment_item_color' => array('redbasic_comment_item_color', t('Set the background color of comments'), $arr['comment_item_color']), '$font_size' => array('redbasic_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')), - '$font_colour' => array('redbasic_font_colour', t('Set font-color for posts and comments'), $arr['font_colour']), +// '$font_colour' => array('redbasic_font_color', t('Set font-color for posts and comments'), $arr['font_color']), '$radius' => array('redbasic_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')), - '$shadow' => array('redbasic_shadow', t('Set shadow depth of photos'), $arr['shadow']), +// '$shadow' => array('redbasic_shadow', t('Set shadow depth of photos'), $arr['shadow']), '$converse_width' => array('redbasic_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')), '$top_photo' => array('redbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']), '$reply_photo' => array('redbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']), diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php index 667377838..8485d4dfe 100644 --- a/view/theme/redbasic/php/style.php +++ b/view/theme/redbasic/php/style.php @@ -11,22 +11,19 @@ if(! App::$install) { // Load the owners pconfig $nav_bg = get_pconfig($uid, 'redbasic', 'nav_bg'); - $nav_icon_colour = get_pconfig($uid, 'redbasic', 'nav_icon_colour'); - $nav_active_icon_colour = get_pconfig($uid, 'redbasic', 'nav_active_icon_colour'); - $banner_colour = get_pconfig($uid,'redbasic','banner_colour'); + $nav_bg_dark = get_pconfig($uid, 'redbasic', 'nav_bg_dark'); $narrow_navbar = get_pconfig($uid,'redbasic','narrow_navbar'); - $link_colour = get_pconfig($uid, 'redbasic', 'link_colour'); - $link_hover_colour = get_pconfig($uid, 'redbasic', 'link_hover_colour'); + $link_color = get_pconfig($uid, 'redbasic', 'link_color'); + $link_color_dark = get_pconfig($uid, 'redbasic', 'link_color_dark'); + $link_hover_color = get_pconfig($uid, 'redbasic', 'link_hover_color'); + $link_hover_color_dark = get_pconfig($uid, 'redbasic', 'link_hover_color_dark'); + $bgcolor = get_pconfig($uid, 'redbasic', 'background_color'); + $bgcolor_dark = get_pconfig($uid, 'redbasic', 'background_color_dark'); $schema = get_pconfig($uid,'redbasic','schema'); - $bgcolour = get_pconfig($uid, 'redbasic', 'background_colour'); $background_image = get_pconfig($uid, 'redbasic', 'background_image'); - $item_colour = get_pconfig($uid, 'redbasic', 'item_colour'); - $comment_item_colour = get_pconfig($uid, 'redbasic', 'comment_item_colour'); - $item_opacity = get_pconfig($uid, 'redbasic', 'item_opacity'); + $background_image_dark = get_pconfig($uid, 'redbasic', 'background_image_dark'); $font_size = get_pconfig($uid, 'redbasic', 'font_size'); - $font_colour = get_pconfig($uid, 'redbasic', 'font_colour'); $radius = get_pconfig($uid, 'redbasic', 'radius'); - $shadow = get_pconfig($uid,'redbasic','photo_shadow'); $converse_width=get_pconfig($uid,'redbasic','converse_width'); $top_photo=get_pconfig($uid,'redbasic','top_photo'); $reply_photo=get_pconfig($uid,'redbasic','reply_photo'); @@ -75,39 +72,59 @@ if ((!$schema) || ($schema == '---')) { //Set some defaults - we have to do this after pulling owner settings, and we have to check for each setting //individually. If we don't, we'll have problems if a user has set one, but not all options. if (! $nav_bg) - $nav_bg = '#343a40'; -if (! $nav_icon_colour) - $nav_icon_colour = 'rgba(255, 255, 255, 0.55)'; -if (! $nav_active_icon_colour) - $nav_active_icon_colour = 'rgba(255, 255, 255, 0.75)'; -if (! $link_colour) - $link_colour = '#0d6efd'; -if (! $link_hover_colour) - $link_hover_colour = '#0a58ca;'; -if (! $banner_colour) - $banner_colour = '#efefef'; -if (! $bgcolour) - $bgcolour = 'rgb(254,254,254)'; + $nav_bg = 'rgba(33, 37, 41, 1)'; + +if (! $nav_bg_dark) + $nav_bg_dark = 'rgba(0, 0, 0, 1)'; + +if (! $link_color) + $link_color = '#0d6efd'; + +if (! $link_color_dark) + $link_color_dark = '#6ea8fe'; + +if (! $link_hover_color) + $link_hover_color = '#0a58ca'; + +if (! $link_hover_color_dark) + $link_hover_color_dark = '#9ec5fe'; + +if (! $bgcolor) + $bgcolor = '#fff'; + +if (! $bgcolor_dark) + $bgcolor_dark = '#212529'; + if (! $background_image) - $background_image =''; -if (! $item_colour) - $item_colour = '#f6f6f6'; -if (! $comment_item_colour) - $comment_item_colour = 'rgb(255,255,255)'; -if (! $item_opacity) - $item_opacity = '1'; + $background_image = ''; + +if (! $background_image_dark) + $background_image_dark = ''; + +if (! $item_color) + $item_color = '#fff'; + +if (! $item_color_dark) + $item_color_dark = '#212529'; + +if (! $header_item_color) + $header_item_color = '#f8f9fa'; + +if (! $header_item_color_dark) + $header_item_color_dark = '#212529'; + if (! $font_size) $font_size = '0.875rem'; -if (! $font_colour) - $font_colour = '#4d4d4d'; + if (! $radius) $radius = '0.375rem'; -if (! $shadow) - $shadow = '0'; + if (! $converse_width) $converse_width = '52'; //unit: rem + if(! $top_photo) $top_photo = '2.3rem'; + if(! $reply_photo) $reply_photo = '2.3rem'; @@ -138,19 +155,21 @@ if(file_exists('view/theme/redbasic/css/style.css')) { $options = array ( '$nav_bg' => $nav_bg, - '$nav_icon_colour' => $nav_icon_colour, - '$nav_active_icon_colour' => $nav_active_icon_colour, - '$link_colour' => $link_colour, - '$link_hover_colour' => $link_hover_colour, - '$banner_colour' => $banner_colour, - '$bgcolour' => $bgcolour, + '$nav_bg_dark' => $nav_bg_dark, + '$link_color' => $link_color, + '$link_color_dark' => $link_color_dark, + '$link_hover_color' => $link_hover_color, + '$link_hover_color_dark' => $link_hover_color_dark, + '$bgcolor' => $bgcolor, + '$bgcolor_dark' => $bgcolor_dark, '$background_image' => $background_image, - '$item_colour' => $item_colour, - '$comment_item_colour' => $comment_item_colour, + '$background_image_dark' => $background_image_dark, + '$item_color' => $item_color, + '$item_color_dark' => $item_color_dark, + '$header_item_color' => $header_item_color, + '$header_item_color_dark' => $header_item_color_dark, '$font_size' => $font_size, - '$font_colour' => $font_colour, '$radius' => $radius, - '$shadow' => $shadow, '$converse_width' => $converse_width, '$top_photo' => $top_photo, '$reply_photo' => $reply_photo, @@ -159,7 +178,7 @@ if(file_exists('view/theme/redbasic/css/style.css')) { '$right_aside_width' => $right_aside_width ); - echo str_replace(array_keys($options), array_values($options), $x); + echo strtr($x, $options); } diff --git a/view/theme/redbasic/php/theme.php b/view/theme/redbasic/php/theme.php index fefd7d26c..5803198fd 100644 --- a/view/theme/redbasic/php/theme.php +++ b/view/theme/redbasic/php/theme.php @@ -9,10 +9,27 @@ * * Author: Fabrixxm * * Maintainer: Mike Macgirvin * * Maintainer: Mario Vavti - * * Theme_Color: #343a40 + * * Theme_Color: #212529 * * Background_Color: rgb(254,254,254) */ +use App; + function redbasic_init(&$a) { + $mode = ''; + + if (local_channel()) { + $mode = ((get_pconfig(local_channel(), 'redbasic', 'dark_mode')) ? 'dark' : 'light'); + } + + if (App::$profile_uid) { + $mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'dark_mode')) ? 'dark' : 'light'); + } + + if (!$mode) { + $mode = ((get_config('redbasic', 'dark_mode')) ? 'dark' : 'light'); + } + + App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"'; } diff --git a/view/theme/redbasic/schema/Focus-Boxy.css b/view/theme/redbasic/schema/Focus-Boxy.css index 1b09137a9..e9fa0381d 100644 --- a/view/theme/redbasic/schema/Focus-Boxy.css +++ b/view/theme/redbasic/schema/Focus-Boxy.css @@ -2,8 +2,8 @@ padding-left: 3rem; } -.wall-item-content-wrapper { - border-bottom: 1px solid rgba(0,0,0,.125); +.wall-item-content-wrapper.comment { + border-bottom: 1px solid var(--bs-border-color); } .hide-comments-outer, @@ -12,7 +12,7 @@ } .widget { - border: 1px solid rgba(0,0,0,.125); + border: 1px solid var(--bs-border-color); } #note-text { @@ -20,7 +20,7 @@ } .vcard-card { - border: 1px solid rgba(0,0,0,.125); + border: 1px solid var(--bs-border-color); border-bottom: 0; } @@ -31,7 +31,7 @@ } .vcard-card .vcard { - border: 1px solid rgba(0,0,0,.125); + border: 1px solid var(--bs-border-color); border-top: 0; border-right: 0; border-left: 0; diff --git a/view/theme/redbasic/schema/Focus-Light.css b/view/theme/redbasic/schema/Focus-Light.css index 7289acffe..bc5da2a1d 100644 --- a/view/theme/redbasic/schema/Focus-Light.css +++ b/view/theme/redbasic/schema/Focus-Light.css @@ -1,5 +1,10 @@ .dropdown-header.text-white-50, .navbar-dark .navbar-toggler, -.navbar-dark .nav-link.active { - color: rgba(0,0,0,0.7) !important; +.navbar-dark .nav-link:active, .navbar-dark .nav-link.active, +.navbar-dark .navbar-text, .navbar-dark .nav-link, .navbar-dark .nav-link:hover { + color: var(--bs-secondary) !important; +} + +.navbar-dark.bg-dark { + background-color: var(--bs-tertiary-bg) !important; } diff --git a/view/theme/redbasic/schema/dark.css b/view/theme/redbasic/schema/dark.css deleted file mode 100644 index bc1a84ec8..000000000 --- a/view/theme/redbasic/schema/dark.css +++ /dev/null @@ -1,51 +0,0 @@ - -:root { - color-scheme: dark; - --bs-dark-rgb: #e1e1e1; - --bs-border-color: rgba(250, 250, 250, 0.125); - --bs-body-bg: #111; -} - -.widget, -.vcard-card { - background-color: unset; -} - -.comment-edit-text { - border: 1px solid var(--bs-border-color); -} - -.generic-content-wrapper { - border: 1px solid var(--bs-border-color); -} - -#profile-jot-wrapper { - background-color: unset; - border: 1px solid var(--bs-border-color); -} - -.bootstrap-tagsinput { - background-color: unset; -} - -a, -.fakelink { - color: var(--bs-link-color); -} -.item-category { - background-color: #293a4f !important; -} -#cboxContent { - background-color: #273039; -} -#jot-title-wrap, -#jot-summary-wrap, -#jot-pagetitle-wrap, -#jot-category-wrap, -#jot-customjotheaders-wrap { - border-bottom: 1px solid var(--bs-border-color); -} -#adminpage table tr:hover { - background-color: #2E3136; -} - diff --git a/view/theme/redbasic/schema/dark.php b/view/theme/redbasic/schema/dark.php deleted file mode 100644 index cd9653a23..000000000 --- a/view/theme/redbasic/schema/dark.php +++ /dev/null @@ -1,43 +0,0 @@ -Light {{include file="field_colorinput.tpl" field=$nav_bg}} - {{include file="field_colorinput.tpl" field=$nav_icon_colour}} - {{include file="field_colorinput.tpl" field=$nav_active_icon_colour}} - {{include file="field_colorinput.tpl" field=$banner_colour}} - {{include file="field_colorinput.tpl" field=$bgcolour}} + {{include file="field_colorinput.tpl" field=$bgcolor}} {{include file="field_colorinput.tpl" field=$background_image}} - {{include file="field_colorinput.tpl" field=$item_colour}} - {{include file="field_colorinput.tpl" field=$comment_item_colour}} - {{*include file="field_colorinput.tpl" field=$comment_border_colour*}} - {{*include file="field_input.tpl" field=$comment_indent*}} - {{include file="field_colorinput.tpl" field=$font_colour}} - {{include file="field_colorinput.tpl" field=$link_colour}} - {{include file="field_colorinput.tpl" field=$link_hover_colour}} + {{include file="field_colorinput.tpl" field=$link_color}} + {{include file="field_colorinput.tpl" field=$link_hover_color}} + +

Dark

+ {{include file="field_colorinput.tpl" field=$nav_bg_dark}} + {{include file="field_colorinput.tpl" field=$bgcolor_dark}} + {{include file="field_colorinput.tpl" field=$background_image_dark}} + {{include file="field_colorinput.tpl" field=$link_color_dark}} + {{include file="field_colorinput.tpl" field=$link_hover_color_dark}} + +

Common

{{include file="field_input.tpl" field=$radius}} - {{include file="field_input.tpl" field=$shadow}} {{include file="field_input.tpl" field=$top_photo}} {{include file="field_input.tpl" field=$reply_photo}} {{/if}} -- cgit v1.2.3