Disroot
/
Mangane
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Start adding dark mode

This commit is contained in:
Alex Gleason 2022-03-23 19:18:37 -05:00
parent 8970e4e3db
commit 793b0f9128
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
15 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.stylelintrc.json
View File

@ -10,7 +10,7 @@
"font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["ForkAwesome", "Font Awesome 5 Free", "OpenDyslexic", "soapbox"] }],
"no-descending-specificity": null,
"no-duplicate-selectors": null,
"scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/"]}],
"no-invalid-position-at-import-rule": [true, { "ignoreAtRules": ["/tailwind/"]}]
"scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/", "layer"]}],
"no-invalid-position-at-import-rule": null
}
}

2
app/soapbox/components/autosuggest_textarea.js
View File

@ -257,7 +257,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
<Textarea
ref={this.setTextarea}
className={classNames('px-0 border-0 text-gray-800 placeholder:text-color-400 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
className={classNames('dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-color-400 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
'min-h-[100px]': !condensed,
})}
id={id}

8
app/soapbox/components/status_action_bar.js
View File

@ -607,7 +607,7 @@ class StatusActionBar extends ImmutablePureComponent {
<IconButton
disabled={!publicStatus}
className={classNames({
'text-gray-400 hover:text-gray-600': !status.get('reblogged'),
'text-gray-400 hover:text-gray-600 dark:hover:text-white': !status.get('reblogged'),
'text-success-600 hover:text-success-600': status.get('reblogged'),
})}
title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
@ -631,7 +631,7 @@ class StatusActionBar extends ImmutablePureComponent {
title={intl.formatMessage(messages.share)}
src={require('@tabler/icons/icons/upload.svg')}
onClick={this.handleShareClick}
className='text-gray-400 hover:text-gray-600'
className='text-gray-400 hover:text-gray-600 dark:hover:text-white'
/>
</div>
);
@ -643,7 +643,7 @@ class StatusActionBar extends ImmutablePureComponent {
title={replyTitle}
src={require('@tabler/icons/icons/message-circle.svg')}
onClick={this.handleReplyClick}
className='text-gray-400 hover:text-gray-600'
className='text-gray-400 hover:text-gray-600 dark:hover:text-white'
/>
{replyCount !== 0 ? (
@ -672,7 +672,7 @@ class StatusActionBar extends ImmutablePureComponent {
/> */}
<IconButton
className={classNames({
'text-gray-400 hover:text-gray-600': !meEmojiReact,
'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
})}
title={meEmojiTitle}

2
app/soapbox/components/status_list.js
View File

@ -226,7 +226,7 @@ export default class StatusList extends ImmutablePureComponent {
placeholderComponent={PlaceholderStatus}
placeholderCount={20}
ref={this.setRef}
className={divideType === 'border' ? 'divide-y divide-solid divide-gray-200' : 'sm:space-y-3 divide-y divide-solid divide-gray-200 sm:divide-none'}
className={divideType === 'border' ? 'divide-y divide-solid divide-gray-200 dark:divide-gray-800' : 'sm:space-y-3 divide-y divide-solid divide-gray-200 dark:divide-gray-800 sm:divide-none'}
{...other}
>
{this.renderScrollableContent()}

2
app/soapbox/components/ui/card/card.tsx
View File

@ -26,7 +26,7 @@ const Card: React.FC<ICard> = React.forwardRef(({ children, variant, size = 'md'
{...filteredProps}
className={classNames({
'space-y-4': true,
'bg-white sm:shadow-lg overflow-hidden': variant === 'rounded',
'bg-white dark:bg-slate-800 sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded',
[sizes[size]]: true,
[className]: typeof className !== 'undefined',
})}

4
app/soapbox/components/ui/icon-button/icon-button.tsx
View File

@ -23,8 +23,8 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
<button
ref={ref}
type='button'
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500', {
'bg-white': !transparent,
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
'bg-white dark:bg-transparent': !transparent,
[className]: typeof className !== 'undefined',
})}
{...filteredProps}

6
app/soapbox/components/ui/text/text.tsx
View File

@ -10,11 +10,11 @@ type Families = 'sans' | 'mono'
type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
const themes = {
default: 'text-gray-900',
default: 'text-gray-900 dark:text-gray-100',
danger: 'text-danger-600',
primary: 'text-primary-600',
muted: 'text-gray-500',
subtle: 'text-gray-400',
muted: 'text-gray-500 dark:text-gray-400',
subtle: 'text-gray-400 dark:text-gray-500',
success: 'text-success-600',
inherit: 'text-inherit',
white: 'text-white',

2
app/soapbox/components/ui/textarea/textarea.tsx
View File

@ -18,7 +18,7 @@ const Textarea = React.forwardRef(
{...props}
ref={ref}
className={classNames({
'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md':
'dark:bg-slate-800 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md':
true,
'font-mono': isCodeEditor,
})}

2
app/soapbox/containers/soapbox.js
View File

@ -170,7 +170,7 @@ class SoapboxMount extends React.PureComponent {
<BrowserRouter basename={FE_SUBDIRECTORY}>
<>
<Helmet>
{/* <html lang='en' className={this.props.themeMode} /> */}
<html lang='en' className={classNames({ dark: this.props.themeMode === 'dark' })} />
<body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
<meta name='theme-color' content={this.props.brandColor} />

2
app/soapbox/features/placeholder/components/placeholder_avatar.js
View File

@ -15,7 +15,7 @@ const PlaceholderAvatar = ({ size }) => {
return (
<div
className='rounded-full bg-slate-200'
className='rounded-full bg-slate-200 dark:bg-slate-700'
style={style}
alt=''
/>

2
app/soapbox/features/placeholder/components/placeholder_display_name.js
View File

@ -8,7 +8,7 @@ const PlaceholderDisplayName = ({ minLength, maxLength }) => {
const acctLength = randomIntFromInterval(maxLength, minLength);
return (
<div className='flex flex-col text-slate-200'>
<div className='flex flex-col text-slate-200 dark:text-slate-700'>
<p>{generateText(length)}</p>
<p>{generateText(acctLength)}</p>
</div>

4
app/soapbox/features/placeholder/components/placeholder_status.tsx
View File

@ -12,8 +12,8 @@ interface IPlaceholderStatus {
const PlaceholderStatus = ({ thread = false }: IPlaceholderStatus) => (
<div
className={classNames({
'status-placeholder bg-white': true,
'sm:shadow-xl sm:rounded-xl px-4 py-6 sm:p-6': !thread,
'status-placeholder bg-white dark:bg-slate-800': true,
'sm:shadow-xl dark:sm:shadow-inset sm:rounded-xl px-4 py-6 sm:p-6': !thread,
})}
>
<div className='w-full animate-pulse overflow-hidden'>

2
app/soapbox/features/placeholder/components/placeholder_status_content.js
View File

@ -7,7 +7,7 @@ const PlaceholderStatusContent = ({ minLength, maxLength }) => {
const length = randomIntFromInterval(maxLength, minLength);
return (
<div className='flex flex-col text-slate-200'>
<div className='flex flex-col text-slate-200 dark:text-slate-700'>
<p className='break-words'>{generateText(length)}</p>
</div>
);

6
app/styles/application.scss
View File

@ -104,6 +104,12 @@
@tailwind components;
@tailwind utilities;
@layer utilities {
.shadow-inset {
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}
}
@import 'forms';
@import 'utilities';
@import 'components/datepicker';

18
app/styles/components/status.scss
View File

@ -160,7 +160,7 @@
}
.status-link {
@apply hover:underline text-primary-600 hover:text-primary-800;
@apply hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500;
}
.status {
@ -238,7 +238,7 @@
}
.status__wrapper {
@apply bg-white px-4 py-6 sm:shadow-xl sm:p-5 sm:rounded-xl;
@apply bg-white dark:bg-slate-800 px-4 py-6 sm:shadow-xl dark:sm:shadow-inset sm:p-5 sm:rounded-xl;
}
[column-type=filled] .status__wrapper,
@ -379,7 +379,7 @@
.status__content,
.reply-indicator__content {
@apply text-gray-900 break-words text-ellipsis overflow-hidden relative;
@apply text-gray-900 dark:text-gray-300 break-words text-ellipsis overflow-hidden relative;
&:focus {
@apply outline-none;
@ -410,7 +410,7 @@
}
a {
@apply text-primary-600 hover:underline;
@apply text-primary-600 dark:text-primary-400 hover:underline;
.fa {
color: var(--primary-text-color);
@ -469,11 +469,11 @@
}
.status-card {
@apply flex text-sm border border-solid border-gray-200 rounded-lg text-gray-800 mt-3 min-h-[150px] no-underline overflow-hidden;
@apply flex text-sm border border-solid border-gray-200 dark:border-gray-700 rounded-lg text-gray-800 dark:text-gray-200 mt-3 min-h-[150px] no-underline overflow-hidden;
}
a.status-card {
@apply cursor-pointer hover:bg-gray-50 hover:no-underline;
@apply cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 hover:no-underline;
}
.status-card-photo {
@ -489,7 +489,7 @@ a.status-card {
}
.status-card__title {
@apply block font-medium mb-2 text-gray-800 no-underline;
@apply block font-medium mb-2 text-gray-800 dark:text-gray-200 no-underline;
}
.status-card__content {
@ -497,7 +497,7 @@ a.status-card {
}
.status-card__description {
@apply text-gray-500;
@apply text-gray-500 dark:text-gray-400;
}
.status-card__host {
@ -549,7 +549,7 @@ a.status-card {
}
.status-card.compact {
@apply border-gray-200;
@apply border-gray-200 dark:border-gray-700;
}
.status-card__image-image {