Skip to content
This repository was archived by the owner on Nov 3, 2025. It is now read-only.

Commit 9633d4a

Browse files
ihatebluebihateblueb
committed
frontend: themes
1 parent 8e3a6a2 commit 9633d4a

14 files changed

Lines changed: 294 additions & 134 deletions

File tree

‎packages/frontend/src/app.scss‎

Lines changed: 1 addition & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,6 @@
11
@import url('$lib/fonts/inter.css');
22

33
:root {
4-
$bg1: #140e1b;
5-
$bg2: #1a1423;
6-
$bg3: #261e37;
7-
$bg4: #3f325a;
8-
9-
$tx1: #f3efff;
10-
$tx2: #d8cdf1;
11-
$tx3: #9688bd;
12-
13-
$ac1: #865fdf;
14-
15-
$success: #38b84d;
16-
$warn: #e39244;
17-
$danger: #e65448;
18-
19-
$repeat: #3eca55;
20-
$like: #eda437;
21-
22-
/*
23-
colors
24-
*/
25-
26-
// background
27-
28-
--bg1: #{$bg1};
29-
--bg2: #{$bg2};
30-
--bg3: #{$bg3};
31-
--bg4: #{$bg4};
32-
33-
--bg1-25: #{rgba($bg1, 0.25)};
34-
--bg2-25: #{rgba($bg2, 0.25)};
35-
--bg3-25: #{rgba($bg3, 0.25)};
36-
--bg4-25: #{rgba($bg4, 0.25)};
37-
38-
--bg1-50: #{rgba($bg1, 0.5)};
39-
--bg2-50: #{rgba($bg2, 0.5)};
40-
--bg3-50: #{rgba($bg3, 0.5)};
41-
--bg4-50: #{rgba($bg4, 0.5)};
42-
43-
--bg1-75: #{rgba($bg1, 0.75)};
44-
--bg2-75: #{rgba($bg2, 0.75)};
45-
--bg3-75: #{rgba($bg3, 0.75)};
46-
--bg4-75: #{rgba($bg4, 0.75)};
47-
48-
--bg1-99: #{rgba($bg1, 0.99)};
49-
--bg2-99: #{rgba($bg2, 0.99)};
50-
--bg3-99: #{rgba($bg3, 0.99)};
51-
--bg4-99: #{rgba($bg4, 0.99)};
52-
53-
// text
54-
55-
--tx1: #{$tx1};
56-
--tx2: #{$tx2};
57-
--tx3: #{$tx3};
58-
59-
--tx1-25: #{rgba($tx1, 0.25)};
60-
--tx2-25: #{rgba($tx2, 0.25)};
61-
--tx3-25: #{rgba($tx3, 0.25)};
62-
63-
--tx1-50: #{rgba($tx1, 0.5)};
64-
--tx2-50: #{rgba($tx2, 0.5)};
65-
--tx3-50: #{rgba($tx3, 0.5)};
66-
67-
--tx1-75: #{rgba($tx1, 0.75)};
68-
--tx2-75: #{rgba($tx2, 0.75)};
69-
--tx3-75: #{rgba($tx3, 0.75)};
70-
71-
// accent
72-
73-
--ac1: #{$ac1};
74-
--ac1-25: #{rgba($ac1, 0.25)};
75-
--ac1-50: #{rgba($ac1, 0.5)};
76-
--ac1-75: #{rgba($ac1, 0.75)};
77-
78-
--success: #{$success};
79-
--success-25: #{rgba($success, 0.25)};
80-
--success-50: #{rgba($success, 0.5)};
81-
--success-75: #{rgba($success, 0.75)};
82-
83-
--warn: #{$warn};
84-
--warn-25: #{rgba($warn, 0.25)};
85-
--warn-50: #{rgba($warn, 0.5)};
86-
--warn-75: #{rgba($warn, 0.75)};
87-
88-
--danger: #{$danger};
89-
--danger-25: #{rgba($danger, 0.25)};
90-
--danger-50: #{rgba($danger, 0.5)};
91-
--danger-75: #{rgba($danger, 0.75)};
92-
93-
--repeat: #{$repeat};
94-
--repeat-05: #{rgba($repeat, 0.1)};
95-
--repeat-25: #{rgba($repeat, 0.25)};
96-
--repeat-50: #{rgba($repeat, 0.5)};
97-
--repeat-75: #{rgba($repeat, 0.75)};
98-
99-
--like: #{$like};
100-
--like-05: #{rgba($like, 0.1)};
101-
--like-25: #{rgba($like, 0.25)};
102-
--like-50: #{rgba($like, 0.5)};
103-
--like-75: #{rgba($like, 0.75)};
104-
105-
/*
106-
measurements
107-
*/
108-
109-
// border radius
1104
--br-mn: 0px;
1115
--br-xxs: 2px;
1126
--br-xs: 4px;
@@ -117,7 +11,6 @@
11711
--br-xxl: 18px;
11812
--br-mx: 99999px;
11913

120-
// font
12114
--fs-xxs: 8px;
12215
--fs-xs: 10px;
12316
--fs-sm: 12px;
@@ -129,17 +22,12 @@
12922
--font: Inter, serif;
13023
--font-features: 'cv05', 'cv08';
13124

132-
/*
133-
misc
134-
*/
135-
13625
--blur-xs: 2px;
13726
--blur-sm: 4px;
13827
--blur-md: 8px;
13928
--blur-lg: 12px;
14029
--blur-xl: 20px;
14130

142-
// trying rem? maybe it'll help the effect looking drastically different on some screens
14331
--funky-effect:
14432
inset 0 -0.1rem 2.5px #00000020, inset 0 0.035rem 1px #ffffff05,
14533
inset 0 0.055rem 2.5px #ffffff05;
@@ -149,6 +37,7 @@ html {
14937
font-family: var(--font);
15038
font-feature-settings: var(--font-features);
15139
font-size: var(--fs-md);
40+
background-color: var(--bg1);
15241
color: var(--tx2);
15342
}
15443

‎packages/frontend/src/global.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
type Theme = {
2+
id: string;
3+
name: string;
4+
colorScheme: string;
5+
};

‎packages/frontend/src/lib/components/Modal.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117
.text {
118118
flex-direction: column;
119119
gap: 5px;
120+
margin-bottom: 10px;
120121
}
121122
122123
.slot {

‎packages/frontend/src/lib/localstore.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,19 @@ let defaults = {
2525
},
2626
colorScheme: {
2727
type: 'string',
28-
value: ''
28+
value: 'light'
29+
},
30+
adjustColorSchemeToBrowser: {
31+
type: 'boolean',
32+
value: true
2933
},
30-
theme: {
34+
themeLight: {
3135
type: 'string',
32-
value: ''
36+
value: 'wisteria'
37+
},
38+
themeDark: {
39+
type: 'string',
40+
value: 'purpura'
3341
},
3442

3543
self: {

‎packages/frontend/src/lib/store.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { writable, type Writable } from 'svelte/store';
33
const appReload = writable(false);
44
const selfRefresh = writable(false);
55
const viewRefresh = writable(false);
6+
const themeRefresh = writable(false);
67

78
const showCompose = writable(false);
89
const showDrive = writable(false);
@@ -18,6 +19,7 @@ class Store {
1819
public appReload = appReload; // full browser reload
1920
public selfRefresh = selfRefresh; // refresh self widgets
2021
public viewRefresh = viewRefresh; // refresh widgets, timeline, note or user page component
22+
public themeRefresh = themeRefresh; // refresh theme
2123

2224
public showCompose = showCompose;
2325
public showDrive = showDrive;

‎packages/frontend/src/lib/themes/index.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"wisteria": {
3+
"name": "Wisteria",
4+
"colorScheme": "light"
5+
},
6+
"mi-cherry": {
7+
"name": "Misskey Cherry",
8+
"colorScheme": "light"
9+
},
10+
"purpura": {
11+
"name": "Purpura",
12+
"colorScheme": "dark"
13+
},
14+
"mi-botanical": {
15+
"name": "Misskey Botanical",
16+
"colorScheme": "dark"
17+
}
18+
}

‎packages/frontend/src/lib/themes/mi-botanical.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"bg1": "#252624",
3+
"bg2": "#2f2f2c",
4+
"bg3": "#424242",
5+
"bg4": "#525252",
6+
7+
"tx1": "#d8d4c7",
8+
"tx2": "#ccc5ad",
9+
"tx3": "#d3c596",
10+
11+
"ac1": "#77b58c",
12+
13+
"success": "#86b300",
14+
"warn": "#ecb637",
15+
"danger": "#ec4137",
16+
17+
"like": "#ecb637",
18+
"repeat": "#86b300"
19+
}

‎packages/frontend/src/lib/themes/mi-cherry.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"bg1": "#fef8f9",
3+
"bg2": "#fff0f2",
4+
"bg3": "#ffe0e6",
5+
"bg4": "#ffccd5",
6+
7+
"tx1": "#800b16",
8+
"tx2": "#980d1a",
9+
"tx3": "#a60f1d",
10+
11+
"ac1": "#db6072",
12+
13+
"success": "#38b84d",
14+
"warn": "#e39244",
15+
"danger": "#dc3d30",
16+
17+
"like": "#eda437",
18+
"repeat": "#3eca55"
19+
}

‎packages/frontend/src/lib/themes/purpura.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"bg1": "#140e1b",
3+
"bg2": "#1a1423",
4+
"bg3": "#261e37",
5+
"bg4": "#3f325a",
6+
7+
"tx1": "#f3efff",
8+
"tx2": "#d8cdf1",
9+
"tx3": "#9688bd",
10+
11+
"ac1": "#865fdf",
12+
13+
"success": "#38b84d",
14+
"warn": "#e39244",
15+
"danger": "#e65448",
16+
17+
"like": "#eda437",
18+
"repeat": "#3eca55"
19+
}

‎packages/frontend/src/lib/themes/wisteria.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"bg1": "#f7f3ff",
3+
"bg2": "#efebfa",
4+
"bg3": "#ccc5db",
5+
"bg4": "#b8afcc",
6+
7+
"tx1": "#000000",
8+
"tx2": "#0f0a15",
9+
"tx3": "#191220",
10+
11+
"ac1": "#865fdf",
12+
13+
"success": "#38b84d",
14+
"warn": "#e39244",
15+
"danger": "#dc3d30",
16+
17+
"like": "#eda437",
18+
"repeat": "#3eca55"
19+
}

0 commit comments

Comments
 (0)