AniTrend Theme-ing Guide (For v1.6.8)

THEMING.md

AniTrend Theme-ing Guide (For v1.6.8)

---

Prerequisites

1. Android Studio
2. A cloned version of AniTrend
3. Knowing how to run your own build of AniTrend

How to make a theme

Define your colors

• Primary color
• Darker primary color
• Accent color menu color
• Insert image here to show ppl what corresponds to what

Modify the source files

Colors.xml

• Location: anitrend-app/app/src/main/res/values/
• Add new colors here using the format: <color name="[color name]">[color hex value]</color>
  • The naming scheme is [color]Primary, [color]PrimaryDark, [color]Accent where color is essentially the theme name (Please follow camelCase!)
  • Example: <color name="bluePrimary">#0099ff</color>
• You can reference a color with @color/[color name]

Style.xml

• Location: anitrend-app/app/src/main/res/values/
• This file is were we define our new theme (a style)
• Essentially just follow the template below

      <style name="AppTheme[Color]" parent="Theme.AppCompat.NoActionBar">
          <!-- Customize your theme here. -->
          <item name="colorPrimary">[Primary color here]</item>
          <item name="colorPrimaryDark">[PrimaryDark color here]</item>
          <item name="colorAccent">[Accent color here]</item>
  
          <item name="cardColor">[Primary color here usually]</item>
          <item name="drawerColor">@color/colorLight</item>
  
  
          <item name="rootColor">@color/colorPrimaryBlack</item>
          <item name="lineColor">@color/colorPrimaryBlack</item>
          <item name="titleColor">@color/colorTextTitleDark</item>
          <item name="subtitleColor">@color/colorTextSubtitleDark</item>
          <item name="contentColor">@color/colorTextContentDark</item>
  
          <item name="voiceDrawable">@drawable/ic_action_voice_search_inverted</item>
          <item name="closeDrawable">@drawable/ic_action_navigation_close_inverted</item>
          <item name="backDrawable">@drawable/ic_action_navigation_arrow_back_inverted</item>
          <item name="suggestionDrawable">@drawable/ic_suggestion</item>
  
          <item name="windowActionModeOverlay">true</item>
          <item name="toolbarColor">@style/DarkToolbarTheme or @style/LightToolbarTheme</item>
          <item name="android:textViewStyle">@style/TextFamily</item>
  
          <item name="android:windowBackground">[PrimaryDark color here usually]</item>
          <item name="android:popupMenuStyle">@style/PopupThemeDark</item>
          <!--actionOverflowMenuStyle controls the state of the overflow popup window-->
          <item name="actionOverflowMenuStyle">[Overflow style here or use @style/DarkOverflowMenu]</item>
      </style>
  

• By here you should have replaced at least 6 things with your custom color (Don't forget the toolbar theme!)
• If you want to customize the overflow, use the following template

      <style name="[Color]OverflowMenu" parent="Widget.AppCompat.Light.PopupMenu.Overflow"> // PascalCase here
      <item name="android:popupBackground">[Color goes here]</item>
  </style>
  

• You should have replaced 2 things here
• You can reference this style like so @style/[Style name]>

Strings.xml

• Location: anitrend-app/app/src/main/res/values/
• Look for <string-array name="pref_selected_theme_titles"> and </string-array><string-array name="pref_selected_theme_values">
• Add your theme name to both these arrays

KeyUtil.java

• Location: anitrend-app/app/src/main/java/com/mxt/anitrend/util/
• Look for String THEME_LIGHT and @StringDef right under it
• Under the String THEME_LIGHT line, add `String THEME_[color name here] // All CAPS
• Add that new variable to the @StringDef list

ConfigurationUtil.kt

• Location: anitrend-app/app/src/main/java/com/mxt/anitrend/util/
• Look for the function onCreateAttach and then @StyleRes val theme in it
• Before the else statement, make a new line and add your theme using the variable you made in the last section
  • Example: KeyUtil.THEME_BLUE -> R.style.AppThemeBlue

Testing

• You have now made a custom theme! Congrats!
• Connect your device, build the app from android studio and install the app
• It should be selectable in the settings menu now!
• Test things out and play around with the colors!

❤️