Add Dark Mode to Metro UI 2.0

resources/assets/js/components/ComposeModal.vue

@@ -1878,11 +1878,11 @@ export default {
 		}
 		a.list-group-item:hover {
 			text-decoration: none;
-			background-color: #f8f9fa !important;
+			background-color: #f8f9fa;
 		}
 		.compose-action:hover {
 			cursor: pointer;
-			background-color: #f8f9fa !important;
+			background-color: #f8f9fa;
 		}
 		.collections-list-group {
 			max-height: 500px;

resources/assets/js/components/presenter/PhotoAlbumPresenter.vue

@@ -21,8 +21,8 @@
 			:hash="status.media_attachments[0].blurhash"
 			:alt="altText(status)"/>
 	</div>
-	<div v-else class="w-100 h-100 p-0">
-		<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
+	<div v-else class="w-100 h-100 p-0 album-wrapper">
+		<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0" :id="'carousel-' + status.id">
 			<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
 
 				<img
@@ -31,71 +31,67 @@
 					:src="img.url"
 					:alt="altText(img)"
 					loading="lazy"
+					:data-bp="img.url"
 					onerror="this.onerror=null;this.src='/storage/no-preview.png'">
 
-				<p v-if="!status.sensitive && sensitive"
-					@click="status.sensitive = true"
-					style="
-					margin-top: 0;
-					padding: 10px;
-					color: #fff;
-					font-size: 10px;
-					text-align: right;
-					position: absolute;
-					top: 0;
-					right: 0;
-					border-top-left-radius: 5px;
-					cursor: pointer;
-					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-				">
-					<i class="fas fa-eye-slash fa-lg"></i>
-				</p>
-
-				<p
-					v-if="status.media_attachments[0].license"
-					style="
-					margin-bottom: 0;
-					padding: 0 5px;
-					color: #fff;
-					font-size: 10px;
-					text-align: right;
-					position: absolute;
-					bottom: 0;
-					right: 0;
-					border-top-left-radius: 5px;
-					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-				">
-					<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
-				</p>
 			</slide>
 		</carousel>
+		<div class="album-overlay">
+			<p v-if="!status.sensitive && sensitive"
+				@click="status.sensitive = true"
+				style="
+				margin-top: 0;
+				padding: 10px;
+				color: #fff;
+				font-size: 10px;
+				text-align: right;
+				position: absolute;
+				top: 0;
+				right: 0;
+				border-top-left-radius: 5px;
+				cursor: pointer;
+				background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+			">
+				<i class="fas fa-eye-slash fa-lg"></i>
+			</p>
+
+			<p @click.prevent="toggleLightbox"
+				style="
+				margin-top: 0;
+				padding: 10px;
+				color: #fff;
+				font-size: 10px;
+				text-align: right;
+				position: absolute;
+				left: 0;
+				top: 0;
+				border-bottom-right-radius: 5px;
+				cursor: pointer;
+				background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+			">
+				<i class="fas fa-expand fa-lg"></i>
+			</p>
+
+			<p
+				v-if="status.media_attachments[0].license"
+				style="
+				margin-bottom: 0;
+				padding: 0 5px;
+				color: #fff;
+				font-size: 10px;
+				text-align: right;
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				border-top-left-radius: 5px;
+				background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+			">
+				<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
+			</p>
+		</div>
 	</div>
 </template>
 
-<style type="text/css" scoped>
-  .card-img-top {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-  .content-label-wrapper {
-  	position: relative;
-  }
-  .content-label {
-  	margin: 0;
-  	position: absolute;
-  	top:50%;
-  	left:50%;
-  	transform: translate(-50%, -50%);
-  	display: flex;
-  	flex-direction: column;
-  	align-items: center;
-  	justify-content: center;
-  	width: 100%;
-  	height: 100%;
-  	z-index: 2;
-  	background: rgba(0, 0, 0, 0.2)
-  }
-</style>
 
 <script type="text/javascript">
 	import BigPicture from 'bigpicture';
@@ -125,7 +121,9 @@
 
 			toggleLightbox(e) {
 				BigPicture({
-					el: e.target
+					el: e.target,
+					gallery: '#carousel-' + this.status.id,
+					position: this.$refs.carousel.currentPage
 				})
 			},
 
@@ -161,3 +159,31 @@
 		}
 	}
 </script>
+
+<style type="text/css" scoped>
+  .card-img-top {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+  .content-label-wrapper {
+  	position: relative;
+  }
+  .content-label {
+  	margin: 0;
+  	position: absolute;
+  	top:50%;
+  	left:50%;
+  	transform: translate(-50%, -50%);
+  	display: flex;
+  	flex-direction: column;
+  	align-items: center;
+  	justify-content: center;
+  	width: 100%;
+  	height: 100%;
+  	z-index: 2;
+  	background: rgba(0, 0, 0, 0.2)
+  }
+  .album-wrapper {
+  	position: relative;
+  }
+</style>

resources/assets/js/i18n/uk.json

@@ -1,150 +1,170 @@
 {
     "common": {
-        "comment": "Comment",
-        "commented": "Commented",
-        "comments": "Comments",
-        "like": "Like",
-        "liked": "Liked",
-        "likes": "Likes",
-        "share": "Share",
-        "shared": "Shared",
-        "shares": "Shares",
-        "unshare": "Unshare",
-        "cancel": "Cancel",
-        "copyLink": "Copy Link",
-        "delete": "Delete",
-        "error": "Error",
-        "errorMsg": "Something went wrong. Please try again later.",
-        "oops": "Oops!",
-        "other": "Other",
-        "readMore": "Read more",
-        "success": "Success",
-        "sensitive": "Sensitive",
-        "sensitiveContent": "Sensitive Content",
-        "sensitiveContentWarning": "This post may contain sensitive content"
+        "comment": "\u041a\u043e\u043c\u0435\u043d\u0442\u0443\u0432\u0430\u0442\u0438",
+        "commented": "\u041f\u0440\u043e\u043a\u043e\u043c\u0435\u043d\u0442\u043e\u0432\u0430\u043d\u043e",
+        "comments": "\u041a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0456",
+        "like": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u0442\u0438",
+        "liked": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043e",
+        "likes": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f",
+        "share": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438",
+        "shared": "\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u043e",
+        "shares": "\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u043d\u044f",
+        "unshare": "\u041d\u0435 \u043f\u043e\u0448\u0438\u0440\u044e\u0432\u0430\u0442\u0438",
+        "bookmark": "\u0417\u0430\u043a\u043b\u0430\u0434\u043a\u0430",
+        "cancel": "\u0421\u043a\u0430\u0441\u0443\u0432\u0430\u0442\u0438",
+        "copyLink": "\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f",
+        "delete": "\u0412\u0438\u0434\u0430\u043b\u0438\u0442\u0438",
+        "error": "\u041f\u043e\u043c\u0438\u043b\u043a\u0430",
+        "errorMsg": "\u0429\u043e\u0441\u044c \u043f\u0456\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u041f\u043e\u0432\u0442\u043e\u0440\u0456\u0442\u044c \u0441\u043f\u0440\u043e\u0431\u0443 \u0437\u0433\u043e\u0434\u043e\u043c",
+        "oops": "\u0419\u043e\u0439!",
+        "other": "\u0406\u043d\u0448\u0435",
+        "readMore": "\u0414\u043e\u043a\u043b\u0430\u0434\u043d\u0456\u0448\u0435",
+        "success": "\u0423\u0441\u043f\u0456\u0445",
+        "proceed": "\u041f\u0440\u043e\u0434\u043e\u0432\u0436\u0438\u0442\u0438",
+        "next": "\u0414\u0430\u043b\u0456",
+        "close": "\u0417\u0430\u043a\u0440\u0438\u0442\u0438",
+        "clickHere": "\u043d\u0430\u0442\u0438\u0441\u043d\u0456\u0442\u044c \u0442\u0443\u0442",
+        "sensitive": "\u0427\u0443\u0442\u043b\u0438\u0432\u0435",
+        "sensitiveContent": "\u0427\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442",
+        "sensitiveContentWarning": "\u0426\u0435\u0439 \u0434\u043e\u043f\u0438\u0441 \u043c\u043e\u0436\u0435 \u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u0447\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442"
     },
     "site": {
-        "terms": "Terms of Use",
-        "privacy": "Privacy Policy"
+        "terms": "\u0423\u043c\u043e\u0432\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f",
+        "privacy": "\u041f\u043e\u043b\u0456\u0442\u0438\u043a\u0430 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0441\u0442\u0456"
     },
     "navmenu": {
-        "search": "Search",
-        "admin": "Admin Dashboard",
-        "homeFeed": "Home Feed",
-        "localFeed": "Local Feed",
-        "globalFeed": "Global Feed",
-        "discover": "Discover",
-        "directMessages": "Direct Messages",
-        "notifications": "Notifications",
-        "groups": "Groups",
-        "stories": "Stories",
-        "profile": "Profile",
-        "drive": "Drive",
-        "settings": "Settings",
-        "compose": "Create New",
-        "logout": "Logout",
-        "about": "About",
-        "help": "Help",
-        "language": "Language",
-        "privacy": "Privacy",
-        "terms": "Terms",
-        "backToPreviousDesign": "Go back to previous design"
+        "search": "\u041f\u043e\u0448\u0443\u043a",
+        "admin": "\u0410\u0434\u043c\u0456\u043d\u043f\u0430\u043d\u0435\u043b\u044c",
+        "homeFeed": "\u0414\u043e\u043c\u0430\u0448\u043d\u044f \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
+        "localFeed": "\u041c\u0456\u0441\u0446\u0435\u0432\u0430 \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
+        "globalFeed": "\u0421\u0432\u0456\u0442\u043e\u0432\u0430 \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
+        "discover": "\u0426\u0456\u043a\u0430\u0432\u0435",
+        "directMessages": "\u041f\u0440\u044f\u043c\u0456 \u043b\u0438\u0441\u0442\u0438",
+        "notifications": "\u0421\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f",
+        "groups": "\u0413\u0440\u0443\u043f\u0438",
+        "stories": "\u0421\u0442\u043e\u0440\u0456",
+        "profile": "\u041f\u0440\u043e\u0444\u0456\u043b\u044c",
+        "drive": "\u0421\u0445\u043e\u0432\u0438\u0449\u0435",
+        "settings": "\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438",
+        "compose": "\u0421\u0442\u0432\u043e\u0440\u0438\u0442\u0438",
+        "logout": "\u0412\u0438\u0439\u0442\u0438",
+        "about": "\u041f\u0440\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a",
+        "help": "\u0414\u043e\u0432\u0456\u0434\u043a\u0430",
+        "language": "\u041c\u043e\u0432\u0430",
+        "privacy": "\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u0456\u0441\u0442\u044c",
+        "terms": "\u0423\u043c\u043e\u0432\u0438",
+        "backToPreviousDesign": "\u041f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u0438 \u043c\u0438\u043d\u0443\u043b\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d"
     },
     "directMessages": {
-        "inbox": "Inbox",
-        "sent": "Sent",
-        "requests": "Requests"
+        "inbox": "\u0412\u0445\u0456\u0434\u043d\u0456",
+        "sent": "\u041d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u0456",
+        "requests": "\u0417\u0430\u043f\u0438\u0442\u0438"
     },
     "notifications": {
-        "liked": "liked your",
-        "commented": "commented on your",
-        "reacted": "reacted to your",
-        "shared": "shared your",
-        "tagged": "tagged you in a",
-        "updatedA": "updated a",
-        "sentA": "sent a",
-        "followed": "followed",
-        "mentioned": "mentioned",
-        "you": "you",
-        "yourApplication": "Your application to join",
-        "applicationApproved": "was approved!",
-        "applicationRejected": "was rejected. You can re-apply to join in 6 months.",
-        "dm": "dm",
-        "groupPost": "group post",
-        "modlog": "modlog",
-        "post": "post",
-        "story": "story"
+        "liked": "\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0443\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f \u043f\u0456\u0434 \u0432\u0430\u0448",
+        "commented": "\u043a\u043e\u043c\u0435\u043d\u0442\u0443\u0454 \u0432\u0430\u0448",
+        "reacted": "\u0440\u0435\u0430\u0433\u0443\u0454 \u043d\u0430 \u0432\u0430\u0448",
+        "shared": "\u043f\u043e\u0448\u0438\u0440\u044e\u0454 \u0432\u0430\u0448",
+        "tagged": "\u043f\u043e\u0437\u043d\u0430\u0447\u0430\u0454 \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437",
+        "updatedA": "\u043e\u043d\u043e\u0432\u043b\u044e\u0454",
+        "sentA": "\u043d\u0430\u0434\u0441\u0438\u043b\u0430\u0454",
+        "followed": "\u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0443\u0454",
+        "mentioned": "\u0437\u0433\u0430\u0434\u0443\u0454",
+        "you": "\u0432\u0430\u0441",
+        "yourApplication": "\u0412\u0430\u0448\u0443 \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u0439\u043d\u0443 \u0437\u0430\u044f\u0432\u043a\u0443",
+        "applicationApproved": "\u043f\u0456\u0434\u0442\u0432\u0435\u0440\u0434\u0436\u0435\u043d\u043e!",
+        "applicationRejected": "\u0432\u0456\u0434\u0445\u0438\u043b\u0435\u043d\u043e. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u0438 \u0441\u043f\u0440\u043e\u0431\u0443 \u0447\u0435\u0440\u0435\u0437 6 \u043c\u0456\u0441\u044f\u0446\u0456\u0432.",
+        "dm": "\u043b\u0438\u0441\u0442",
+        "groupPost": "\u0434\u043e\u043f\u0438\u0441 \u0443 \u0433\u0440\u0443\u043f\u0456",
+        "modlog": "\u043c\u043e\u0434\u0436\u0443\u0440\u043d\u0430\u043b",
+        "post": "\u0434\u043e\u043f\u0438\u0441",
+        "story": "\u0441\u0442\u043e\u0440\u0456",
+        "noneFound": "\u0421\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u044c \u043d\u0435 \u0437\u043d\u0430\u0439\u0434\u0435\u043d\u043e"
     },
     "post": {
-        "shareToFollowers": "Share to followers",
-        "shareToOther": "Share to other",
-        "noLikes": "No likes yet",
-        "uploading": "Uploading"
+        "shareToFollowers": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438 \u0430\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u0457",
+        "shareToOther": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438 \u0456\u043d\u0448\u0438\u043c",
+        "noLikes": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u044c \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430",
+        "uploading": "\u0412\u0438\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f"
     },
     "profile": {
-        "posts": "Posts",
-        "followers": "Followers",
-        "following": "Following",
-        "admin": "Admin",
-        "collections": "Collections",
-        "follow": "Follow",
-        "unfollow": "Unfollow",
-        "editProfile": "Edit Profile",
-        "followRequested": "Follow Requested",
-        "joined": "Joined",
-        "emptyCollections": "We can't seem to find any collections",
-        "emptyPosts": "We can't seem to find any posts"
+        "posts": "\u0414\u043e\u043f\u0438\u0441\u0438",
+        "followers": "\u0410\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u044f",
+        "following": "\u041f\u0456\u0434\u043f\u0438\u0441\u043a\u0438",
+        "admin": "\u0410\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0446\u0456\u044f",
+        "collections": "\u0417\u0431\u0456\u0440\u043a\u0438",
+        "follow": "\u0421\u0442\u0435\u0436\u0438\u0442\u0438",
+        "unfollow": "\u041d\u0435 \u0441\u0442\u0435\u0436\u0438\u0442\u0438",
+        "editProfile": "\u0420\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0444\u0456\u043b\u044c",
+        "followRequested": "\u0417\u0430\u043f\u0438\u0442 \u043d\u0430 \u0441\u0442\u0435\u0436\u0435\u043d\u043d\u044f",
+        "joined": "\u0414\u043e\u043b\u0443\u0447\u0430\u0454\u0442\u044c\u0441\u044f",
+        "emptyCollections": "\u0417\u0431\u0456\u0440\u043e\u043a \u0443 \u0432\u0430\u0441 \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430",
+        "emptyPosts": "\u0414\u043e\u043f\u0438\u0441\u0456\u0432 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430"
     },
     "menu": {
-        "viewPost": "View Post",
-        "viewProfile": "View Profile",
-        "moderationTools": "Moderation Tools",
-        "report": "Report",
-        "archive": "Archive",
-        "unarchive": "Unarchive",
-        "embed": "Embed",
-        "selectOneOption": "Select one of the following options",
-        "unlistFromTimelines": "Unlist from Timelines",
-        "addCW": "Add Content Warning",
-        "removeCW": "Remove Content Warning",
-        "markAsSpammer": "Mark as Spammer",
-        "markAsSpammerText": "Unlist + CW existing and future posts",
-        "spam": "Spam",
-        "sensitive": "Sensitive Content",
-        "abusive": "Abusive or Harmful",
-        "underageAccount": "Underage Account",
-        "copyrightInfringement": "Copyright Infringement",
-        "impersonation": "Impersonation",
-        "scamOrFraud": "Scam or Fraud",
-        "confirmReport": "Confirm Report",
-        "confirmReportText": "Are you sure you want to report this post?",
-        "reportSent": "Report Sent!",
-        "reportSentText": "We have successfully received your report.",
-        "reportSentError": "There was an issue reporting this post.",
-        "modAddCWConfirm": "Are you sure you want to add a content warning to this post?",
-        "modCWSuccess": "Successfully added content warning",
-        "modRemoveCWConfirm": "Are you sure you want to remove the content warning on this post?",
-        "modRemoveCWSuccess": "Successfully removed content warning",
-        "modUnlistConfirm": "Are you sure you want to unlist this post?",
-        "modUnlistSuccess": "Successfully unlisted post",
-        "modMarkAsSpammerConfirm": "Are you sure you want to mark this user as a spammer? All existing and future posts will be unlisted on timelines and a content warning will be applied.",
-        "modMarkAsSpammerSuccess": "Successfully marked account as spammer",
-        "toFollowers": "to Followers",
-        "showCaption": "Show Caption",
-        "showLikes": "Show Likes",
-        "compactMode": "Compact Mode",
-        "embedConfirmText": "By using this embed, you agree to our",
-        "deletePostConfirm": "Are you sure you want to delete this post?",
-        "archivePostConfirm": "Are you sure you want to archive this post?",
-        "unarchivePostConfirm": "Are you sure you want to unarchive this post?"
+        "viewPost": "\u041f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u0434\u043e\u043f\u0438\u0441",
+        "viewProfile": "\u041f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u043f\u0440\u043e\u0444\u0456\u043b\u044c",
+        "moderationTools": "\u0417\u0430\u0441\u043e\u0431\u0438 \u043c\u043e\u0434\u0435\u0440\u0443\u0432\u0430\u043d\u043d\u044f",
+        "report": "\u0421\u043a\u0430\u0440\u0433\u0430",
+        "archive": "\u0410\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438",
+        "unarchive": "\u0420\u043e\u0437\u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438",
+        "embed": "\u0415\u043a\u0441\u043f\u043e\u0440\u0442",
+        "selectOneOption": "\u041e\u0431\u0435\u0440\u0456\u0442\u044c \u043e\u0434\u0438\u043d \u0456\u0437 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0445 \u0432\u0430\u0440\u0456\u0430\u043d\u0442\u0456\u0432",
+        "unlistFromTimelines": "\u0421\u0445\u043e\u0432\u0430\u0442\u0438 \u0437\u0456 \u0441\u0442\u0440\u0456\u0447\u043e\u043a",
+        "addCW": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0433\u0442\u0438 \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442",
+        "removeCW": "\u0412\u0438\u043b\u0443\u0447\u0438\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f",
+        "markAsSpammer": "\u041f\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u044f\u043a \u0441\u043f\u0430\u043c",
+        "markAsSpammerText": "\u0421\u0445\u043e\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0456 \u043c\u0430\u0439\u0431\u0443\u0442\u043d\u0456 \u0434\u043e\u043f\u0438\u0441\u0438, \u0434\u043e\u0434\u0430\u044e\u0447\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f",
+        "spam": "\u0421\u043f\u0430\u043c",
+        "sensitive": "\u0427\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442",
+        "abusive": "\u041e\u0431\u0440\u0430\u0436\u0430\u0454 \u0447\u0438 \u0448\u043a\u043e\u0434\u0438\u0442\u044c",
+        "underageAccount": "\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043d\u0456\u0439 \u0432\u0456\u043a",
+        "copyrightInfringement": "\u041f\u043e\u0440\u0443\u0448\u0443\u0454 \u0430\u0432\u0442\u043e\u0440\u0441\u044c\u043a\u0456 \u043f\u0440\u0430\u0432\u0430",
+        "impersonation": "\u0412\u0434\u0430\u0454 \u043a\u043e\u0433\u043e\u0441\u044c",
+        "scamOrFraud": "\u0428\u0430\u0445\u0440\u0430\u0439\u0441\u0442\u0432\u043e",
+        "confirmReport": "\u041f\u0456\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0438 \u0441\u043a\u0430\u0440\u0433\u0443",
+        "confirmReportText": "\u0422\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u043a\u0430\u0440\u0436\u0438\u0442\u0438\u0441\u044c \u043d\u0430 \u0434\u043e\u043f\u0438\u0441?",
+        "reportSent": "\u0421\u043a\u0430\u0440\u0433\u0443 \u043d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u043e!",
+        "reportSentText": "\u041c\u0438 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u043e\u0442\u0440\u0438\u043c\u0430\u043b\u0438 \u0432\u0430\u0448\u0443 \u0441\u043a\u0430\u0440\u0433\u0443.",
+        "reportSentError": "\u0412\u0438\u043d\u0438\u043a\u043b\u0430 \u043f\u043e\u043c\u0438\u043b\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u0456 \u0441\u043a\u0430\u0440\u0433\u0438.",
+        "modAddCWConfirm": "\u0422\u043e\u0447\u043d\u043e \u0434\u043e\u0434\u0430\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0446\u044c\u043e\u043c\u0443 \u0434\u043e\u043f\u0438\u0441\u0443?",
+        "modCWSuccess": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0434\u043e\u0434\u0430\u043d\u043e",
+        "modRemoveCWConfirm": "\u0422\u043e\u0447\u043d\u043e \u0432\u0438\u043b\u0443\u0447\u0438\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0456\u0437 \u0446\u044c\u043e\u0433\u043e \u0434\u043e\u043f\u0438\u0441\u0443?",
+        "modRemoveCWSuccess": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0432\u0438\u043b\u0443\u0447\u0435\u043d\u043e",
+        "modUnlistConfirm": "\u0422\u043e\u0447\u043d\u043e \u0441\u0445\u043e\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0434\u043e\u043f\u0438\u0441?",
+        "modUnlistSuccess": "\u0414\u043e\u043f\u0438\u0441 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0441\u0445\u043e\u0432\u0430\u043d\u043e",
+        "modMarkAsSpammerConfirm": "\u0422\u043e\u0447\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0446\u0435\u0439 \u043e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0441 \u044f\u043a \u0441\u043f\u0430\u043c? \u0423\u0441\u0456 \u043d\u0430\u044f\u0432\u043d\u0456 \u0439 \u043c\u0430\u0439\u0431\u0443\u0442\u043d\u0456 \u0434\u043e\u043f\u0438\u0441\u0438 \u0431\u0443\u0434\u0435 \u0441\u0445\u043e\u0432\u0430\u043d\u043e \u0437\u0456 \u0441\u0442\u0440\u0456\u0447\u043e\u043a, \u0456 \u0457\u043c \u0431\u0443\u0434\u0435 \u0434\u043e\u0434\u0430\u043d\u043e \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442.",
+        "modMarkAsSpammerSuccess": "\u041e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0441 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u044f\u043a \u0441\u043f\u0430\u043c",
+        "toFollowers": "\u0434\u043e \u0430\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u0457",
+        "showCaption": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 \u043f\u0456\u0434\u043f\u0438\u0441",
+        "showLikes": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 \u0432\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f",
+        "compactMode": "\u041a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0438\u0439 \u0440\u0435\u0436\u0438\u043c",
+        "embedConfirmText": "\u0415\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u044e\u0447\u0438 \u043a\u0443\u0434\u0438\u0441\u044c \u0434\u043e\u043f\u0438\u0441, \u0432\u0438 \u043f\u043e\u0433\u043e\u0434\u0436\u0443\u0454\u0442\u0435 \u043d\u0430\u0448\u0456",
+        "deletePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0432\u0438\u0434\u0430\u043b\u0438\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?",
+        "archivePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?",
+        "unarchivePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0440\u043e\u0437\u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?"
     },
     "story": {
-        "add": "Add Story"
+        "add": "\u0414\u043e\u0434\u0430\u0442\u0438 \u0441\u0442\u043e\u0440\u0456"
     },
     "timeline": {
-        "peopleYouMayKnow": "People you may know"
+        "peopleYouMayKnow": "\u0419\u043c\u043e\u0432\u0456\u0440\u043d\u0456 \u0437\u043d\u0430\u0439\u043e\u043c\u0456",
+        "onboarding": {
+            "welcome": "\u0412\u0456\u0442\u0430\u0454\u043c\u043e",
+            "thisIsYourHomeFeed": "\u0426\u0435 \u0432\u0430\u0448\u0430 \u0434\u043e\u043c\u0430\u0448\u043d\u044f \u0441\u0442\u0440\u0456\u0447\u043a\u0430 \u2014 \u0442\u0443\u0442 \u0431\u0443\u0434\u0443\u0442\u044c \u0434\u043e\u043f\u0438\u0441\u0438 \u0432\u0456\u0434 \u043e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0445 \u0437\u0430\u043f\u0438\u0441\u0456\u0432, \u0437\u0430 \u044f\u043a\u0438\u043c\u0438 \u0432\u0438 \u0441\u0442\u0435\u0436\u0438\u0442\u0435, \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0434\u043e\u0434\u0430\u043d\u043d\u044f.",
+            "letUsHelpYouFind": "\u041c\u043e\u0436\u0435\u043c\u043e \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0442\u0438 \u0432\u0430\u043c \u0437\u043d\u0430\u0439\u0442\u0438 \u0446\u0456\u043a\u0430\u0432\u0438\u0445 \u043b\u044e\u0434\u0435\u0439, \u0437\u0430 \u044f\u043a\u0438\u043c\u0438 \u0432\u0430\u0440\u0442\u043e \u0441\u0442\u0435\u0436\u0438\u0442\u0438",
+            "refreshFeed": "\u041e\u043d\u043e\u0432\u0438\u0442\u0438 \u043c\u043e\u044e \u0441\u0442\u0440\u0456\u0447\u043a\u0443"
+        }
     },
     "hashtags": {
-        "emptyFeed": "We can't seem to find any posts for this hashtag"
+        "emptyFeed": "\u0414\u043e\u043f\u0438\u0441\u0456\u0432 \u0456\u0437 \u0446\u0438\u043c \u0445\u0435\u0448\u0442\u0435\u0433\u043e\u043c \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430"
+    },
+    "report": {
+        "report": "\u0421\u043a\u0430\u0440\u0433\u0430",
+        "selectReason": "\u041e\u0431\u0435\u0440\u0456\u0442\u044c \u043f\u0456\u0434\u0441\u0442\u0430\u0432\u0443",
+        "reported": "\u0421\u043a\u0430\u0440\u0433\u0443 \u043d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u043e",
+        "sendingReport": "\u041d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0441\u043a\u0430\u0440\u0433\u0438",
+        "thanksMsg": "\u0414\u044f\u043a\u0443\u0454\u043c\u043e \u0437\u0430 \u0441\u043a\u0430\u0440\u0433\u0443: \u0432\u0438 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454\u0442\u0435 \u0432\u0431\u0435\u0437\u043f\u0435\u0447\u0438\u0442\u0438 \u043d\u0430\u0448\u0443 \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0442\u0443!",
+        "contactAdminMsg": "\u042f\u043a\u0449\u043e \u0431\u0430\u0436\u0430\u0454\u0442\u0435 \u0441\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0443\u0432\u0430\u0442\u0438 \u0437 \u0430\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0446\u0456\u0454\u044e \u043f\u0440\u043e \u0446\u0435\u0439 \u0434\u043e\u043f\u0438\u0441 \u0447\u0438 \u0441\u043a\u0430\u0440\u0433\u0443"
     }
 }

resources/assets/sass/spa.scss

@@ -1,18 +1,123 @@
 @import "lib/ibmplexsans";
 
-body {
-	background: rgba(243,244,246,1);
-	font-family: 'IBM Plex Sans', sans-serif;
+:root {
+	--light: #fff;
+	--dark: #000;
+	--body-bg: rgba(243,244,246,1);
+	--body-color: #212529;
+	--nav-bg: #fff;
+	--bg-light: #f8f9fa;
+
+	--primary: #3B82F6;
+	--light-gray: #f8f9fa;
+	--text-lighter: #94a3b8;
+
+	--card-bg: #fff;
+	--light-hover-bg: #f9fafb;
+	--btn-light-border: #fff;
+	--input-border: #e2e8f0;
+	--comment-bg: #eff2f5;
+	--border-color: #dee2e6;
+	--card-header-accent: #f9fafb;
+
+	--dropdown-item-hover-bg: #e9ecef;
+	--dropdown-item-hover-color: #16181b;
+	--dropdown-item-color: #64748b;
+	--dropdown-item-active-color: #334155;
 }
 
-.primary {
-	color: #3B82F6;
+@media (prefers-color-scheme: dark) {
+	:root {
+		--light: #000;
+		--dark: #fff;
+		--body-bg: #000;
+		--body-color: #818181;
+		--nav-bg: #000;
+		--bg-light: #212124;
+
+		--light-gray: #212124;
+		--text-lighter: #818181;
+
+		--card-bg: #161618;
+		--light-hover-bg: #212124;
+		--btn-light-border: #161618;
+		--input-border: #161618;
+		--comment-bg: #212124;
+		--border-color: #212124;
+		--card-header-accent: #212124;
+
+		--dropdown-item-hover-bg: #000;
+		--dropdown-item-hover-color: #818181;
+		--dropdown-item-color: #64748b;
+		--dropdown-item-active-color: #fff;
+	}
+}
+
+.force-light-mode {
+	--light: #fff;
+	--dark: #000;
+	--body-bg: rgba(243,244,246,1);
+	--body-color: #212529;
+	--nav-bg: #fff;
+	--bg-light: #f8f9fa;
+
+	--primary: #3B82F6;
+	--light-gray: #f8f9fa;
+	--text-lighter: #94a3b8;
+
+	--card-bg: #fff;
+	--light-hover-bg: #f9fafb;
+	--btn-light-border: #fff;
+	--input-border: #e2e8f0;
+	--comment-bg: #eff2f5;
+	--border-color: #dee2e6;
+	--card-header-accent: #f9fafb;
+
+	--dropdown-item-hover-bg: #e9ecef;
+	--dropdown-item-hover-color: #16181b;
+	--dropdown-item-color: #64748b;
+	--dropdown-item-active-color: #334155;
+}
+
+.force-dark-mode {
+	--light: #000;
+	--dark: #fff;
+	--body-bg: #000;
+	--body-color: #818181;
+	--nav-bg: #000;
+	--bg-light: #212124;
+
+	--light-gray: #212124;
+	--text-lighter: #818181;
+
+	--card-bg: #161618;
+	--light-hover-bg: #212124;
+	--btn-light-border: #161618;
+	--input-border: #161618;
+	--comment-bg: #212124;
+	--border-color: #212124;
+	--card-header-accent: #212124;
+
+	--dropdown-item-hover-bg: #000;
+	--dropdown-item-hover-color: #818181;
+	--dropdown-item-color: #64748b;
+	--dropdown-item-active-color: #b3b3b3;
+}
+
+body {
+	background: var(--body-bg);
+	font-family: 'IBM Plex Sans', sans-serif;
+	color: var(--body-color);
 }
 
 .web-wrapper {
 	margin-bottom: 10rem;
 }
 
+.container-fluid {
+	max-width: 1440px !important;
+}
+
 .jumbotron {
 	border-radius: 18px;
 }
@@ -27,23 +132,158 @@ body {
 	}
 }
 
+.navbar-laravel {
+	background-color: var(--nav-bg);
+}
+
 .sticky-top {
 	z-index: 2;
 }
 
-.container-fluid {
-	max-width: 1440px !important;
+.navbar-light .navbar-brand {
+	color: var(--dark);
+}
+
+.primary {
+	color: var(--primary);
 }
 
 .text-lighter {
-	color: #94a3b8 !important;
+	color: var(--text-lighter) !important;
+}
+
+.text-dark {
+    color: var(--body-color) !important;
+
+    &:hover {
+    	color: var(--dark) !important;
+    }
+}
+
+a.text-dark:hover {
+    color: var(--dark) !important;
 }
 
 .badge-primary {
-	background-color: #3B82F6;
+	background-color: var(--primary);
 }
 
-.btn-primary.primary {
-	background-color: #3B82F6;
+.btn-primary {
+	background-color: var(--primary);
 	color: #fff !important;
 }
+
+.btn-outline-light {
+	border-color: var(--light-gray);
+}
+
+.border {
+    border: 1px solid var(--border-color) !important;
+}
+
+.bg-white,
+.bg-light {
+	background-color: var(--bg-light) !important;
+	border-color: var(--bg-light) !important;
+}
+
+.btn-light {
+	background-color: var(--light-gray);
+	border-color: var(--btn-light-border);
+	color: var(--body-color);
+
+	&:hover {
+		color: var(--body-color);
+		background-color: var(--card-bg);
+		border-color: var(--btn-light-border);
+	}
+}
+
+.autocomplete-input {
+	border: 1px solid var(--light-gray) !important;
+	color: var(--body-color);
+}
+
+.autocomplete-result-list {
+	background: var(--light) !important;
+}
+
+.dropdown-menu,
+span.twitter-typeahead .tt-menu,
+.form-control {
+	border: 1px solid var(--border-color) !important;
+	color: var(--body-color);
+	background-color: var(--card-bg);
+}
+
+.tribute-container li,
+.dropdown-item,
+span.twitter-typeahead .tt-suggestion {
+	color: var(--body-color);
+}
+
+.dropdown-item:hover,
+span.twitter-typeahead .tt-suggestion:hover,
+.dropdown-item:focus,
+span.twitter-typeahead .tt-suggestion:focus {
+	color: var(--dropdown-item-hover-color);
+    background-color: var(--dropdown-item-hover-bg);
+    text-decoration: none;
+}
+
+.popover,
+.modal-content,
+.form-control:focus,
+.tribute-container ul,
+.list-group-item,
+.card,
+.card-header,
+.card-footer,
+.ph-item {
+	background-color: var(--card-bg);
+}
+
+.badge-light,
+.breadcrumb,
+.ph-avatar,
+.ph-picture,
+.ph-row div {
+	background-color: var(--light-gray);
+}
+
+.card-header,
+.border-top,
+.border-bottom {
+	border-color: var(--border-color) !important;
+}
+
+.modal-header {
+	border-color: var(--border-color);
+}
+
+.compose-action:hover {
+	background-color: var(--light-gray) !important;
+}
+
+.dropdown-divider {
+	border-color: var(--dropdown-item-hover-bg);
+}
+
+.metro-nav {
+	&.flex-column {
+		background-color: var(--card-bg);
+
+		.nav-item {
+			.nav-link:hover {
+				background-color: var(--light-hover-bg);
+			}
+		}
+	}
+}
+
+.child-reply-form {
+	.form-control {
+		border-color: var(--input-border);
+		color: var(--body-color);
+	}
+}