use color scheme instead of autoDarkMode

src/components/container/ConnectFitbit/ConnectFitbit.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof ConnectFitbit>;
 
 const Template: ComponentStory<typeof ConnectFitbit> = (args: ConnectFitbitProps) =>
-	<Layout colorScheme="light">
+	<Layout colorScheme="auto">
 		<Card>
 			<ConnectFitbit {...args} />
 		</Card>

src/components/container/DeviceDataMonthChart/DeviceDataMonthChart.css

@@ -47,6 +47,10 @@
     font-size: 11px;
 }
 
+.mdhui-device-data-month-chart .recharts-cartesian-axis-tick-value {
+    fill: var(--mdhui-text-color-2);
+}
+
 .mdhui-device-data-month-chart .graph-tooltip {
     padding: 4px;
     font-size: 12px;

src/components/container/DeviceDataMonthChart/DeviceDataMonthChart.stories.tsx

@@ -14,7 +14,7 @@ export default {
 } as ComponentMeta<typeof DeviceDataMonthChart>;
 
 const Template: ComponentStory<typeof DeviceDataMonthChart> = (args: DeviceDataMonthChartProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<DeviceDataMonthChart {...args} />
 		</Card>

src/components/container/DeviceDataMonthCharts/DeviceDataMonthCharts.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof DeviceDataMonthCharts>;
 
 const Template: ComponentStory<typeof DeviceDataMonthCharts> = (args: DeviceDataMonthChartsProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card allowOverflow={true}>
 			<DeviceDataMonthCharts {...args} />
 		</Card>

src/components/container/ExternalAccountList/ExternalAccountList.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof ExternalAccountList>;
 
 const Template: ComponentStory<typeof ExternalAccountList> = (args: ExternalAccountListProps) =>
-    <Layout  colorScheme="light">
+    <Layout  colorScheme="auto">
         <ExternalAccountList {...args} />
     </Layout>;
 

src/components/container/ExternalAccountsPreview/ExternalAccountsPreview.css

@@ -5,4 +5,5 @@
     .mdhui-external-accounts-preview .external-account-title
     {
         font-size:.88em;
+        color:var(--mdhui-text-color-2);
     }

src/components/container/ExternalAccountsPreview/ExternalAccountsPreview.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof ExternalAccountsPreview>;
 
 const Template: ComponentStory<typeof ExternalAccountsPreview> = (args: ExternalAccountsPreviewProps) =>
-    <Layout  colorScheme="light">
+    <Layout  colorScheme="auto">
         <ExternalAccountsPreview {...args} />
     </Layout>;
 

src/components/container/FitbitDevices/FitbitDevices.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof FitbitDevices>;
 
 const Template: ComponentStory<typeof FitbitDevices> = (args: FitbitDevicesProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<FitbitDevices {...args} />
 		</Card>

src/components/container/FitbitMonthCharts/FitbitMonthCharts.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof FitbitMonthCharts>;
 
 const Template: ComponentStory<typeof FitbitMonthCharts> = (args: FitbitMonthChartsProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<FitbitMonthCharts {...args} />
 		</Card>

src/components/container/MostRecentNotification/MostRecentNotification.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof MostRecentNotification>;
 
 const Template: ComponentStory<typeof MostRecentNotification> = (args: MostRecentNotificationProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<MostRecentNotification {...args} />
 		</Card>

src/components/container/NotificationList/NotificationList.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof NotificationList>;
 
 const Template: ComponentStory<typeof NotificationList> = (args: NotificationListProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<NotificationList {...args} />
 	</Layout>;
 

src/components/container/ProviderSearch/ProviderSearch.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof ProviderSearch>;
 
 const Template: ComponentStory<typeof ProviderSearch> = (args: ProviderSearchProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<ProviderSearch {...args} />
 		</Card>

src/components/container/RestingHeartRateCalendar/RestingHeartRateCalendar.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof RestingHeartRateCalendar>;
 
 const Template: ComponentStory<typeof RestingHeartRateCalendar> = (args: RestingHeartRateCalendarProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<RestingHeartRateCalendar  {...args} />
 		</Card>

src/components/container/SurveyTaskList/SurveyTaskList.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof SurveyTaskList>;
 
 const Template: ComponentStory<typeof SurveyTaskList> = (args: SurveyTaskListProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<SurveyTaskList {...args} />
 	</Layout>;
 

src/components/presentational/Action/Action.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof Action>;
 
 const Template: ComponentStory<typeof Action> = (args: ActionProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Action {...args} />
 	</Layout>;
 

src/components/presentational/ActivityMeter/ActivityMeter.stories.tsx

@@ -18,7 +18,7 @@ export default {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof ActivityMeter> = (args: ActivityMeterProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<div style={{ padding: "16px" }}>
 				<ActivityMeter {...args} />

src/components/presentational/Button/Button.stories.tsx

@@ -14,7 +14,7 @@ export default {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof Button> = (args: ButtonProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Button {...args}>
 		</Button>
 	</Layout>;

src/components/presentational/Calendar/Calendar.stories.tsx

@@ -11,7 +11,7 @@ export default {
     }
 } as ComponentMeta<typeof Calendar>;
 
-const Template: ComponentStory<typeof Calendar> = (args: CalendarProps) => <Layout  colorScheme="light"><Calendar {...args} /></Layout>;
+const Template: ComponentStory<typeof Calendar> = (args: CalendarProps) => <Layout  colorScheme="auto"><Calendar {...args} /></Layout>;
 
 let plainCalendarDay = function (year: number, month: number, day? : number) {
     return (

src/components/presentational/Card/Card.stories.tsx

@@ -15,7 +15,7 @@ export default {
 } as ComponentMeta<typeof Action>;
 
 const Template: ComponentStory<typeof Action> = (args: ActionProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card className="card-story-primary">
 			<Action {...args} />
 		</Card>
@@ -28,7 +28,7 @@ CardAction.args = {
 };
 
 const CardTemplate: ComponentStory<typeof Card> = (args: CardProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card {...args}>
 			<CardTitle title="Card Title" />
 			<div style={{ padding: "16px" }}>Card Content</div>

src/components/presentational/CardTitle/CardTitle.stories.tsx

@@ -14,7 +14,7 @@ export default {
 } as ComponentMeta<typeof Action>;
 
 const Template: ComponentStory<typeof CardTitle> = (args: CardTitleProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Card>
 			<CardTitle {...args} />
 			<div style={{ padding: "16px" }}>Card Content</div>

src/components/presentational/DateRangeNavigator/DateRangeNavigator.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof DateRangeNavigator>;
 
 const Template: ComponentStory<typeof DateRangeNavigator> = (args: DateRangeNavigatorProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<DateRangeNavigator {...args} />
 	</Layout>;
 

src/components/presentational/DayTrackerSymbol/DayTrackerSymbol.stories.tsx

@@ -13,7 +13,7 @@ export default {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof DayTrackerSymbol> = (args:DayTrackerSymbolProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<DayTrackerSymbol {...args} />
 	</Layout>;
 

src/components/presentational/Face/Face.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof Face>;
 
 const Template: ComponentStory<typeof Face> = (args: FaceProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Face  {...args} />
 	</Layout>;
 

src/components/presentational/Face/Face.tsx

@@ -18,7 +18,7 @@ export interface FaceProps {
 export default function (props: FaceProps) {
 	let layoutContext = useContext(LayoutContext);
 	let imageStyle: React.CSSProperties = {};
-	if (layoutContext.darkMode && !props.selected) {
+	if (layoutContext.colorScheme == "dark" && !props.selected) {
 		imageStyle.filter = "invert(1)";
 	}
 

src/components/presentational/Histogram/Histogram.stories.tsx

@@ -11,7 +11,7 @@ export default {
     }
 } as ComponentMeta<typeof Histogram>;
 
-const Template: ComponentStory<typeof Histogram> = (args: HistogramProps) => <Layout  colorScheme="light"><Histogram {...args} /></Layout>;
+const Template: ComponentStory<typeof Histogram> = (args: HistogramProps) => <Layout  colorScheme="auto"><Histogram {...args} /></Layout>;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/presentational/Layout/Layout.tsx

@@ -13,7 +13,7 @@ export interface LayoutProps {
 	noGlobalStyles?: boolean;
 	colorScheme?: "light" | "dark" | "auto";
 	/**
- 	* @deprecated
+ 	* @deprecated 
  	*/
 	stylesheetPath?: string;
 }
@@ -44,10 +44,11 @@ export default function (props: LayoutProps) {
 	let colorScheme: "light" | "dark" = "light";
 	if (props.colorScheme === "auto" && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 		colorScheme = "dark";
-	} else if (props.colorScheme) {
-		colorScheme = props.colorScheme as "light" | "dark";
+	} else if (props.colorScheme === "dark" || props.colorScheme === "light") {
+		colorScheme = props.colorScheme;
 	}
-
+	console.log(props.colorScheme);
+	console.log(colorScheme);
 	let context: LayoutContext = { colorScheme: colorScheme, bodyBackgroundColor: props.bodyBackgroundColor || "var(--mdhui-background-color-1)" };
 
 	return (

src/components/presentational/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -11,6 +11,6 @@ export default {
     }
 } as ComponentMeta<typeof LoadingIndicator>;
 
-const Template: ComponentStory<typeof LoadingIndicator> = () => <Layout  colorScheme="light"> <LoadingIndicator/> </Layout>;
+const Template: ComponentStory<typeof LoadingIndicator> = () => <Layout  colorScheme="auto"> <LoadingIndicator/> </Layout>;
 
 export const Default = Template.bind({});

src/components/presentational/NavigationBar/NavigationBar.stories.tsx

@@ -14,7 +14,7 @@ export default {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof NavigationBar> = (args: NavigationBarProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<NavigationBar {...args} />
 	</Layout>;
 

src/components/presentational/Section/Section.stories.tsx

@@ -13,7 +13,7 @@ export default {
 } as ComponentMeta<typeof Action>;
 
 const Template: ComponentStory<typeof Action> = (args: ActionProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Section>
 			<Action {...args} />
 		</Section>

src/components/presentational/SegmentedControl/SegmentedControl.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof SegmentedControl>;
 
 const Template: ComponentStory<typeof SegmentedControl> = (args: SegmentedControlProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<SegmentedControl  {...args} />
 	</Layout>;
 

src/components/presentational/SingleExternalAccount/SingleExternalAccount.stories.tsx

@@ -12,7 +12,7 @@ export default {
     }
 } as ComponentMeta<typeof SingleExternalAccount>;
 
-const Template: ComponentStory<typeof SingleExternalAccount> = (args: SingleExternalAccountProps) => <Layout  colorScheme="light"><SingleExternalAccount {...args} /></Layout>;
+const Template: ComponentStory<typeof SingleExternalAccount> = (args: SingleExternalAccountProps) => <Layout  colorScheme="auto"><SingleExternalAccount {...args} /></Layout>;
 
 export const FetchComplete = Template.bind({});
 FetchComplete.args = {

src/components/presentational/SingleSurveyTask/SingleSurveyTask.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof SingleSurveyTask>;
 
 const Template: ComponentStory<typeof SingleSurveyTask> = (args: SingleSurveyTaskProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<SingleSurveyTask {...args} />
 	</Layout>;
 

src/components/presentational/SparkBarChart/SparkBarChart.stories.tsx

@@ -14,7 +14,7 @@ export default {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof SparkBarChart> = (args: SparkBarChartProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<div style={{ width: "300px" }}>
 			<SparkBarChart {...args} />
 		</div>

src/components/presentational/StatusBarBackground/StatusBarBackground.tsx

@@ -17,7 +17,7 @@ export default function (props: StatusBarBackgroundProps) {
 		style = { backgroundColor: props.color };
 	}
 
-	if (!props.color && context.darkMode) {
+	if (!props.color && context.colorScheme === "dark") {
 		MyDataHelps.setStatusBarStyle("lightContent");
 	}
 

src/components/presentational/Switch/Switch.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof Switch>;
 
 const Template: ComponentStory<typeof Switch> = (args: SwitchProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<Switch  {...args} />
 	</Layout>;
 

src/components/presentational/TrackerItem/TrackerItem.stories.tsx

@@ -13,7 +13,7 @@ export default {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof TrackerItem> = (args: TrackerItemProps) =>
-	<Layout  colorScheme="light">
+	<Layout  colorScheme="auto">
 		<TrackerItem {...args} />
 	</Layout>;
 

src/components/presentational/WeekCalendar/WeekCalendar.stories.tsx

@@ -25,7 +25,7 @@ export function Empty() {
 	const [selectedDate, setSelectedDate] = useState(currentDate);
 	const [intervalStartDate, setIntervalStartDate] = useState(initialIntervalStart);
 
-	return <Layout  colorScheme="light">
+	return <Layout  colorScheme="auto">
 		<WeekCalendar hideDateLabel={false}
 			dayRenderer={() => null}
 			loading={false}
@@ -81,7 +81,7 @@ export function WithNavigator() {
 		return <div style={{ paddingTop: "8px" }}><SparkBarChart averageFillPercent={0.3} bars={bars} /></div>;
 	}
 
-	return <Layout  colorScheme="light">
+	return <Layout  colorScheme="auto">
 		<DateRangeNavigator intervalStart={intervalStartDate}
 			intervalType="Week"
 			onIntervalChange={(n, _) => setIntervalStartDate(n)} />

src/components/step/StepLayout/StepLayout.tsx

@@ -8,7 +8,7 @@ export interface StepLayoutProps {
 
 export default function (props: StepLayoutProps) {
   return (
-    <Layout className='mdhui-step-container' bodyBackgroundColor="#FFFFFF">
+    <Layout colorScheme='light' className='mdhui-step-container' bodyBackgroundColor="#FFFFFF">
       {props.children}
     </Layout>
   );

src/components/view/ConnectEhrView/ConnectEhrView.tsx

@@ -35,7 +35,7 @@ export default function (props: ConnectEhrViewProps) {
     title = language['connect-ehr-title-prefix'] + title;
 
     return (
-        <Layout  colorScheme="light">
+        <Layout  colorScheme="auto">
             {props.presentation &&
             <NavigationBar title={title}
                            showBackButton={props.presentation == "Push"}

src/components/view/DeviceDataView/DeviceDataView.tsx

@@ -9,7 +9,7 @@ export interface DeviceDataViewProps {
 
 export default function (props: DeviceDataViewProps) {
 	return (
-		<Layout  colorScheme="light">
+		<Layout  colorScheme="auto">
 			<StatusBarBackground />
 			<PlatformSpecificContent platforms={["Android"]}>
 				<Card>