[add] Add 5 original themes, change default themes

- add handon base .css files (handon/handon.scss)
- add 2 mods (cantadark, blacklead)
- new: handon, handon-conrast, handon-light
- set default theme to handon

app/javascript/mastodon/components/display_name.tsx

@@ -82,6 +82,12 @@ export class DisplayName extends React.PureComponent<Props> {
         acct = `${acct}@${localDomain}`;
       }
 
+      let suffixClassName = 'display-name__account';
+
+      if (!acct.includes('@')) {
+        suffixClassName = suffixClassName + ' handon-local-account';
+      }
+
       displayName = (
         <bdi>
           <strong
@@ -92,7 +98,7 @@ export class DisplayName extends React.PureComponent<Props> {
           />
         </bdi>
       );
-      suffix = <span className='display-name__account'>@{acct}</span>;
+      suffix = <span className={suffixClassName}>@{acct}</span>;
     } else {
       displayName = (
         <bdi>

app/javascript/styles/handon-blacklead.scss

@@ -0,0 +1,4 @@
+@import 'application';
+@import 'handon/blacklead/variables';
+@import 'handon/handon';
+@import 'mods/blacklead';

app/javascript/styles/handon-cantadark.scss

@@ -0,0 +1,4 @@
+@import 'application';
+@import 'handon/cantadark/variables';
+@import 'handon/handon';
+@import 'mods/cantadark';

app/javascript/styles/handon-contrast.scss

@@ -0,0 +1,5 @@
+@import 'contrast/variables';
+@import 'application';
+@import 'contrast/diff';
+@import 'handon/contrast/variables';
+@import 'handon/handon';

app/javascript/styles/handon-light.scss

@@ -0,0 +1,5 @@
+@import 'mastodon-light/variables';
+@import 'application';
+@import 'mastodon-light/diff';
+@import 'handon/light/variables';
+@import 'handon/handon';

app/javascript/styles/handon.scss

@@ -0,0 +1,3 @@
+@import 'handon/default/variables';
+@import 'application';
+@import 'handon/handon';

app/javascript/styles/handon/blacklead/variables.scss

@@ -0,0 +1,2 @@
+$lock-color: #a0a1a1;
+$at-color: #a0a1a1;

app/javascript/styles/handon/cantadark/variables.scss

@@ -0,0 +1,2 @@
+$lock-color: #ffaa00;
+$at-color: #ffaa00;

app/javascript/styles/handon/contrast/variables.scss

@@ -0,0 +1,2 @@
+$lock-color: #fffacd;
+$at-color: #FD0;

app/javascript/styles/handon/default/variables.scss

@@ -0,0 +1,2 @@
+$lock-color: #fffacd;
+$at-color: #FD0;

app/javascript/styles/handon/handon.scss

@@ -0,0 +1,30 @@
+/**** visibility ****/
+/* Change visibility icon color (Followers-only)  */
+.status .fa-lock:before {
+  color: $lock-color !important ;
+}
+.detailed-status .fa-lock:before {
+  color: $lock-color !important ;
+}
+/* Change visibility icon color (Direct) */
+.status .fa-at::before {
+  color: $at-color !important ;
+}
+.detailed-status .fa-at::before {
+  color: $at-color !important ;
+}
+/* Disable visibility icon when it is public */
+.status-public .fa-globe:before {
+  display: none !important ;
+}
+
+/**** misc ****/
+/* Change color of display-name who is belong to handon.club */
+.status .handon-local-account {
+  color: #ff6347 !important ;
+}
+
+/* Enlarge custom emojis */
+p > .emojione[alt^=":"]:active {
+  width: 7em; height: 7em; margin: 0;
+}

app/javascript/styles/handon/light/variables.scss

@@ -0,0 +1,2 @@
+$lock-color: #ffa500;
+$at-color: #0000cd;