SWREI/switched
0
0
Fork 0
Code

テーマに関して強化

Browse Source
This commit is contained in:
syuilo 2018-10-02 16:04:31 +09:00
parent f2b9863eea
commit 6b96bd0185
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
15 changed files with 569 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -134,6 +134,8 @@
"is-url": "1.2.4",
"js-yaml": "3.12.0",
"jsdom": "11.12.0",
"json5": "2.1.0",
"json5-loader": "1.0.1",
"koa": "2.5.1",
"koa-bodyparser": "4.2.1",
"koa-compress": "3.0.0",

3
src/client/app/app.vue
View File

@ -5,9 +5,6 @@
<script lang="ts">
import Vue from 'vue';
import { url, lang } from './config';
import applyTheme from './common/scripts/theme';
const darkTheme = require('../theme/dark');
const halloweenTheme = require('../theme/halloween');
export default Vue.extend({
computed: {

1
src/client/app/boot.js
View File

@ -24,7 +24,6 @@
const theme = localStorage.getItem('theme');
if (theme) {
Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
if (k == 'meta') return;
document.documentElement.style.setProperty(`--${k}`, v.toString());
});
}

103
src/client/app/common/views/components/theme.vue
View File

@ -3,14 +3,14 @@
<label>
<span>%i18n:@light-theme%</span>
<ui-select v-model="light" placeholder="%i18n:@light-theme%">
<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
</ui-select>
</label>
<label>
<span>%i18n:@dark-theme%</span>
<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
</ui-select>
</label>
@ -53,7 +53,7 @@
<details>
<summary>%i18n:@installed-themes%</summary>
<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
<option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</ui-select>
<ui-textarea readonly :value="selectedInstalledThemeCode">
<span>%i18n:@theme-code%</span>
@ -65,10 +65,25 @@
<script lang="ts">
import Vue from 'vue';
import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
import { Chrome } from 'vue-color';
import * as uuid from 'uuid';
import * as tinycolor from 'tinycolor2';
import * as JSON5 from 'json5';
// 後方互換性のため
function convertOldThemedefinition(t) {
const t2 = {
id: t.meta.id,
name: t.meta.name,
author: t.meta.author,
base: t.meta.base,
vars: t.meta.vars,
props: t
};
delete t2.props.meta;
return t2;
}
export default Vue.extend({
components: {
@ -81,18 +96,18 @@ export default Vue.extend({
selectedInstalledTheme: null,
myThemeBase: 'light',
myThemeName: '',
myThemePrimary: lightTheme.meta.vars.primary,
myThemeSecondary: lightTheme.meta.vars.secondary,
myThemeText: lightTheme.meta.vars.text
myThemePrimary: lightTheme.vars.primary,
myThemeSecondary: lightTheme.vars.secondary,
myThemeText: lightTheme.vars.text
};
},
computed: {
themes(): any {
themes(): Theme[] {
return this.$store.state.device.themes.concat(builtinThemes);
},
installedThemes(): any {
installedThemes(): Theme[] {
return this.$store.state.device.themes;
},
@ -108,20 +123,18 @@ export default Vue.extend({
selectedInstalledThemeCode() {
if (this.selectedInstalledTheme == null) return null;
return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme));
return JSON5.stringify(this.installedThemes.find(x => x.id == this.selectedInstalledTheme), null, '\t');
},
myTheme(): any {
return {
meta: {
name: this.myThemeName,
author: this.$store.state.i.name,
base: this.myThemeBase,
vars: {
primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
}
name: this.myThemeName,
author: this.$store.state.i.name,
base: this.myThemeBase,
vars: {
primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
}
};
}
@ -130,37 +143,67 @@ export default Vue.extend({
watch: {
myThemeBase(v) {
const theme = v == 'light' ? lightTheme : darkTheme;
this.myThemePrimary = theme.meta.vars.primary;
this.myThemeSecondary = theme.meta.vars.secondary;
this.myThemeText = theme.meta.vars.text;
this.myThemePrimary = theme.vars.primary;
this.myThemeSecondary = theme.vars.secondary;
this.myThemeText = theme.vars.text;
}
},
beforeCreate() {
// migrate old theme definitions
// 後方互換性のため
this.$store.commit('device/set', {
key: 'themes', value: this.$store.state.device.themes.map(t => {
if (t.id == null) {
return convertOldThemedefinition(t);
} else {
return t;
}
})
});
},
methods: {
install() {
const theme = JSON.parse(this.installThemeCode);
if (theme.meta == null || theme.meta.id == null) {
let theme;
try {
theme = JSON5.parse(this.installThemeCode);
} catch (e) {
alert('%i18n:@invalid-theme%');
return;
}
if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) {
// 後方互換性のため
if (theme.id == null && theme.meta != null) {
theme = convertOldThemedefinition(theme);
}
if (theme.id == null) {
alert('%i18n:@invalid-theme%');
return;
}
if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
alert('%i18n:@already-installed%');
return;
}
const themes = this.$store.state.device.themes.concat(theme);
this.$store.commit('device/set', {
key: 'themes', value: themes
});
alert('%i18n:@installed%'.replace('{}', theme.meta.name));
alert('%i18n:@installed%'.replace('{}', theme.name));
},
uninstall() {
const theme = this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme);
const themes = this.$store.state.device.themes.filter(t => t.meta.id != theme.meta.id);
const theme = this.installedThemes.find(x => x.id == this.selectedInstalledTheme);
const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
this.$store.commit('device/set', {
key: 'themes', value: themes
});
alert('%i18n:@uninstalled%'.replace('{}', theme.meta.name));
alert('%i18n:@uninstalled%'.replace('{}', theme.name));
},
preview() {
@ -169,7 +212,7 @@ export default Vue.extend({
gen() {
const theme = this.myTheme;
theme.meta.id = uuid();
theme.id = uuid();
const themes = this.$store.state.device.themes.concat(theme);
this.$store.commit('device/set', {
key: 'themes', value: themes

11
src/client/app/init.ts
View File

@ -14,8 +14,7 @@ import App from './app.vue';
import checkForUpdate from './common/scripts/check-for-update';
import MiOS, { API } from './mios';
import { version, codename, lang } from './config';
import { builtinThemes, applyTheme } from './theme';
const lightTheme = require('../theme/light.json');
import { builtinThemes, lightTheme, applyTheme } from './theme';
if (localStorage.getItem('theme') == null) {
applyTheme(lightTheme);
@ -97,15 +96,15 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
return s.device.darkmode;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
const dark = themes.find(t => t.meta.id == os.store.state.device.darkTheme);
const light = themes.find(t => t.meta.id == os.store.state.device.lightTheme);
const dark = themes.find(t => t.id == os.store.state.device.darkTheme);
const light = themes.find(t => t.id == os.store.state.device.lightTheme);
applyTheme(v ? dark : light);
});
os.store.watch(s => {
return s.device.lightTheme;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
const theme = themes.find(t => t.meta.id == v);
const theme = themes.find(t => t.id == v);
if (!os.store.state.device.darkmode) {
applyTheme(theme);
}
@ -114,7 +113,7 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
return s.device.darkTheme;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
const theme = themes.find(t => t.meta.id == v);
const theme = themes.find(t => t.id == v);
if (os.store.state.device.darkmode) {
applyTheme(theme);
}

62
src/client/app/theme.ts
View File

@ -1,27 +1,40 @@
import * as tinycolor from 'tinycolor2';
type Theme = {
meta: {
id: string;
name: string;
author: string;
base?: string;
vars: any;
};
} & {
[key: string]: string;
export type Theme = {
id: string;
name: string;
author: string;
desc?: string;
base?: 'dark' | 'light';
vars: { [key: string]: string };
props: { [key: string]: string };
};
export const lightTheme: Theme = require('../theme/light.json5');
export const darkTheme: Theme = require('../theme/dark.json5');
export const pinkTheme: Theme = require('../theme/pink.json5');
export const halloweenTheme: Theme = require('../theme/halloween.json5');
export const builtinThemes = [
lightTheme,
darkTheme,
pinkTheme,
halloweenTheme
];
export function applyTheme(theme: Theme, persisted = true) {
if (theme.meta.base) {
const base = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.base);
theme = Object.assign({}, base, theme);
// Deep copy
const _theme = JSON.parse(JSON.stringify(theme));
if (_theme.base) {
const base = [lightTheme, darkTheme].find(x => x.id == _theme.base);
_theme.vars = Object.assign({}, base.vars, _theme.vars);
_theme.props = Object.assign({}, base.props, _theme.props);
}
const props = compile(theme);
const props = compile(_theme);
Object.entries(props).forEach(([k, v]) => {
if (k == 'meta') return;
document.documentElement.style.setProperty(`--${k}`, v.toString());
});
@ -34,10 +47,10 @@ function compile(theme: Theme): { [key: string]: string } {
function getColor(code: string): tinycolor.Instance {
// ref
if (code[0] == '@') {
return getColor(theme[code.substr(1)]);
return getColor(theme.props[code.substr(1)]);
}
if (code[0] == '$') {
return getColor(theme.meta.vars[code.substr(1)]);
return getColor(theme.vars[code.substr(1)]);
}
// func
@ -59,8 +72,7 @@ function compile(theme: Theme): { [key: string]: string } {
const props = {};
Object.entries(theme).forEach(([k, v]) => {
if (k == 'meta') return;
Object.entries(theme.props).forEach(([k, v]) => {
const c = getColor(v);
props[k] = genValue(c);
});
@ -88,15 +100,3 @@ function compile(theme: Theme): { [key: string]: string } {
function genValue(c: tinycolor.Instance): string {
return c.toRgbString();
}
export const lightTheme = require('../theme/light.json');
export const darkTheme = require('../theme/dark.json');
export const pinkTheme = require('../theme/pink.json');
export const halloweenTheme = require('../theme/halloween.json');
export const builtinThemes = [
lightTheme,
darkTheme,
pinkTheme,
halloweenTheme
];

204
src/client/theme/dark.json
View File

@ -1,204 +0,0 @@
{
"meta": {
"id": "dark",
"name": "Dark",
"author": "syuilo",
"vars": {
"primary": "#fb4e4e",
"secondary": "#282C37",
"text": "#d6dae0"
}
},
"primary": "$primary",
"primaryForeground": "#fff",
"secondary": "$secondary",
"bg": ":darken<8<$secondary",
"text": "$text",
"scrollbarTrack": ":darken<5<$secondary",
"scrollbarHandle": ":lighten<5<$secondary",
"scrollbarHandleHover": ":lighten<10<$secondary",
"face": "$secondary",
"faceText": "#fff",
"faceHeader": ":lighten<5<$secondary",
"faceHeaderText": "#e3e5e8",
"faceDivider": "rgba(0, 0, 0, 0.3)",
"faceTextButton": "#9baec8",
"faceTextButtonHover": "#b2c1d5",
"faceTextButtonActive": "#b2c1d5",
"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
"popupBg": ":lighten<5<$secondary",
"popupFg": "#d6dce2",
"subNoteBg": "rgba(0, 0, 0, 0.18)",
"subNoteText": ":alpha<0.7<$text",
"renoteGradient": "#314027",
"renoteText": "#9dbb00",
"quoteBorder": "#4e945e",
"noteText": "#fff",
"noteHeaderName": "#fff",
"noteHeaderBadgeFg": "#758188",
"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
"noteHeaderAdminFg": "#f15f71",
"noteHeaderAdminBg": "#5d282e",
"noteHeaderAcct": "#606984",
"noteHeaderInfo": "#606984",
"noteActions": "#606984",
"noteActionsHover": "#a1a8bf",
"noteActionsReplyHover": "#0af",
"noteActionsRenoteHover": "#8d0",
"noteActionsReactionHover": "#fa0",
"noteActionsHighlighted": "#707b97",
"noteAttachedFile": "rgba(255, 255, 255, 0.1)",
"modalBackdrop": "rgba(0, 0, 0, 0.5)",
"dateDividerBg": ":darken<2<$secondary",
"dateDividerFg": ":alpha<0.7<$text",
"switchTrack": "rgba(255, 255, 255, 0.15)",
"radioBorder": "rgba(255, 255, 255, 0.6)",
"inputBorder": "rgba(255, 255, 255, 0.7)",
"inputLabel": "rgba(255, 255, 255, 0.7)",
"inputText": "#fff",
"buttonBg": "rgba(255, 255, 255, 0.05)",
"buttonHoverBg": "rgba(255, 255, 255, 0.1)",
"buttonActiveBg": "rgba(255, 255, 255, 0.15)",
"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
"cwButtonBg": "#687390",
"cwButtonFg": "#393f4f",
"cwButtonHoverBg": "#707b97",
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
"pollEditorInputBg": "rgba(0, 0, 0, 0.25)",
"pollChoiceText": "#fff",
"pollChoiceBorder": "rgba(255, 255, 255, 0.1)",
"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
"urlPreviewTitle": "$text",
"urlPreviewText": ":alpha<0.7<$text",
"urlPreviewInfo": ":alpha<0.8<$text",
"calendarWeek": "#43d5dc",
"calendarSaturdayOrSunday": "#ff6679",
"calendarDay": "#c5ced6",
"materBg": "rgba(0, 0, 0, 0.3)",
"chartCaption": ":alpha<0.6<$text",
"announcementsBg": "#253a50",
"announcementsTitle": "#539eff",
"announcementsText": "#fff",
"donationBg": "#5d5242",
"donationFg": "#e4dbce",
"googleSearchBg": "rgba(0, 0, 0, 0.2)",
"googleSearchFg": "#dee4e8",
"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
"mfmTitleBg": "rgba(0, 0, 0, 0.2)",
"mfmQuote": ":alpha<0.7<$text",
"mfmQuoteLine": ":alpha<0.6<$text",
"suspendedInfoBg": "#611d1d",
"suspendedInfoFg": "#ffb4b4",
"remoteInfoBg": "#42321c",
"remoteInfoFg": "#ffbd3e",
"messagingRoomBg": "@bg",
"messagingRoomInfo": "#fff",
"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
"messagingRoomDateDividerText": "rgba(255, 255, 255, 0.3)",
"messagingRoomMessageInfo": "rgba(255, 255, 255, 0.4)",
"messagingRoomMessageBg": "$secondary",
"messagingRoomMessageFg": "#fff",
"formButtonBorder": "rgba(255, 255, 255, 0.1)",
"formButtonHoverBg": ":alpha<0.2<$primary",
"formButtonHoverBorder": ":alpha<0.5<$primary",
"formButtonActiveBg": ":alpha<0.12<$primary",
"desktopHeaderBg": ":lighten<5<$secondary",
"desktopHeaderFg": "$text",
"desktopHeaderHoverFg": "#fff",
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
"desktopHeaderSearchFg": "#fff",
"desktopNotificationBg": ":alpha<0.9<$secondary",
"desktopNotificationFg": ":alpha<0.7<$text",
"desktopNotificationShadow": "rgba(0, 0, 0, 0.4)",
"desktopPostFormBg": "@face",
"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
"desktopPostFormTextareaFg": "#fff",
"desktopPostFormTransparentButtonFg": "$primary",
"desktopPostFormTransparentButtonActiveGradientStart": ":darken<8<$secondary",
"desktopPostFormTransparentButtonActiveGradientEnd": ":darken<3<$secondary",
"desktopRenoteFormFooter": ":lighten<5<$secondary",
"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
"desktopTimelineSrc": "@faceTextButton",
"desktopTimelineSrcHover": "@faceTextButtonHover",
"desktopWindowTitle": "@faceHeaderText",
"desktopWindowShadow": "rgba(0, 0, 0, 0.5)",
"desktopDriveBg": "@bg",
"desktopDriveFolderBg": ":alpha<0.2<$primary",
"desktopDriveFolderHoverBg": ":alpha<0.3<$primary",
"desktopDriveFolderActiveBg": ":alpha<0.3<:darken<10<$primary",
"desktopDriveFolderFg": "#fff",
"desktopSettingsNavItem": ":alpha<0.8<$text",
"desktopSettingsNavItemHover": ":lighten<10<$text",
"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.25)",
"mobileHeaderBg": ":lighten<5<$secondary",
"mobileHeaderFg": "$text",
"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
"mobilePostFormDivider": "rgba(0, 0, 0, 0.2)",
"mobilePostFormTextareaBg": "rgba(0, 0, 0, 0.3)",
"mobileDriveNavBg": ":alpha<0.75<$secondary",
"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
"mobileUserPageName": "#fff",
"mobileUserPageAcct": "$text",
"mobileUserPageDescription": "$text",
"mobileUserPageFollowedBg": "rgba(0, 0, 0, 0.3)",
"mobileUserPageFollowedFg": "$text",
"mobileUserPageStatusHighlight": "#fff",
"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.3)",
"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
"mobileAnnouncementFg": "#fff",
"mobileSignedInAsBg": "#273c34",
"mobileSignedInAsFg": "#49ab63",
"mobileSignoutBg": "#652222",
"mobileSignoutFg": "#ff5f56",
"reversiBannerGradientStart": "#45730e",
"reversiBannerGradientEnd": "#464300",
"reversiDescBg": "rgba(255, 255, 255, 0.1)",
"reversiListItemShadow": "rgba(0, 0, 0, 0.7)",
"reversiMapSelectBorder": "rgba(255, 255, 255, 0.1)",
"reversiMapSelectHoverBorder": "rgba(255, 255, 255, 0.2)",
"reversiRoomFormShadow": "rgba(0, 0, 0, 0.7)",
"reversiRoomFooterBg": ":alpha<0.9<$secondary",
"reversiGameHeaderLine": ":alpha<0.5<$secondary",
"reversiGameEmptyCell": ":lighten<2<$secondary",
"reversiGameEmptyCellMyTurn": ":lighten<5<$secondary",
"reversiGameEmptyCellCanPut": ":lighten<4<$secondary"
}

207
src/client/theme/dark.json5 Normal file
View File

@ -0,0 +1,207 @@
{
id: 'dark',
name: 'Dark',
author: 'syuilo',
desc: 'Default dark theme',
vars: {
primary: '#fb4e4e',
secondary: '#282C37',
text: '#d6dae0',
},
props: {
primary: '$primary',
primaryForeground: '#fff',
secondary: '$secondary',
bg: ':darken<8<$secondary',
text: '$text',
scrollbarTrack: ':darken<5<$secondary',
scrollbarHandle: ':lighten<5<$secondary',
scrollbarHandleHover: ':lighten<10<$secondary',
face: '$secondary',
faceText: '#fff',
faceHeader: ':lighten<5<$secondary',
faceHeaderText: '#e3e5e8',
faceDivider: 'rgba(0, 0, 0, 0.3)',
faceTextButton: '$text',
faceTextButtonHover: ':lighten<10<$text',
faceTextButtonActive: ':darken<10<$text',
faceClearButtonHover: 'rgba(0, 0, 0, 0.1)',
faceClearButtonActive: 'rgba(0, 0, 0, 0.2)',
popupBg: ':lighten<5<$secondary',
popupFg: '#d6dce2',
subNoteBg: 'rgba(0, 0, 0, 0.18)',
subNoteText: ':alpha<0.7<$text',
renoteGradient: '#314027',
renoteText: '#9dbb00',
quoteBorder: '#4e945e',
noteText: '#fff',
noteHeaderName: '#fff',
noteHeaderBadgeFg: '#758188',
noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.25)',
noteHeaderAdminFg: '#f15f71',
noteHeaderAdminBg: '#5d282e',
noteHeaderAcct: '#606984',
noteHeaderInfo: '#606984',
noteActions: '#606984',
noteActionsHover: '#a1a8bf',
noteActionsReplyHover: '#0af',
noteActionsRenoteHover: '#8d0',
noteActionsReactionHover: '#fa0',
noteActionsHighlighted: '#707b97',
noteAttachedFile: 'rgba(255, 255, 255, 0.1)',
modalBackdrop: 'rgba(0, 0, 0, 0.5)',
dateDividerBg: ':darken<2<$secondary',
dateDividerFg: ':alpha<0.7<$text',
switchTrack: 'rgba(255, 255, 255, 0.15)',
radioBorder: 'rgba(255, 255, 255, 0.6)',
inputBorder: 'rgba(255, 255, 255, 0.7)',
inputLabel: 'rgba(255, 255, 255, 0.7)',
inputText: '#fff',
buttonBg: 'rgba(255, 255, 255, 0.05)',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
buttonActiveBg: 'rgba(255, 255, 255, 0.15)',
autocompleteItemHoverBg: 'rgba(255, 255, 255, 0.1)',
autocompleteItemText: 'rgba(255, 255, 255, 0.8)',
autocompleteItemTextSub: 'rgba(255, 255, 255, 0.3)',
cwButtonBg: '#687390',
cwButtonFg: '#393f4f',
cwButtonHoverBg: '#707b97',
reactionPickerButtonHoverBg: 'rgba(255, 255, 255, 0.18)',
reactionViewerBorder: 'rgba(255, 255, 255, 0.1)',
pollEditorInputBg: 'rgba(0, 0, 0, 0.25)',
pollChoiceText: '#fff',
pollChoiceBorder: 'rgba(255, 255, 255, 0.1)',
urlPreviewBorder: 'rgba(0, 0, 0, 0.4)',
urlPreviewBorderHover: 'rgba(255, 255, 255, 0.2)',
urlPreviewTitle: '$text',
urlPreviewText: ':alpha<0.7<$text',
urlPreviewInfo: ':alpha<0.8<$text',
calendarWeek: '#43d5dc',
calendarSaturdayOrSunday: '#ff6679',
calendarDay: '#c5ced6',
materBg: 'rgba(0, 0, 0, 0.3)',
chartCaption: ':alpha<0.6<$text',
announcementsBg: '#253a50',
announcementsTitle: '#539eff',
announcementsText: '#fff',
donationBg: '#5d5242',
donationFg: '#e4dbce',
googleSearchBg: 'rgba(0, 0, 0, 0.2)',
googleSearchFg: '#dee4e8',
googleSearchBorder: 'rgba(255, 255, 255, 0.2)',
googleSearchHoverBorder: 'rgba(255, 255, 255, 0.3)',
googleSearchHoverButton: 'rgba(255, 255, 255, 0.1)',
mfmTitleBg: 'rgba(0, 0, 0, 0.2)',
mfmQuote: ':alpha<0.7<$text',
mfmQuoteLine: ':alpha<0.6<$text',
suspendedInfoBg: '#611d1d',
suspendedInfoFg: '#ffb4b4',
remoteInfoBg: '#42321c',
remoteInfoFg: '#ffbd3e',
messagingRoomBg: '@bg',
messagingRoomInfo: '#fff',
messagingRoomDateDividerLine: 'rgba(255, 255, 255, 0.1)',
messagingRoomDateDividerText: 'rgba(255, 255, 255, 0.3)',
messagingRoomMessageInfo: 'rgba(255, 255, 255, 0.4)',
messagingRoomMessageBg: '$secondary',
messagingRoomMessageFg: '#fff',
formButtonBorder: 'rgba(255, 255, 255, 0.1)',
formButtonHoverBg: ':alpha<0.2<$primary',
formButtonHoverBorder: ':alpha<0.5<$primary',
formButtonActiveBg: ':alpha<0.12<$primary',
desktopHeaderBg: ':lighten<5<$secondary',
desktopHeaderFg: '$text',
desktopHeaderHoverFg: '#fff',
desktopHeaderSearchBg: 'rgba(0, 0, 0, 0.1)',
desktopHeaderSearchHoverBg: 'rgba(255, 255, 255, 0.04)',
desktopHeaderSearchFg: '#fff',
desktopNotificationBg: ':alpha<0.9<$secondary',
desktopNotificationFg: ':alpha<0.7<$text',
desktopNotificationShadow: 'rgba(0, 0, 0, 0.4)',
desktopPostFormBg: '@face',
desktopPostFormTextareaBg: 'rgba(0, 0, 0, 0.25)',
desktopPostFormTextareaFg: '#fff',
desktopPostFormTransparentButtonFg: '$primary',
desktopPostFormTransparentButtonActiveGradientStart: ':darken<8<$secondary',
desktopPostFormTransparentButtonActiveGradientEnd: ':darken<3<$secondary',
desktopRenoteFormFooter: ':lighten<5<$secondary',
desktopTimelineHeaderShadow: 'rgba(0, 0, 0, 0.15)',
desktopTimelineSrc: '@faceTextButton',
desktopTimelineSrcHover: '@faceTextButtonHover',
desktopWindowTitle: '@faceHeaderText',
desktopWindowShadow: 'rgba(0, 0, 0, 0.5)',
desktopDriveBg: '@bg',
desktopDriveFolderBg: ':alpha<0.2<$primary',
desktopDriveFolderHoverBg: ':alpha<0.3<$primary',
desktopDriveFolderActiveBg: ':alpha<0.3<:darken<10<$primary',
desktopDriveFolderFg: '#fff',
desktopSettingsNavItem: ':alpha<0.8<$text',
desktopSettingsNavItemHover: ':lighten<10<$text',
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.25)',
mobileHeaderBg: ':lighten<5<$secondary',
mobileHeaderFg: '$text',
mobileNavBackdrop: 'rgba(0, 0, 0, 0.7)',
mobilePostFormDivider: 'rgba(0, 0, 0, 0.2)',
mobilePostFormTextareaBg: 'rgba(0, 0, 0, 0.3)',
mobileDriveNavBg: ':alpha<0.75<$secondary',
mobileHomeTlItemHover: 'rgba(255, 255, 255, 0.1)',
mobileUserPageName: '#fff',
mobileUserPageAcct: '$text',
mobileUserPageDescription: '$text',
mobileUserPageFollowedBg: 'rgba(0, 0, 0, 0.3)',
mobileUserPageFollowedFg: '$text',
mobileUserPageStatusHighlight: '#fff',
mobileUserPageHeaderShadow: 'rgba(0, 0, 0, 0.3)',
mobileAnnouncement: 'rgba(30, 129, 216, 0.2)',
mobileAnnouncementFg: '#fff',
mobileSignedInAsBg: '#273c34',
mobileSignedInAsFg: '#49ab63',
mobileSignoutBg: '#652222',
mobileSignoutFg: '#ff5f56',
reversiBannerGradientStart: '#45730e',
reversiBannerGradientEnd: '#464300',
reversiDescBg: 'rgba(255, 255, 255, 0.1)',
reversiListItemShadow: 'rgba(0, 0, 0, 0.7)',
reversiMapSelectBorder: 'rgba(255, 255, 255, 0.1)',
reversiMapSelectHoverBorder: 'rgba(255, 255, 255, 0.2)',
reversiRoomFormShadow: 'rgba(0, 0, 0, 0.7)',
reversiRoomFooterBg: ':alpha<0.9<$secondary',
reversiGameHeaderLine: ':alpha<0.5<$secondary',
reversiGameEmptyCell: ':lighten<2<$secondary',
reversiGameEmptyCellMyTurn: ':lighten<5<$secondary',
reversiGameEmptyCellCanPut: ':lighten<4<$secondary',
},
}

17
src/client/theme/halloween.json
View File

@ -1,17 +0,0 @@
{
"meta": {
"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
"name": "Halloween",
"author": "syuilo",
"base": "dark",
"vars": {
"primary": "#d67036",
"secondary": "#1f1d30",
"text": "#b1bee3"
}
},
"renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00",
"quoteBorder": "#c3631c"
}

21
src/client/theme/halloween.json5 Normal file
View File

@ -0,0 +1,21 @@
{
id: '42e4f09b-67d5-498c-af7d-29faa54745b0',
name: 'Halloween',
author: 'syuilo',
desc: 'Hello, Happy Halloween!',
base: 'dark',
vars: {
primary: '#d67036',
secondary: '#1f1d30',
text: '#b1bee3',
},
props: {
renoteGradient: '#5d2d1a',
renoteText: '#ff6c00',
quoteBorder: '#c3631c',
},
}

204
src/client/theme/light.json
View File

@ -1,204 +0,0 @@
{
"meta": {
"id": "light",
"name": "Light",
"author": "syuilo",
"vars": {
"primary": "#fb4e4e",
"secondary": "#fff",
"text": "#666"
}
},
"primary": "$primary",
"primaryForeground": "#fff",
"secondary": "$secondary",
"bg": ":darken<8<$secondary",
"text": "$text",
"scrollbarTrack": "#fff",
"scrollbarHandle": "#00000033",
"scrollbarHandleHover": "#00000066",
"face": "$secondary",
"faceText": "#444",
"faceHeader": ":lighten<5<$secondary",
"faceHeaderText": "#888",
"faceDivider": "rgba(0, 0, 0, 0.082)",
"faceTextButton": "#ccc",
"faceTextButtonHover": "#aaa",
"faceTextButtonActive": "#999",
"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
"popupBg": ":lighten<5<$secondary",
"popupFg": "#586069",
"subNoteBg": "rgba(0, 0, 0, 0.01)",
"subNoteText": ":alpha<0.7<$text",
"renoteGradient": "#edfde2",
"renoteText": "#9dbb00",
"quoteBorder": "#c0dac6",
"noteText": "#717171",
"noteHeaderName": ":darken<2<$text",
"noteHeaderBadgeFg": "#aaa",
"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
"noteHeaderAdminFg": "#f15f71",
"noteHeaderAdminBg": "#ffdfdf",
"noteHeaderAcct": ":alpha<0.7<@noteHeaderName",
"noteHeaderInfo": ":alpha<0.7<@noteHeaderName",
"noteActions": ":alpha<0.3<$text",
"noteActionsHover": ":alpha<0.9<$text",
"noteActionsReplyHover": "#0af",
"noteActionsRenoteHover": "#8d0",
"noteActionsReactionHover": "#fa0",
"noteActionsHighlighted": "#888",
"noteAttachedFile": "rgba(0, 0, 0, 0.05)",
"modalBackdrop": "rgba(0, 0, 0, 0.1)",
"dateDividerBg": ":darken<2<$secondary",
"dateDividerFg": ":alpha<0.7<$text",
"switchTrack": "rgba(0, 0, 0, 0.25)",
"radioBorder": "rgba(0, 0, 0, 0.4)",
"inputBorder": "rgba(0, 0, 0, 0.42)",
"inputLabel": "rgba(0, 0, 0, 0.54)",
"inputText": "#000",
"buttonBg": "rgba(0, 0, 0, 0.05)",
"buttonHoverBg": "rgba(0, 0, 0, 0.1)",
"buttonActiveBg": "rgba(0, 0, 0, 0.15)",
"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
"cwButtonBg": "#b1b9c1",
"cwButtonFg": "#fff",
"cwButtonHoverBg": "#bbc4ce",
"reactionPickerButtonHoverBg": "#eee",
"reactionViewerBorder": "rgba(0, 0, 0, 0.1)",
"pollEditorInputBg": "#fff",
"pollChoiceText": "#000",
"pollChoiceBorder": "rgba(0, 0, 0, 0.1)",
"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
"urlPreviewTitle": "$text",
"urlPreviewText": ":alpha<0.7<$text",
"urlPreviewInfo": ":alpha<0.8<$text",
"calendarWeek": "#19a2a9",
"calendarSaturdayOrSunday": "#ef95a0",
"calendarDay": "#777",
"materBg": "rgba(0, 0, 0, 0.1)",
"chartCaption": ":alpha<0.6<$text",
"announcementsBg": "#f3f9ff",
"announcementsTitle": "#4078c0",
"announcementsText": "#57616f",
"donationBg": "#fbead4",
"donationFg": "#777d71",
"googleSearchBg": "#fff",
"googleSearchFg": "#55595c",
"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
"mfmTitleBg": "rgba(0, 0, 0, 0.07)",
"mfmQuote": ":alpha<0.6<$text",
"mfmQuoteLine": ":alpha<0.5<$text",
"suspendedInfoBg": "#ffdbdb",
"suspendedInfoFg": "#570808",
"remoteInfoBg": "#fff0db",
"remoteInfoFg": "#573c08",
"messagingRoomBg": "#fff",
"messagingRoomInfo": "#000",
"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
"messagingRoomDateDividerText": "rgba(0, 0, 0, 0.3)",
"messagingRoomMessageInfo": "rgba(0, 0, 0, 0.4)",
"messagingRoomMessageBg": "#eee",
"messagingRoomMessageFg": "#333",
"formButtonBorder": "rgba(0, 0, 0, 0.1)",
"formButtonHoverBg": ":alpha<0.12<$primary",
"formButtonHoverBorder": ":alpha<0.3<$primary",
"formButtonActiveBg": ":alpha<0.12<$primary",
"desktopHeaderBg": ":lighten<5<$secondary",
"desktopHeaderFg": "$text",
"desktopHeaderHoverFg": "#7b8c88",
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
"desktopHeaderSearchFg": "#000",
"desktopNotificationBg": ":alpha<0.9<$secondary",
"desktopNotificationFg": ":alpha<0.7<$text",
"desktopNotificationShadow": "rgba(0, 0, 0, 0.2)",
"desktopPostFormBg": ":lighten<33<$primary",
"desktopPostFormTextareaBg": "#fff",
"desktopPostFormTextareaFg": "#333",
"desktopPostFormTransparentButtonFg": ":alpha<0.5<$primary",
"desktopPostFormTransparentButtonActiveGradientStart": ":lighten<30<$primary",
"desktopPostFormTransparentButtonActiveGradientEnd": ":lighten<33<$primary",
"desktopRenoteFormFooter": ":lighten<33<$primary",
"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
"desktopTimelineSrc": "#6f7477",
"desktopTimelineSrcHover": "#525a5f",
"desktopWindowTitle": "#666",
"desktopWindowShadow": "rgba(0, 0, 0, 0.2)",
"desktopDriveBg": "#fff",
"desktopDriveFolderBg": ":lighten<31<$primary",
"desktopDriveFolderHoverBg": ":lighten<27<$primary",
"desktopDriveFolderActiveBg": ":lighten<25<$primary",
"desktopDriveFolderFg": ":darken<10<$primary",
"desktopSettingsNavItem": ":alpha<0.8<$text",
"desktopSettingsNavItemHover": ":darken<10<$text",
"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.1)",
"mobileHeaderBg": ":lighten<5<$secondary",
"mobileHeaderFg": "$text",
"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
"mobilePostFormTextareaBg": "#fff",
"mobileDriveNavBg": ":alpha<0.75<$secondary",
"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
"mobileUserPageName": "#757c82",
"mobileUserPageAcct": "#969ea5",
"mobileUserPageDescription": "#757c82",
"mobileUserPageFollowedBg": "#a7bec7",
"mobileUserPageFollowedFg": "#fff",
"mobileUserPageStatusHighlight": "#787e86",
"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.07)",
"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
"mobileAnnouncementFg": "#3f4967",
"mobileSignedInAsBg": "#fcfff5",
"mobileSignedInAsFg": "#2c662d",
"mobileSignoutBg": "#fff6f5",
"mobileSignoutFg": "#cc2727",
"reversiBannerGradientStart": "#8bca3e",
"reversiBannerGradientEnd": "#d6cf31",
"reversiDescBg": "rgba(0, 0, 0, 0.1)",
"reversiListItemShadow": "rgba(0, 0, 0, 0.15)",
"reversiMapSelectBorder": "rgba(0, 0, 0, 0.1)",
"reversiMapSelectHoverBorder": "rgba(0, 0, 0, 0.2)",
"reversiRoomFormShadow": "rgba(0, 0, 0, 0.1)",
"reversiRoomFooterBg": ":alpha<0.9<$secondary",
"reversiGameHeaderLine": "#c4cdd4",
"reversiGameEmptyCell": "rgba(0, 0, 0, 0.06)",
"reversiGameEmptyCellMyTurn": "rgba(0, 0, 0, 0.12)",
"reversiGameEmptyCellCanPut": "rgba(0, 0, 0, 0.9)"
}

207
src/client/theme/light.json5 Normal file
View File

@ -0,0 +1,207 @@
{
id: 'light',
name: 'Light',
author: 'syuilo',
desc: 'Default light theme',
vars: {
primary: '#fb4e4e',
secondary: '#fff',
text: '#666',
},
props: {
primary: '$primary',
primaryForeground: '#fff',
secondary: '$secondary',
bg: ':darken<8<$secondary',
text: '$text',
scrollbarTrack: '#fff',
scrollbarHandle: '#00000033',
scrollbarHandleHover: '#00000066',
face: '$secondary',
faceText: '#444',
faceHeader: ':lighten<5<$secondary',
faceHeaderText: '#888',
faceDivider: 'rgba(0, 0, 0, 0.082)',
faceTextButton: '#ccc',
faceTextButtonHover: '#aaa',
faceTextButtonActive: '#999',
faceClearButtonHover: 'rgba(0, 0, 0, 0.025)',
faceClearButtonActive: 'rgba(0, 0, 0, 0.05)',
popupBg: ':lighten<5<$secondary',
popupFg: '#586069',
subNoteBg: 'rgba(0, 0, 0, 0.01)',
subNoteText: ':alpha<0.7<$text',
renoteGradient: '#edfde2',
renoteText: '#9dbb00',
quoteBorder: '#c0dac6',
noteText: '#717171',
noteHeaderName: ':darken<2<$text',
noteHeaderBadgeFg: '#aaa',
noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.05)',
noteHeaderAdminFg: '#f15f71',
noteHeaderAdminBg: '#ffdfdf',
noteHeaderAcct: ':alpha<0.7<@noteHeaderName',
noteHeaderInfo: ':alpha<0.7<@noteHeaderName',
noteActions: ':alpha<0.3<$text',
noteActionsHover: ':alpha<0.9<$text',
noteActionsReplyHover: '#0af',
noteActionsRenoteHover: '#8d0',
noteActionsReactionHover: '#fa0',
noteActionsHighlighted: '#888',
noteAttachedFile: 'rgba(0, 0, 0, 0.05)',
modalBackdrop: 'rgba(0, 0, 0, 0.1)',
dateDividerBg: ':darken<2<$secondary',
dateDividerFg: ':alpha<0.7<$text',
switchTrack: 'rgba(0, 0, 0, 0.25)',
radioBorder: 'rgba(0, 0, 0, 0.4)',
inputBorder: 'rgba(0, 0, 0, 0.42)',
inputLabel: 'rgba(0, 0, 0, 0.54)',
inputText: '#000',
buttonBg: 'rgba(0, 0, 0, 0.05)',
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
buttonActiveBg: 'rgba(0, 0, 0, 0.15)',
autocompleteItemHoverBg: 'rgba(0, 0, 0, 0.1)',
autocompleteItemText: 'rgba(0, 0, 0, 0.8)',
autocompleteItemTextSub: 'rgba(0, 0, 0, 0.3)',
cwButtonBg: '#b1b9c1',
cwButtonFg: '#fff',
cwButtonHoverBg: '#bbc4ce',
reactionPickerButtonHoverBg: '#eee',
reactionViewerBorder: 'rgba(0, 0, 0, 0.1)',
pollEditorInputBg: '#fff',
pollChoiceText: '#000',
pollChoiceBorder: 'rgba(0, 0, 0, 0.1)',
urlPreviewBorder: 'rgba(0, 0, 0, 0.1)',
urlPreviewBorderHover: 'rgba(0, 0, 0, 0.2)',
urlPreviewTitle: '$text',
urlPreviewText: ':alpha<0.7<$text',
urlPreviewInfo: ':alpha<0.8<$text',
calendarWeek: '#19a2a9',
calendarSaturdayOrSunday: '#ef95a0',
calendarDay: '#777',
materBg: 'rgba(0, 0, 0, 0.1)',
chartCaption: ':alpha<0.6<$text',
announcementsBg: '#f3f9ff',
announcementsTitle: '#4078c0',
announcementsText: '#57616f',
donationBg: '#fbead4',
donationFg: '#777d71',
googleSearchBg: '#fff',
googleSearchFg: '#55595c',
googleSearchBorder: 'rgba(0, 0, 0, 0.2)',
googleSearchHoverBorder: 'rgba(0, 0, 0, 0.3)',
googleSearchHoverButton: 'rgba(0, 0, 0, 0.05)',
mfmTitleBg: 'rgba(0, 0, 0, 0.07)',
mfmQuote: ':alpha<0.6<$text',
mfmQuoteLine: ':alpha<0.5<$text',
suspendedInfoBg: '#ffdbdb',
suspendedInfoFg: '#570808',
remoteInfoBg: '#fff0db',
remoteInfoFg: '#573c08',
messagingRoomBg: '#fff',
messagingRoomInfo: '#000',
messagingRoomDateDividerLine: 'rgba(0, 0, 0, 0.1)',
messagingRoomDateDividerText: 'rgba(0, 0, 0, 0.3)',
messagingRoomMessageInfo: 'rgba(0, 0, 0, 0.4)',
messagingRoomMessageBg: '#eee',
messagingRoomMessageFg: '#333',
formButtonBorder: 'rgba(0, 0, 0, 0.1)',
formButtonHoverBg: ':alpha<0.12<$primary',
formButtonHoverBorder: ':alpha<0.3<$primary',
formButtonActiveBg: ':alpha<0.12<$primary',
desktopHeaderBg: ':lighten<5<$secondary',
desktopHeaderFg: '$text',
desktopHeaderHoverFg: '#7b8c88',
desktopHeaderSearchBg: 'rgba(0, 0, 0, 0.05)',
desktopHeaderSearchHoverBg: 'rgba(0, 0, 0, 0.08)',
desktopHeaderSearchFg: '#000',
desktopNotificationBg: ':alpha<0.9<$secondary',
desktopNotificationFg: ':alpha<0.7<$text',
desktopNotificationShadow: 'rgba(0, 0, 0, 0.2)',
desktopPostFormBg: ':lighten<33<$primary',
desktopPostFormTextareaBg: '#fff',
desktopPostFormTextareaFg: '#333',
desktopPostFormTransparentButtonFg: ':alpha<0.5<$primary',
desktopPostFormTransparentButtonActiveGradientStart: ':lighten<30<$primary',
desktopPostFormTransparentButtonActiveGradientEnd: ':lighten<33<$primary',
desktopRenoteFormFooter: ':lighten<33<$primary',
desktopTimelineHeaderShadow: 'rgba(0, 0, 0, 0.08)',
desktopTimelineSrc: '#6f7477',
desktopTimelineSrcHover: '#525a5f',
desktopWindowTitle: '#666',
desktopWindowShadow: 'rgba(0, 0, 0, 0.2)',
desktopDriveBg: '#fff',
desktopDriveFolderBg: ':lighten<31<$primary',
desktopDriveFolderHoverBg: ':lighten<27<$primary',
desktopDriveFolderActiveBg: ':lighten<25<$primary',
desktopDriveFolderFg: ':darken<10<$primary',
desktopSettingsNavItem: ':alpha<0.8<$text',
desktopSettingsNavItemHover: ':darken<10<$text',
deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.1)',
mobileHeaderBg: ':lighten<5<$secondary',
mobileHeaderFg: '$text',
mobileNavBackdrop: 'rgba(0, 0, 0, 0.2)',
mobilePostFormDivider: 'rgba(0, 0, 0, 0.1)',
mobilePostFormTextareaBg: '#fff',
mobileDriveNavBg: ':alpha<0.75<$secondary',
mobileHomeTlItemHover: 'rgba(0, 0, 0, 0.05)',
mobileUserPageName: '#757c82',
mobileUserPageAcct: '#969ea5',
mobileUserPageDescription: '#757c82',
mobileUserPageFollowedBg: '#a7bec7',
mobileUserPageFollowedFg: '#fff',
mobileUserPageStatusHighlight: '#787e86',
mobileUserPageHeaderShadow: 'rgba(0, 0, 0, 0.07)',
mobileAnnouncement: 'rgba(155, 196, 232, 0.2)',
mobileAnnouncementFg: '#3f4967',
mobileSignedInAsBg: '#fcfff5',
mobileSignedInAsFg: '#2c662d',
mobileSignoutBg: '#fff6f5',
mobileSignoutFg: '#cc2727',
reversiBannerGradientStart: '#8bca3e',
reversiBannerGradientEnd: '#d6cf31',
reversiDescBg: 'rgba(0, 0, 0, 0.1)',
reversiListItemShadow: 'rgba(0, 0, 0, 0.15)',
reversiMapSelectBorder: 'rgba(0, 0, 0, 0.1)',
reversiMapSelectHoverBorder: 'rgba(0, 0, 0, 0.2)',
reversiRoomFormShadow: 'rgba(0, 0, 0, 0.1)',
reversiRoomFooterBg: ':alpha<0.9<$secondary',
reversiGameHeaderLine: '#c4cdd4',
reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)',
reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)',
reversiGameEmptyCellCanPut: 'rgba(0, 0, 0, 0.9)',
},
}

17
src/client/theme/pink.json
View File

@ -1,17 +0,0 @@
{
"meta": {
"id": "e9c8c01d-9c15-48d0-9b5c-3d00843b5b36",
"name": "Pink",
"author": "syuilo",
"base": "light",
"vars": {
"primary": "rgb(251, 78, 112)",
"secondary": "rgb(255, 218, 240)",
"text": "rgb(113, 91, 102)"
}
},
"renoteGradient": "#ffb1c9",
"renoteText": "#ff588d",
"quoteBorder": "#ff6c9b"
}

20
src/client/theme/pink.json5 Normal file
View File

@ -0,0 +1,20 @@
{
id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36',
name: 'Pink',
author: 'syuilo',
base: 'light',
vars: {
primary: 'rgb(251, 78, 112)',
secondary: 'rgb(255, 218, 240)',
text: 'rgb(113, 91, 102)',
},
props: {
renoteGradient: '#ffb1c9',
renoteText: '#ff588d',
quoteBorder: '#ff6c9b',
},
}

3
webpack.config.ts
View File

@ -196,6 +196,9 @@ module.exports = {
}, {
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: 'url-loader'
}, {
test: /\.json5$/,
loader: 'json5-loader'
}, {
test: /\.ts$/,
exclude: /node_modules/,