🎨

src/client/app/desktop/views/components/calendar.vue

@@ -133,7 +133,8 @@ export default Vue.extend({
 root(isDark)
 	color isDark ? #c5ced6 : #777
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&[data-melt]

src/client/app/desktop/views/components/note-detail.vue

@@ -231,7 +231,8 @@ root(isDark)
 	overflow hidden
 	text-align left
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 
 	> .read-more
 		display block

src/client/app/desktop/views/components/settings.vue

@@ -60,6 +60,8 @@
 				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
+				<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
+				<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
 				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
 				<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
 				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
@@ -316,6 +318,16 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
 		},
 
+		useShadow: {
+			get() { return this.$store.state.settings.useShadow; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); }
+		},
+
+		roundedCorners: {
+			get() { return this.$store.state.settings.roundedCorners; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
+		},
+
 		fetchOnScroll: {
 			get() { return this.$store.state.settings.fetchOnScroll; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }

src/client/app/desktop/views/components/timeline.vue

@@ -179,7 +179,9 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
 
 	> header
 		padding 0 8px

src/client/app/desktop/views/components/ui.header.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="header">
+<div class="header" :style="style">
 	<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
 	<mk-special-message/>
 	<div class="main" ref="main">
@@ -54,6 +54,14 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		style(): any {
+			return {
+				'box-shadow': this.$store.state.settings.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
+			};
+		}
+	},
+
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
 
@@ -124,7 +132,6 @@ root(isDark)
 	top 0
 	z-index 1000
 	width 100%
-	box-shadow 0 0px 8px rgba(#000, 0.2)
 
 	> .warn
 		display block

src/client/app/desktop/views/components/widget-container.vue

@@ -36,7 +36,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&.naked