AstralRinth/packages/ui/src/components/settings/ThemeSelector.vue

<script setup>
import { MoonIcon, RadioButtonChecked, RadioButtonIcon, SunIcon } from '@modrinth/assets'
import { useVIntl, defineMessages } from '@vintl/vintl'

const { formatMessage } = useVIntl()

defineProps({
  updateColorTheme: {
    type: Function,
    required: true,
  },
  currentTheme: {
    type: String,
    required: true,
  },
  themeOptions: {
    type: Array,
    required: true,
  },
  systemThemeColor: {
    type: String,
    required: true,
  },
})

const colorTheme = defineMessages({
  title: {
    id: 'settings.display.theme.title',
    defaultMessage: 'Color theme',
  },
  description: {
    id: 'settings.display.theme.description',
    defaultMessage: 'Select your preferred color theme for Modrinth on this device.',
  },
  system: {
    id: 'settings.display.theme.system',
    defaultMessage: 'Sync with system',
  },
  light: {
    id: 'settings.display.theme.light',
    defaultMessage: 'Light',
  },
  dark: {
    id: 'settings.display.theme.dark',
    defaultMessage: 'Dark',
  },
  oled: {
    id: 'settings.display.theme.oled',
    defaultMessage: 'OLED',
  },
  retro: {
    id: 'settings.display.theme.retro',
    defaultMessage: 'Retro',
  },
  preferredLight: {
    id: 'settings.display.theme.preferred-light-theme',
    defaultMessage: 'Preferred light theme',
  },
  preferredDark: {
    id: 'settings.display.theme.preferred-dark-theme',
    defaultMessage: 'Preferred dark theme',
  },
})
</script>

<template>
  <div class="theme-options mt-4">
    <button
      v-for="option in themeOptions"
      :key="option"
      class="preview-radio button-base"
      :class="{ selected: currentTheme === option }"
      @click="() => updateColorTheme(option)"
    >
      <div class="preview" :class="`${option === 'system' ? systemThemeColor : option}-mode`">
        <div class="example-card card card">
          <div class="example-icon"></div>
          <div class="example-text-1"></div>
          <div class="example-text-2"></div>
        </div>
      </div>
      <div class="label">
        <RadioButtonChecked v-if="currentTheme === option" class="radio" />
        <RadioButtonIcon v-else class="radio" />
        {{ colorTheme[option] ? formatMessage(colorTheme[option]) : option }}
        <SunIcon
          v-if="'light' === option"
          v-tooltip="formatMessage(colorTheme.preferredLight)"
          class="theme-icon"
        />
        <MoonIcon
          v-else-if="'dark' === option"
          v-tooltip="formatMessage(colorTheme.preferredDark)"
          class="theme-icon"
        />
      </div>
    </button>
  </div>
</template>

<style scoped lang="scss">
.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: var(--gap-lg);

  .preview .example-card {
    margin: 0;
    padding: 1rem;
    display: grid;
    grid-template: 'icon text1' 'icon text2';
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    outline: 2px solid transparent;

    .example-icon {
      grid-area: icon;
      width: 2rem;
      height: 2rem;
      background-color: var(--color-button-bg);
      border-radius: var(--radius-sm);
      outline: 2px solid transparent;
    }

    .example-text-1,
    .example-text-2 {
      height: 0.5rem;
      border-radius: var(--radius-sm);
      outline: 2px solid transparent;
    }

    .example-text-1 {
      grid-area: text1;
      width: 100%;
      background-color: var(--color-base);
    }

    .example-text-2 {
      grid-area: text2;
      width: 60%;
      background-color: var(--color-secondary);
    }
  }
}
</style>