feat: add theming support (#69)

README.md

@@ -17,6 +17,8 @@
 - [x] **Customize round numbers, focus and break times**
 - [x] **Auto-start round** (optional)
 - [x] **Desktop notifications** (optional)
+- [x] **Built-in [themes](#-themes)**
+- [x] **Custom [themes](#-themes)**
 - [x] **Color gradiant** depending on the remaining time
 - [x] **Tray icon** with color gradiant
 - [x] **Minimize to tray** (optional)
@@ -40,6 +42,14 @@
 
 Download the install file for your OS from the latest release on https://github.com/vjousse/pomodorolm/releases/
 
+# 🎨 Themes
+
+Pomodorolm provides many themes. It's also theme-able, allowing you to customize its appearance.
+
+![Screenshots of Pomotroid using various themes](./.github/images/pomotroid_themes-preview--914x219.png)
+
+Visit the [theme documentation](./docs/themes/themes.md) to view the full list of official themes and for instruction on creating your own.
+
 # 💻 Dev
 
 You will need to [install rust](https://www.rust-lang.org/tools/install) first.

docs/themes/theme-template.json

@@ -0,0 +1,17 @@
+{
+  "name": "Theme Name",
+  "colors": {
+    "--color-long-round": "",
+    "--color-short-round": "",
+    "--color-focus-round": "",
+    "--color-focus-round-middle": "",
+    "--color-focus-round-end": "",
+    "--color-background": "",
+    "--color-background-light": "",
+    "--color-background-lightest": "",
+    "--color-foreground": "",
+    "--color-foreground-darker": "",
+    "--color-foreground-darkest": "",
+    "--color-accent": ""
+  }
+}

docs/themes/themes.md

@@ -0,0 +1,67 @@
+# Pomotroid Themes
+
+Pomotroid comes with many officially supported themes. You can also add any number of custom themes.
+
+- [Pomotroid Themes](#pomotroid-themes)
+  - [Available Themes](#available-themes)
+  - [Creating a Custom Theme](#creating-a-custom-theme)
+
+## Available Themes
+
+These themes are available by default.
+
+| Theme               | Main App                                                                | Timer Colors                                                            |
+| ------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| Andromeda           | ![Andromeda theme preview](images/andromeda_01.png)                     | ![Andromeda theme preview](images/andromeda_02.png)                     |
+| Ayu Mirage          | ![Ayu Mirage theme preview](images/ayu_01.png)                          | ![Ayu Mirage theme preview](images/ayu_02.png)                          |
+| City Lights         | ![City Lights theme preview](images/city-lights_01.png)                 | ![City Lights theme preview](images/city-lights_02.png)                 |
+| Dracula             | ![Dracula theme preview](images/dracula_01.png)                         | ![Dracula theme preview](images/dracula_02.png)                         |
+| D.Va                | ![D.Va theme preview](images/dva_01.png)                                | ![D.Va theme preview](images/dva_02.png)                                |
+| GitHub              | ![GitHub theme preview](images/github_01.png)                           | ![GitHub theme preview](images/github_02.png)                           |
+| Graphite            | ![Graphite theme preview](images/graphite_01.png)                       | ![Graphite theme preview](images/graphite_02.png)                       |
+| Gruvbox             | ![Gruvbox theme preview](images/gruvbox_01.png)                         | ![Gruvbox theme preview](images/gruvbox_02.png)                         |
+| Monokai             | ![Monokai theme preview](images/monokai_01.png)                         | ![Monokai theme preview](images/monokai_02.png)                         |
+| Nord                | ![Nord theme preview](images/nord_01.png)                               | ![Nord theme preview](images/nord_02.png)                               |
+| One Dark Pro        | ![One Dark Pro theme preview](images/one-dark-pro_01.png)               | ![One Dark Pro theme preview](images/one-dark-pro_02.png)               |
+| Pomotroid (default) | ![Pomotroid theme preview](images/pomotroid_01.png)                     | ![Pomotroid theme preview](images/pomotroid_02.png)                     |
+| Popping and Locking | ![Popping and Locking theme preview](images/popping-and-locking_01.png) | ![Popping and Locking theme preview](images/popping-and-locking_02.png) |
+| Solarized Light     | ![Solarized Light theme preview](images/solarized-light_01.png)         | ![Solarized Light theme preview](images/solarized-light_02.png)         |
+| Spandex             | ![Spandex theme preview](images/spandex_01.png)                         | ![Spandex theme preview](images/spandex_02.png)                         |
+| Sythwave            | ![Sythwave theme preview](images/synthwave_01.png)                      | ![Sythwave theme preview](images/synthwave_02.png)                      |
+| Tokyo Night Storm   | ![Tokyo Night Storm theme preview](images/tokyo-night-storm_01.png)     | ![Tokyo Night Storm theme preview](images/tokyo-night-storm_02.png)     |
+
+## Creating a Custom Theme
+
+Creating custom themes is simple. Themes are defined by a `json` file containing a **theme name** and several color values. Use the [theme template file](./theme-template.json) as a starting point.
+
+```json
+{
+  "name": "Theme Name",
+  "colors": {
+    "--color-long-round": "",
+    "--color-short-round": "",
+    "--color-focus-round": "",
+    "--color-focus-round-middle": "",
+    "--color-focus-round-end": "",
+    "--color-background": "",
+    "--color-background-light": "",
+    "--color-background-lightest": "",
+    "--color-foreground": "",
+    "--color-foreground-darker": "",
+    "--color-foreground-darkest": "",
+    "--color-accent": ""
+  }
+}
+```
+
+`--color-focus-round-middle` and `--color-focus-round-end` are optional. You can use theme to customize the color of the gradiant during the focus round. If none are provided, a gradiant will be automatically computed from the `--color-focus-round` color to the `--color-short-round` color.
+
+To add your custom theme, copy your theme definition to the `pomodorolm/themes` directory in the `appData` directory. The location of the `appData` depends on the operating system.
+
+- `%APPDATA%` on **Windows**
+- `$XDG_CONFIG_HOME` or `~/.config` on **Linux**
+- `~/Library/Application Support` on **macOS**
+
+For example, add the theme file to the following directory on Windows: `C:\Users\{User}\AppData\Roaming\pomodorolm\themes`
+
+Restart the application to see your new theme available as an option.

elm.json

@@ -6,12 +6,14 @@
     "elm-version": "0.19.1",
     "dependencies": {
         "direct": {
+            "NoRedInk/elm-json-decode-pipeline": "1.0.1",
             "elm/browser": "1.0.2",
             "elm/core": "1.0.3",
             "elm/html": "1.0.0",
             "elm/json": "1.1.3",
             "elm/svg": "1.0.1",
-            "elm/time": "1.0.0"
+            "elm/time": "1.0.0",
+            "rtfeldman/elm-hex": "1.0.0"
         },
         "indirect": {
             "elm/url": "1.0.0",

index.html

@@ -1,5 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html
+  lang="en"
+  style="
+    --color-long-round: #0bbddb;
+    --color-short-round: #05ec8c;
+    --color-focus-round: #ff4e4d;
+    --color-background: #2f384b;
+    --color-background-light: #3d4457;
+    --color-background-lightest: #858c99;
+    --color-foreground: #f6f2eb;
+    --color-foreground-darker: #c0c9da;
+    --color-foreground-darkest: #dbe1ef;
+    --color-accent: #05ec8c;
+  "
+>
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

main.css

@@ -10,16 +10,6 @@
 }
 
 :root {
-  --color-long-round: #0bbddb;
-  --color-short-round: #05ec8c;
-  --color-focus-round: #ff4e4d;
-  --color-background: #2f384b;
-  --color-background-light: #3d4457;
-  --color-background-lightest: #858c99;
-  --color-foreground: #f6f2eb;
-  --color-foreground-darker: #c0c9da;
-  --color-foreground-darkest: #dbe1ef;
-  --color-accent: #05ec8c;
   font-size: 5vw;
 }
 
@@ -115,7 +105,7 @@ body {
 }
 
 .title {
-  color: var(--color-short-round);
+  color: var(--color-focus-round);
   font-size: 1rem;
   font-weight: 200;
   padding-top: 1vw;
@@ -529,6 +519,18 @@ input[type="range"]::-webkit-slider-thumb {
   height: 100%;
 }
 
+#theme .setting-wrapper {
+  align-items: center;
+  border-left: 3px solid;
+  border-radius: 0 4px 4px 0;
+  display: flex;
+  justify-content: space-between;
+  margin: 12px 0;
+  min-height: 48px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
 #drawer .container {
   max-height: calc(100% - 10vw);
   overflow-y: auto;

src-elm/ColorHelper.elm

@@ -0,0 +1,99 @@
+-- Initial code is courtesy of to https://package.elm-lang.org/packages/juliusl/elm-ui-hexcolor/latest/Element-HexColor
+
+
+module ColorHelper exposing (RGB(..), fromCSSHexToRGB, fromRGBToCSSHex)
+
+import Bitwise
+import Dict exposing (Dict)
+import Hex
+import List
+
+
+type RGB
+    = RGB Int Int Int
+
+
+toStringWithZeroPadding : Int -> String
+toStringWithZeroPadding num =
+    let
+        stringValue =
+            Hex.toString num
+    in
+    if String.length stringValue < 2 then
+        "0" ++ stringValue
+
+    else
+        stringValue
+
+
+fromCSSHexToRGB : String -> RGB
+fromCSSHexToRGB hexcode =
+    RGB (getRed hexcode) (getGreen hexcode) (getBlue hexcode)
+
+
+fromRGBToCSSHex : RGB -> String
+fromRGBToCSSHex (RGB r g b) =
+    "#" ++ toStringWithZeroPadding r ++ toStringWithZeroPadding g ++ toStringWithZeroPadding b
+
+
+getRed : String -> Int
+getRed hexcode =
+    fromList (List.take 2 (fromCSSString hexcode))
+
+
+getGreen : String -> Int
+getGreen hexcode =
+    fromList (List.take 2 (List.drop 2 (fromCSSString hexcode)))
+
+
+getBlue : String -> Int
+getBlue hexcode =
+    fromList (List.take 2 (List.drop 4 (fromCSSString hexcode)))
+
+
+fromCSSString : String -> List Char
+fromCSSString hexcode =
+    List.drop 1 (String.toList hexcode)
+
+
+fromList : List Char -> Int
+fromList chars =
+    List.sum (List.indexedMap (\i v -> Bitwise.shiftLeftBy (i * 4) v) (List.reverse (List.map fromChar chars)))
+
+
+fromChar : Char -> Int
+fromChar ch =
+    case Dict.get ch hexmap of
+        Just v ->
+            v
+
+        Nothing ->
+            0
+
+
+hexmap : Dict Char Int
+hexmap =
+    Dict.fromList
+        [ ( '0', 0 )
+        , ( '1', 1 )
+        , ( '2', 2 )
+        , ( '3', 3 )
+        , ( '4', 4 )
+        , ( '5', 5 )
+        , ( '6', 6 )
+        , ( '7', 7 )
+        , ( '8', 8 )
+        , ( '9', 9 )
+        , ( 'A', 10 )
+        , ( 'B', 11 )
+        , ( 'C', 12 )
+        , ( 'D', 13 )
+        , ( 'E', 14 )
+        , ( 'F', 15 )
+        , ( 'a', 10 )
+        , ( 'b', 11 )
+        , ( 'c', 12 )
+        , ( 'd', 13 )
+        , ( 'e', 14 )
+        , ( 'f', 15 )
+        ]