Start adding dark mode

.stylelintrc.json

@@ -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/"]}],
+    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/", "layer"]}],
-    "no-invalid-position-at-import-rule": [true, { "ignoreAtRules": ["/tailwind/"]}]
+    "no-invalid-position-at-import-rule": null
   }
 }

app/soapbox/components/autosuggest_textarea.js

@@ -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}

app/soapbox/components/status_action_bar.js

@@ -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}

app/soapbox/components/status_list.js

@@ -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()}

app/soapbox/components/ui/card/card.tsx

@@ -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',
     })}

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -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', {
+      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': !transparent,
+        'bg-white dark:bg-transparent': !transparent,
         [className]: typeof className !== 'undefined',
       })}
       {...filteredProps}

app/soapbox/components/ui/text/text.tsx

@@ -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',
+  muted: 'text-gray-500 dark:text-gray-400',
-  subtle: 'text-gray-400',
+  subtle: 'text-gray-400 dark:text-gray-500',
   success: 'text-success-600',
   inherit: 'text-inherit',
   white: 'text-white',

app/soapbox/components/ui/textarea/textarea.tsx

@@ -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,
         })}

app/soapbox/containers/soapbox.js

@@ -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} />

app/soapbox/features/placeholder/components/placeholder_avatar.js

@@ -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=''
     />

app/soapbox/features/placeholder/components/placeholder_display_name.js

@@ -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>

app/soapbox/features/placeholder/components/placeholder_status.tsx

@@ -12,8 +12,8 @@ interface IPlaceholderStatus {
 const PlaceholderStatus = ({ thread = false }: IPlaceholderStatus) => (
   <div
     className={classNames({
-      'status-placeholder bg-white': true,
+      'status-placeholder bg-white dark:bg-slate-800': true,
-      'sm:shadow-xl sm:rounded-xl px-4 py-6 sm:p-6': !thread,
+      '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'>

app/soapbox/features/placeholder/components/placeholder_status_content.js

@@ -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>
   );

app/styles/application.scss

@@ -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';

app/styles/components/status.scss

@@ -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 {