Dark Theme Live (#1925)

* Remove Featureflag

* notes

* VRT updates

* Dark Theme fixes

* VRT updates

* VRT updates

* Revert "VRT updates"

This reverts commit 7d669f2.

* Revert VRT

Reverting VRT

* VRT updates

* pillbackground

* VRT updates

* Theme Selector

* VRT Updates

* notes

* VRT updates

packages/desktop-client/src/components/ThemeSelector.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { useActions } from '../hooks/useActions';
-import useFeatureFlag from '../hooks/useFeatureFlag';
 import MoonStars from '../icons/v2/MoonStars';
 import Sun from '../icons/v2/Sun';
 import { useResponsive } from '../ResponsiveProvider';
@@ -18,9 +17,8 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
   let { saveGlobalPrefs } = useActions();
 
   let { isNarrowWidth } = useResponsive();
-  let themesFlag = useFeatureFlag('themes');
 
-  return isNarrowWidth || !themesFlag ? null : (
+  return isNarrowWidth ? null : (
     <Button
       type="bare"
       onClick={() => {

packages/desktop-client/src/components/accounts/MobileAccounts.js

@@ -70,6 +70,7 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
         onMouseDown={() => onSelect(account.id)}
         style={{
           flexDirection: 'row',
+          border: '1px solid ' + theme.pillBorder,
           flex: 1,
           alignItems: 'center',
           borderRadius: 6,

packages/desktop-client/src/components/budget/MobileBudgetTable.js

@@ -1396,6 +1396,9 @@ const ExpenseGroup = memo(function ExpenseGroup({
               onDelete={onDeleteCategory}
               // onReorder={onReorderCategory}
               onBudgetAction={onBudgetAction}
+              style={{
+                backgroundColor: theme.tableBackground,
+              }}
             />
           );
         })}
@@ -1485,6 +1488,9 @@ function IncomeGroup({
                 editMode={editMode}
                 isEditing={editingCategoryId === category.id}
                 onEdit={onEditCategory}
+                style={{
+                  backgroundColor: theme.tableBackground,
+                }}
                 onBudgetAction={onBudgetAction}
                 isEditingBudget={editingBudgetCategoryId === category.id}
                 onEditBudget={onEditCategoryBudget}

packages/desktop-client/src/components/mobile/MobileForms.js

@@ -121,6 +121,30 @@ export function BooleanField({ checked, onUpdate, style, disabled = false }) {
       className={`${css([
         {
           marginInline: styles.mobileEditingPadding,
+          flexShrink: 0,
+          appearance: 'none',
+          outline: 0,
+          border: '1px solid ' + theme.formInputBorder,
+          borderRadius: 4,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: theme.checkboxText,
+          backgroundColor: theme.tableBackground,
+          ':checked': {
+            border: '1px solid ' + theme.checkboxBorderSelected,
+            backgroundColor: theme.checkboxBackgroundSelected,
+            '::after': {
+              display: 'block',
+              background:
+                theme.checkboxBackgroundSelected +
+                // eslint-disable-next-line rulesdir/typography
+                ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 15px 15px',
+              width: 15,
+              height: 15,
+              content: ' ',
+            },
+          },
         },
         style,
       ])}`}

packages/desktop-client/src/components/modals/CreateEncryptionKey.tsx

@@ -74,7 +74,10 @@ export default function CreateEncryptionKey({
                 will generate a key based on a password and use it to encrypt
                 from now on. <strong>This requires a sync reset</strong> and all
                 other devices will have to revert to this version of your data.{' '}
-                <ExternalLink to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption">
+                <ExternalLink
+                  to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption"
+                  linkColor="purple"
+                >
                   Learn more
                 </ExternalLink>
               </Paragraph>
@@ -115,7 +118,10 @@ export default function CreateEncryptionKey({
                 <strong>This requires a sync reset</strong> and all other
                 devices will have to revert to this version of your data. Actual
                 will take you through that process on those devices.{' '}
-                <ExternalLink to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption">
+                <ExternalLink
+                  to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption"
+                  linkColor="purple"
+                >
                   Learn more
                 </ExternalLink>
               </Paragraph>

packages/desktop-client/src/components/modals/CreateLocalAccount.tsx

@@ -15,6 +15,7 @@ import Input from '../common/Input';
 import Modal, { ModalButtons } from '../common/Modal';
 import Text from '../common/Text';
 import View from '../common/View';
+import { Checkbox } from '../forms';
 
 type CreateLocalAccountProps = {
   modalProps: CommonModalProps;
@@ -86,26 +87,28 @@ function CreateLocalAccount({ modalProps, actions }: CreateLocalAccountProps) {
               }}
             >
               <View style={{ flexDirection: 'column' }}>
-                <label
+                <View
                   style={{
-                    userSelect: 'none',
-                    textAlign: 'right',
-                    width: '100%',
-                    display: 'flex',
-                    verticalAlign: 'center',
+                    flexDirection: 'row',
                     justifyContent: 'flex-end',
                   }}
-                  htmlFor="offbudget"
                 >
-                  <input
+                  <Checkbox
                     id="offbudget"
                     name="offbudget"
-                    type="checkbox"
                     checked={offbudget}
-                    onChange={event => setOffbudget(event.target.checked)}
+                    onChange={() => setOffbudget(!offbudget)}
                   />
-                  Off-budget
-                </label>
+                  <label
+                    htmlFor="offbudget"
+                    style={{
+                      userSelect: 'none',
+                      verticalAlign: 'center',
+                    }}
+                  >
+                    Off-budget
+                  </label>
+                </View>
                 <div
                   style={{
                     textAlign: 'right',

packages/desktop-client/src/components/modals/EditRule.js

@@ -907,7 +907,10 @@ export default function EditRule({
               <SimpleTransactionsTable
                 transactions={transactions}
                 fields={getTransactionFields(conditions, actions)}
-                style={{ border: '1px solid ' + theme.tableBorder }}
+                style={{
+                  border: '1px solid ' + theme.tableBorder,
+                  borderRadius: '6px 6px 0 0',
+                }}
               />
 
               <Stack

packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js

@@ -188,7 +188,7 @@ export default function GoCardlessExternalMsg({
           service) read-only access to your entire account’s transaction
           history. This service is not affiliated with Actual in any way. Make
           sure you’ve read and understand GoCardless’s{' '}
-          <ExternalLink to="https://gocardless.com/privacy/">
+          <ExternalLink to="https://gocardless.com/privacy/" linkColor="purple">
             Privacy Policy
           </ExternalLink>{' '}
           before proceeding.

packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx

@@ -57,7 +57,10 @@ const GoCardlessInitialise = ({
           In order to enable bank-sync via GoCardless (only for EU banks) you
           will need to create access credentials. This can be done by creating
           an account with{' '}
-          <ExternalLink to="https://gocardless.com/">GoCardless</ExternalLink>.
+          <ExternalLink to="https://gocardless.com/" linkColor="purple">
+            GoCardless
+          </ExternalLink>
+          .
         </Text>
 
         <FormField>

packages/desktop-client/src/components/reports/chart-theme.js

@@ -66,7 +66,7 @@ export const chartTheme = {
       ...axisBaseStyles,
       grid: {
         ...axisBaseStyles.grid,
-        stroke: 'rgba(0,0,0,.2)',
+        stroke: theme.pageTextSubdued,
         strokeDasharray: '1,1',
       },
       tickLabels: { ...baseLabelStyles, padding: 5 },
@@ -75,7 +75,7 @@ export const chartTheme = {
   independentAxis: {
     style: {
       ...axisBaseStyles,
-      axis: { ...axisBaseStyles.axis, stroke: 'rgba(0,0,0,.2)' },
+      axis: { ...axisBaseStyles.axis, stroke: theme.pageTextSubdued },
       tickLabels: { ...baseLabelStyles, padding: 10 },
     },
   },

packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx

@@ -141,12 +141,20 @@ function AreaGraph({ style, data, balanceTypeOp, compact }: AreaGraphProps) {
                 {compact ? null : (
                   <CartesianGrid strokeDasharray="3 3" vertical={false} />
                 )}
-                {compact ? null : <XAxis dataKey="date" />}
+                {compact ? null : (
+                  <XAxis
+                    dataKey="date"
+                    tick={{ fill: theme.pageText }}
+                    tickLine={{ stroke: theme.pageText }}
+                  />
+                )}
                 {compact ? null : (
                   <YAxis
                     dataKey={...balanceTypeOp}
                     domain={['auto', 'auto']}
                     tickFormatter={tickFormatter}
+                    tick={{ fill: theme.pageText }}
+                    tickLine={{ stroke: theme.pageText }}
                   />
                 )}
                 <Tooltip

packages/desktop-client/src/components/reports/graphs/BarGraph.tsx

@@ -205,10 +205,19 @@ function BarGraph({
                     angle={-35}
                     textAnchor="end"
                     height={Math.sqrt(longestLabelLength) * 25}
+                    tick={{ fill: theme.pageText }}
+                    tickLine={{ stroke: theme.pageText }}
                   />
                 )}
-                {!compact && <YAxis />}
-                {!compact && <ReferenceLine y={0} stroke="#000" />}
+                {!compact && (
+                  <YAxis
+                    tick={{ fill: theme.pageText }}
+                    tickLine={{ stroke: theme.pageText }}
+                  />
+                )}
+                {!compact && (
+                  <ReferenceLine y={0} stroke={theme.pageTextLight} />
+                )}
                 <Bar dataKey={val => getVal(val)} stackId="a">
                   {data[splitData]
                     .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx

@@ -126,12 +126,20 @@ function NetWorthGraph({
                 {compact ? null : (
                   <CartesianGrid strokeDasharray="3 3" vertical={false} />
                 )}
-                {compact ? null : <XAxis dataKey="x" />}
+                {compact ? null : (
+                  <XAxis
+                    dataKey="x"
+                    tick={{ fill: theme.pageText }}
+                    tickLine={{ stroke: theme.pageText }}
+                  />
+                )}
                 {compact ? null : (
                   <YAxis
                     dataKey="y"
                     domain={['auto', 'auto']}
                     tickFormatter={tickFormatter}
+                    tick={{ fill: theme.pageText }}
+                    tickLine={{ stroke: theme.pageText }}
                   />
                 )}
                 <Tooltip

packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx

@@ -165,8 +165,17 @@ function StackedBarGraph({
                   isAnimationActive={false}
                 />
                 <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="date" />
-                <YAxis />
+                <XAxis
+                  dataKey="date"
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                />
+                {!compact && (
+                  <YAxis
+                    tick={{ fill: theme.pageText }}
+                    tickLine={{ stroke: theme.pageText }}
+                  />
+                )}
                 {data.groupBy
                   .slice(0)
                   .reverse()

packages/desktop-client/src/components/rules/ActionExpression.tsx

@@ -32,7 +32,7 @@ export default function ActionExpression({
         display: 'block',
         maxWidth: '100%',
         color: theme.pillText,
-        backgroundColor: theme.pillBackground,
+        backgroundColor: theme.pillBackgroundLight,
         borderRadius: 4,
         padding: '3px 5px',
         whiteSpace: 'nowrap',

packages/desktop-client/src/components/rules/ConditionExpression.tsx

@@ -37,7 +37,7 @@ export default function ConditionExpression({
         display: 'block',
         maxWidth: '100%',
         color: theme.pillText,
-        backgroundColor: theme.pillBackground,
+        backgroundColor: theme.pillBackgroundLight,
         borderRadius: 4,
         padding: '3px 5px',
         whiteSpace: 'nowrap',

packages/desktop-client/src/components/settings/Encryption.tsx

@@ -32,7 +32,10 @@ export default function EncryptionSettings() {
         Your data is encrypted with a key that only you have before sending it
         it out to the cloud. Local data remains unencrypted so if you forget
         your password you can re-encrypt it.{' '}
-        <ExternalLink to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption">
+        <ExternalLink
+          to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption"
+          linkColor="purple"
+        >
           Learn more…
         </ExternalLink>
       </Text>
@@ -44,7 +47,10 @@ export default function EncryptionSettings() {
         unencrypted connection to a remote server. You’ll need to enable HTTPS
         on your server to use end-to-end encryption. This problem may also occur
         if your browser is too old to work with Actual.{' '}
-        <ExternalLink to="https://actualbudget.org/docs/config/https">
+        <ExternalLink
+          to="https://actualbudget.org/docs/config/https"
+          linkColor="purple"
+        >
           Learn more…
         </ExternalLink>
       </Text>
@@ -63,7 +69,10 @@ export default function EncryptionSettings() {
         end-to-end encrypted which means the server owners have the ability to
         read it. If you want, you can use an additional password to encrypt your
         data on the server.{' '}
-        <ExternalLink to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption">
+        <ExternalLink
+          to="https://actualbudget.org/docs/getting-started/sync/#end-to-end-encryption"
+          linkColor="purple"
+        >
           Learn more…
         </ExternalLink>
       </Text>

packages/desktop-client/src/components/settings/Experimental.tsx

@@ -5,7 +5,7 @@ import type { FeatureFlag } from 'loot-core/src/types/prefs';
 
 import { useActions } from '../../hooks/useActions';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
-import { theme, useTheme } from '../../style';
+import { theme } from '../../style';
 import LinkButton from '../common/LinkButton';
 import Text from '../common/Text';
 import View from '../common/View';
@@ -75,21 +75,6 @@ function ReportBudgetFeature() {
   );
 }
 
-function ThemeFeature() {
-  let theme = useTheme();
-  let enabled = useFeatureFlag('themes');
-  let blockToggleOff = theme !== 'light' && enabled;
-  return (
-    <FeatureToggle
-      flag="themes"
-      disableToggle={blockToggleOff}
-      error="Switch to the light theme before turning off this feature"
-    >
-      Dark mode
-    </FeatureToggle>
-  );
-}
-
 export default function ExperimentalFeatures() {
   let [expanded, setExpanded] = useState(false);
 
@@ -113,8 +98,6 @@ export default function ExperimentalFeatures() {
             <FeatureToggle flag="experimentalOfxParser">
               Experimental OFX parser
             </FeatureToggle>
-
-            <ThemeFeature />
           </View>
         ) : (
           <LinkButton