bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'next-theme-picker' into 'next'

Browse source 
Next: Make the ThemeToggle look decent, unhide it

See merge request soapbox-pub/soapbox-fe!1197
This commit is contained in:
Alex Gleason 2022-04-13 00:27:43 +00:00
commit 331f73da4b
4 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/features/ui/components/navbar.tsx
View file

@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
import { Avatar, Button, Icon } from 'soapbox/components/ui'; import { Avatar, Button, Icon } from 'soapbox/components/ui';
import Search from 'soapbox/features/compose/components/search'; import Search from 'soapbox/features/compose/components/search';
import ThemeToggle from 'soapbox/features/ui/components/theme_toggle'; import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
import { useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks'; import { useOwnAccount, useSoapboxConfig, useSettings, useFeatures } from 'soapbox/hooks';
import { openSidebar } from '../../../actions/sidebar'; import { openSidebar } from '../../../actions/sidebar';
@ -19,6 +19,7 @@ const Navbar = () => {
const account = useOwnAccount(); const account = useOwnAccount();
const settings = useSettings(); const settings = useSettings();
const features = useFeatures();
const soapboxConfig = useSoapboxConfig(); const soapboxConfig = useSoapboxConfig();
const singleUserMode = soapboxConfig.get('singleUserMode'); const singleUserMode = soapboxConfig.get('singleUserMode');
@ -68,7 +69,8 @@ const Navbar = () => {
</div> </div>
<div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'> <div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'>
{settings.get('isDeveloper') && ( {/* TODO: make this available for everyone when it's ready (possibly in a different place) */}
{(features.darkMode || settings.get('isDeveloper')) && (
<ThemeToggle /> <ThemeToggle />
)} )}

4
app/soapbox/features/ui/components/theme_toggle.tsx
View file

@ -37,8 +37,8 @@ function ThemeToggle({ showLabel }: IThemeToggle) {
id={id} id={id}
checked={themeMode === 'light'} checked={themeMode === 'light'}
icons={{ icons={{
checked: <Icon src={require('@tabler/icons/icons/sun.svg')} />, checked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/sun.svg')} />,
unchecked: <Icon src={require('@tabler/icons/icons/moon.svg')} />, unchecked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/moon.svg')} />,
}} }}
onChange={onToggle} onChange={onToggle}
/> />

4
app/soapbox/utils/features.ts
View file

@ -134,6 +134,10 @@ const getInstanceFeatures = (instance: Instance) => {
trendingTruths: v.software === TRUTHSOCIAL, trendingTruths: v.software === TRUTHSOCIAL,
trendingStatuses: v.software === MASTODON && gte(v.compatVersion, '3.5.0'), trendingStatuses: v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
pepe: v.software === TRUTHSOCIAL, pepe: v.software === TRUTHSOCIAL,
// FIXME: long-term this shouldn't be a feature,
// but for now we want it to be overrideable in the build
darkMode: true,
}; };
}; };

9
app/styles/components/theme-toggle.scss
View file

@ -27,8 +27,11 @@
} }
} }
.svg-icon { .react-toggle-track {
width: 18px; @apply dark:bg-slate-600;
height: 18px; }
.react-toggle-thumb {
@apply dark:bg-slate-900 dark:border-slate-800;
} }
} }