diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/common.scss b/app/javascript/skins/glitch/solarpunk/solarpunk/common.scss
new file mode 100644
index 0000000..fbd81b9
--- /dev/null
+++ b/app/javascript/skins/glitch/solarpunk/solarpunk/common.scss
@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'flavours/glitch/styles/index';
+@import 'diff';
diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/diff.scss b/app/javascript/skins/glitch/solarpunk/solarpunk/diff.scss
new file mode 100644
index 0000000..feb03f2
--- /dev/null
+++ b/app/javascript/skins/glitch/solarpunk/solarpunk/diff.scss
@@ -0,0 +1,139 @@
+@import 'variables';
+
+body {
+ background-color: $solar-bg;
+}
+
+.media-modal__overlay
+.picture-in-picture__footer
+button.icon-button {
+ i.fa-retweet {
+ background: url("data:image/svg+xml;utf8,") no-repeat;
+ }
+
+ &.reblogPrivate i.fa-retweet {
+ background: url("data:image/svg+xml;utf8,");
+ }
+
+ i.fa-star {
+ background: url("data:image/svg+xml;utf8,") no-repeat top;
+ }
+}
+
+.media-modal__overlay
+.picture-in-picture__footer
+button.icon-button.active {
+ &.reblogPrivate.active i.fa-retweet,
+ i.fa-retweet {
+ background: url("data:image/svg+xml;utf8,") no-repeat;
+ background-position: 50% 100%;
+ }
+
+ i.fa-star {
+ background-position: 50% 100%;
+ }
+}
+
+button.icon-button {
+ &:hover i.fa-retweet,
+ &.reblogPrivate.active i.fa-retweet,
+ &:hover.reblogPrivate.active i.fa-retweet,
+ i.fa-retweet {
+ background: url("data:image/svg+xml;utf8,") no-repeat;
+ width: 19px;
+ height: 18.5px;
+ transition: background-position .6s steps(4);
+ }
+
+ &.reblogPrivate:hover i.fa-retweet,
+ &.reblogPrivate i.fa-retweet {
+ background: url("data:image/svg+xml;utf8,");
+ }
+
+ &.reblogPrivate.active i.fa-retweet,
+ &:hover.reblogPrivate.active i.fa-retweet {
+ background-position: bottom;
+ }
+
+ &:hover i.fa-star,
+ i.fa-star {
+ background: url("data:image/svg+xml;utf8,") no-repeat top;
+ height: 21.4px;
+ margin: 1px 0;
+ transition: background-position .6s steps(4);
+ }
+
+ &.active i.fa-star {
+ background-position: 50% 100%;
+ }
+
+ /* Remove the font-awesome icon */
+ .fa-star::before {
+ content: "";
+ }
+
+ &.disabled {
+ i.fa-retweet,
+ &:hover i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+ }
+ }
+
+ &.active i.fa-retweet {
+ background-position: 50% 100%;
+ }
+}
+
+.no-reduce-motion .icon-button.star-icon {
+ &.deactivate > .fa-star,
+ &.activate > .fa-star {
+ animation: none;
+ -webkit-animation: none;
+ }
+}
+
+.detailed-status__link {
+ .fa-star {
+ background: url("data:image/svg+xml;utf8,") no-repeat top;
+ width: 12px;
+ height: 13px;
+ margin-bottom: -1px;
+
+ &::before {
+ content: "";
+ }
+ }
+
+ .fa-retweet {
+ background: url("data:image/svg+xml;utf8,") no-repeat;
+ width: 13px;
+ height: 14px;
+ margin-bottom: -1px;
+
+ &::before {
+ content: "";
+ }
+ }
+}
+
+.drawer .drawer__inner {
+ background: lighten($ui-base-color, 13%) url("data:image/svg+xml;utf8,") 0 9px;
+ background-size: 100%;
+}
+
+.drawer__inner__mastodon {
+ background-color: transparent !important;
+}
+
+.single-column,
+.auto-columns {
+ .column-header {
+ background: lighten($ui-base-color, 4%) url("data:image/svg+xml;utf8,") 2px 2px;
+ background-size: 44.25px;
+ }
+
+ .column-header__button,
+ .column-header__back-button {
+ background-color: transparent;
+ }
+}
diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/names.yml b/app/javascript/skins/glitch/solarpunk/solarpunk/names.yml
new file mode 100644
index 0000000..7f7332d
--- /dev/null
+++ b/app/javascript/skins/glitch/solarpunk/solarpunk/names.yml
@@ -0,0 +1,4 @@
+en:
+ skins:
+ glitch:
+ solarpunk: Solarpunk
diff --git a/app/javascript/skins/glitch/solarpunk/solarpunk/variables.scss b/app/javascript/skins/glitch/solarpunk/solarpunk/variables.scss
new file mode 100644
index 0000000..038f6d1
--- /dev/null
+++ b/app/javascript/skins/glitch/solarpunk/solarpunk/variables.scss
@@ -0,0 +1,75 @@
+$black: #000000;
+$white: #ffffff;
+$success-green: #79bd9a;
+$error-red: #df405a;
+$warning-red: #ff5050;
+$gold-star: #ca8f04;
+
+// Values from the classic Mastodon UI
+$classic-base-color: #282c37; // Midnight Express
+$classic-primary-color: #9baec8; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #2b90d9; // Summer Sky
+
+// our theme customizations
+$solar-highlight-color: #378d2a;
+$solar-bg: #060e0c; // dark green
+$solar-recycling: #009700;
+$solar-panel-header: #202c4d;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+$ui-base-color: #161c2c;
+$ui-base-lighter-color: #5370a2 !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;
+$ui-secondary-color: $classic-secondary-color !default;
+$ui-highlight-color: $classic-highlight-color !default;
+
+$ui-highlight-color: $solar-highlight-color;
+
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+$action-button-color-lighter: lighten($ui-base-lighter-color, 10%) !default;
+$action-button-color-darker: darken($ui-base-lighter-color, 5%) !default;
+
+$passive-text-color: $gold-star !default;
+$active-passive-text-color: $success-green !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+$solar-disabled: darken($action-button-color, 10%) !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+// Avatar border size (8% default, 100% for rounded avatars)
+$ui-avatar-border-size: 8%;
+
+// More variables
+$dismiss-overlay-width: 4rem;
+