native dark theme initial checkin

3 files changed, 131 insertions, 77 deletions

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 . '"';
 }