Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Renamed "Night mode" to "Dark theme" throughout the app #5595

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/howto/new-feature.md
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ list, which we show in a WebView.
type.

* Your new feature may require some new CSS to style the new HTML.
See `src/webview/static/base.css` and `src/webview/css/cssNight.js`.
See `src/webview/static/base.css` and `src/webview/css/cssDark.js`.

* If your new feature involves any interaction inside the message
list, it may require some JS logic running inside the WebView.
Expand Down
4 changes: 2 additions & 2 deletions src/emoji/codePointMap.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ export const override: {| [code: string]: string |} = {

// Fix the "letter" emoji. The codes in Zulip's emoji database would give
// these a text-style rather than emoji-style presentation; that's subtler
// than we want, plus when not in night mode it's actually invisible.
// than we want, plus when not in dark theme it's actually invisible.
'1f170': '1f170-fe0f', // :a:
'1f171': '1f171-fe0f', // :b:
'1f17e': '1f17e-fe0f', // :o:
'1f17f': '1f17f-fe0f', // :p:
// (Zulip only actually offers a handful of these letter emoji.)

// :check_mark: -> :check: because the former is invisible on a light
// background, i.e. when not in night mode.
// background, i.e. when not in dark theme.
'2714': '2705',
};

Expand Down
2 changes: 1 addition & 1 deletion src/reduxTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ export type ThemeName = 'light' | 'dark';
* To determine the actual theme to show the user, use a ThemeName;
* see there for details.
*/
export type ThemeSetting = 'default' | 'night';
export type ThemeSetting = 'default' | 'dark';

/** What browser the user has set to use for opening links in messages.
*
Expand Down
4 changes: 2 additions & 2 deletions src/settings/SettingsScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ export default function SettingsScreen(props: Props): Node {
const { navigation } = props;

const handleThemeChange = useCallback(() => {
dispatch(setGlobalSettings({ theme: theme === 'default' ? 'night' : 'default' }));
dispatch(setGlobalSettings({ theme: theme === 'default' ? 'dark' : 'default' }));
}, [theme, dispatch]);

return (
<Screen title="Settings">
<SwitchRow label="Night mode" value={theme === 'night'} onValueChange={handleThemeChange} />
<SwitchRow label="Dark theme" value={theme === 'dark'} onValueChange={handleThemeChange} />
<SwitchRow
label="Open links with in-app browser"
value={shouldUseInAppBrowser(browser)}
Expand Down
19 changes: 13 additions & 6 deletions src/settings/__tests__/settingsReducer-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,19 @@ describe('settingsReducer', () => {

describe('SET_GLOBAL_SETTINGS', () => {
test('changes value of a key', () => {
expect(
settingsReducer(
baseState,
deepFreeze({ type: SET_GLOBAL_SETTINGS, update: { theme: 'night' } }),
),
).toEqual({ ...baseState, theme: 'night' });
const action = deepFreeze({
type: SET_GLOBAL_SETTINGS,
update: { theme: 'dark' },
});

const expectedState = {
...baseState,
theme: 'dark',
};

const actualState = settingsReducer(baseState, action);

expect(actualState).toEqual(expectedState);
});
});

Expand Down
16 changes: 15 additions & 1 deletion src/storage/__tests__/migrations-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ describe('migrations', () => {
// What `base` becomes after all migrations.
const endBase = {
...base52,
migrations: { version: 56 },
migrations: { version: 57 },
};

for (const [desc, before, after] of [
Expand Down Expand Up @@ -278,6 +278,20 @@ describe('migrations', () => {
},
{ ...endBase, settings: { ...endBase.settings, markMessagesReadOnScroll: 'never' } },
],
[
"check 57 with 'night'",
{ ...base52, migrations: { version: 56 }, settings: { ...base52.settings, theme: 'night' } },
{ ...endBase, settings: { ...endBase.settings, theme: 'dark' } },
],
[
"check 57 with 'default'",
{
...base52,
migrations: { version: 56 },
settings: { ...base52.settings, theme: 'default' },
},
{ ...endBase, settings: { ...endBase.settings, theme: 'default' } },
],
]) {
/* eslint-disable no-loop-func */
test(desc, async () => {
Expand Down
6 changes: 6 additions & 0 deletions src/storage/migrations.js
Original file line number Diff line number Diff line change
Expand Up @@ -472,6 +472,12 @@ const migrationsInner: {| [string]: (LessPartialState) => LessPartialState |} =
// Add presenceEnabled to state.realm.
'56': dropCache,

// Rename 'night' to 'dark' in state.settings.theme
'57': state => ({
...state,
settings: { ...state.settings, theme: state.settings.theme === 'night' ? 'dark' : 'default' },
}),

// TIP: When adding a migration, consider just using `dropCache`.
// (See its jsdoc for guidance on when that's the right answer.)
};
Expand Down
4 changes: 2 additions & 2 deletions src/webview/css/css.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Platform } from 'react-native';
import type { ThemeName } from '../../types';
import cssPygments from './cssPygments';
import cssEmojis from './cssEmojis';
import cssNight from './cssNight';
import cssDark from './cssDark';
import type { ServerEmojiData } from '../../api/modelTypes';

/**
Expand All @@ -27,7 +27,7 @@ export default (theme: ThemeName, serverEmojiData: ServerEmojiData | null): stri
<link rel='stylesheet' type='text/css' href='./base.css'>
<link rel='stylesheet' type='text/css' href='./katex/katex.min.css'>
<style>
${theme === 'dark' ? cssNight : ''}
${theme === 'dark' ? cssDark : ''}
${cssPygments(theme === 'dark')}
${cssEmojis(serverEmojiData)}
</style>
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion static/translations/messages_en.json
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
"Learn more": "Learn more",
"Full profile": "Full profile",
"Settings": "Settings",
"Night mode": "Night mode",
"Dark theme": "Dark theme",
"Open links with in-app browser": "Open links with in-app browser",
"Language": "Language",
"Arabic": "Arabic",
Expand Down