initial commit, add Publish, add minimal theme, add content

2024-03-24 20:24:51 +01:00
commit cd2f440141
1240 changed files with 194709 additions and 0 deletions
@@ -0,0 +1,144 @@
+---
+layout: post
+title: "Install Mailtrain on Uberspace 7"
+categories:
+  - Tutorials
+tags:
+  - English
+  - Self-Hosted Software
+
+last_modified_at: 2020-07-21
+excerpt_separator: <!-- more -->
+---
+
+This tutorial explains how to install [Mailtrain](https://mailtrain.org) on a [Uberspace 7](uberspace.de). [Mailtrain](https://mailtrain.org/) is a self-hosted open-source (released under the [GPL
+v3.0](https://github.com/Mailtrain-org/mailtrain/blob/master/LICENSE).) newsletter app built on top of [Nodemailer](https://nodemailer.com/). I am following the [manual installation guide](https://github.com/Mailtrain-org/mailtrain#quick-start---manual-install-any-os-that-supports-nodejs) from the official Mailtrain repo and add some additional Uberspace infos. I contributed [this guide](https://lab.uberspace.de/guide_mailtrain.html) to the [Uberlab](https://lab.uberspace.de/) and earned my first [Ubercup](https://github.com/Uberspace/lab/blob/master/CONTRIBUTING.md#reward).
+
+<!-- more -->
+
+## Installation
+
+This guide uses Node.js version 12, which is the [default](https://manual.uberspace.de/lang-nodejs.html#standard-version) on Uberspace 7 at at the moment.
+
+Clone the [GitHub](https://github.com/Mailtrain-org/mailtrain)
+repository:
+
+```console
+[isabell@stardust ~]$ git clone git://github.com/Mailtrain-org/mailtrain.git
+[isabell@stardust ~]$
+```
+
+Install the required dependencies:
+
+```console
+[isabell@stardust ~]$ cd mailtrain
+[isabell@stardust mailtrain]$ npm install --production
+[isabell@stardust mailtrain]$
+```
+
+## Configuration
+
+### Database Setup
+
+Create a new database:
+
+```console
+[isabell@stardust mailtrain]$ mysql -e "CREATE DATABASE ${USER}_mailtrain;"
+[isabell@stardust mailtrain]$
+```
+
+### Mailtrain Config
+
+Copy the example config file:
+
+```console
+[isabell@stardust mailtrain]$ cp config/default.toml config/production.toml
+[isabell@stardust mailtrain]$
+```
+
+Update `production.toml` with your MySQL settings; look for the
+`[mysql]` block:
+
+```console
+...
+
+[mysql]
+host="localhost"
+user="isabell"
+password="MySuperSecretPassword"
+database="isabell_mailtrain"
+
+...
+```
+
+### Web Backend Config
+
+[Mailtrain](https://mailtrain.org/) is running on port 3000. Configure the server to respond to port 3000 using web backends:
+
+``` console
+[isabell@stardust ~]$ uberspace web backend set / --http --port 3000
+[isabell@stardust ~]$
+```
+
+### Supervisord Daemon Setup
+
+Create `~/etc/services.d/mailtrain.ini` with the following content:
+
+```ini
+[program:mailtrain]
+directory=%(ENV_HOME)s/mailtrain/
+command=env NODE_ENV=production /bin/node index.js
+autostart=yes
+autorestart=yes
+```
+
+If it's not in state RUNNING, check your configuration.
+
+### Login and Change Admin Credentials
+
+{% include bootstrap/alert.html 
+  content="Change the default admin credentials to prevent unauthorized access of your data!"
+  style="danger"
+%}
+
+Your [Mailtrain](https://mailtrain.org/) installation should now be
+reachable on `https://isabell.uber.space`. Log in with the username
+`admin` and the password `test`.
+
+Go to `https://isabell.uber.space/users/account` and change your email
+address as well as your password.
+
+{% include bootstrap/alert.html 
+  content="It is not possible to change the username in the GUI. If you want to change the default username `admin` to something else or add additional users, you have to do it directly in the database."
+  style="info"
+%}
+
+## Finishing installation
+
+Go to `https://isabell.uber.space/settings`. In the **General Settings** section change the **Service Address (URL)**
+to `https://isabell.uber.space/`.
+
+In the **Mailer Settings** section change the
+
+> -   *Hostname*,
+> -   *Port*,
+> -   *Encryption*,
+> -   *username*,
+> -   *password*, and
+> -   test your settings by pressing the Button **Check Mailer Config**.
+
+{% include bootstrap/alert.html 
+  content="Uberspace does not allow mass mailings from their servers according to their House Rules. However, you can use Mailtrain as the admin interface for your mailing needs. Use the SMTP services from AWS SES, Sendgrid, Mailgun, etc. for the actual mailing."
+  style="warning"
+%}
+
+## Best Practices
+
+* Test the configuration by creating a new list and subscribing yourself
+to it.
+* Craft your campaign with love and dedication.
+* Don’t spam users that don’t want your newsletter.
+
+------------------------------------------------------------------------
+
+Tested on Uberspace v7.7.0 with NodeJS v12 and MariaDB 10.3.23.
@@ -0,0 +1,45 @@
+---
+layout: post
+title: "The Collection"
+categories:
+  - Tips
+tags:
+  - English
+  - Collection
+
+last_modified_at: 2020-08-28
+excerpt_separator: <!-- more -->
+---
+
+During my time on the Internet, I encountered many things. This post is a collection of the cool things. I will probably update it once in a while. Since I am living in Germany, some of the tips may not be useful for everyone. In order of coolness.
+
+ <!-- more -->
+
+## Web Services
+
+[Uberspace](https://uberspace.de) is a hosting provider. They offer a shared hosting experience that is a little bit more limited than a root server. However, their support is amazing and it's a super good place to host for tinkerers and small projects. Highly recommended. Check out my [Tutorials](/category/tutorials.html) or the [Uberlab for U7](https://lab.uberspace.de) for things you can do on your Uberspace!
+
+Things I am using on Uberspace:
+
+- [InvoicePlane](http://invoiceplane.com): Simple invoicing software. Offers sending offers and invoices via email, too!
+- [Matomao](https://matomo.org): Analytics software to avoid Google.
+- [Redmine](http://redmine.org): Amazing project management solution.
+- [Syncthing](http://syncthing.net): File synchronisation alternative.
+
+[Tecspace](https://tecspace.de) is a hosting provider and domain registrar. I buy and manage my domains through their service. It is extremely cheap, costing only 2,50 EUR per year, if you have 10 or more domains. I love their admin interface. It is simple, behaves like a website should behave (no JavaScript shenanigans) and is very powerful.
+
+[Pinboard](https://pinboard.in) is a bookmarking service. It's minimalistic, easy to use and offers an archiving service so you will never lose these good articles on the internet again.
+
+## Software
+
+### Pictures, Design, Illustrating
+
+[Affinity](https://affinity.serif.com/) produces [Affinity Designer](https://affinity.serif.com/en-gb/designer/) and [Affinity Photo](https://affinity.serif.com/en-gb/photo/). They are competitors to the popular Adobe Photoshop and Illustrator. These two programs are *exceptional*. You can do basically everything you can do with their Adobe counterparts, but they only cost 55 EUR each. No subscriptions, no recurring fees. The interface is polished and if you are an Adobe user you will be right at home. Quit Adobe today. Don't let them milk you.
+
+[Appollo One](https://www.apollooneapp.com/) is a really fast image viewer.
+
+### Random Apps
+
+[Sensei](https://sensei.app/) is a system monitoring app with a nice Mac compliant interface.
+
+[Mactracker](http://mactracker.ca/) is an app that lists all apple hardware and their specifications. No need to google for these things anymore.
@@ -0,0 +1,29 @@
+---
+layout: post
+title: "Strategies from the Happiness Lab"
+categories:
+  - Summaries
+tags:
+  - English
+  - Philosophy
+
+last_modified_at: 
+excerpt_separator: <!-- more -->
+---
+
+I love listening to podcasts while I am out running. The latest one I found is [The Happiness Lab](https://www.happinesslab.fm/) from and with Dr. Laurie Santos, a professor teaching at Yale. She looks at happiness scientifically and takes an active approach: [You have it in your own hands to improve your happiness](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000449594792). The podcast discusses various strategies with various scientists and experts from their respective field.
+
+This is a collection of these strategies you can employ; with the link to the corresponding episode for more information.
+
+<!-- more -->
+
+* [Meditate.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000469606673) You have probably heard about people recommending meditating a thousand times. Do it. Start with 1 minute every day. The research of the benefits seems to be overwhelming.
+* [Sleep enough.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000463759567) Trivial. Humans need sleep. Get. Some. Make it a ritual to go to bed. Make the bed a sanctuary. No screens, no distractions. If you are lying in bed, you sleep. If you can't sleep, leave the bed and try again later. You can combine the ritual with meditation (see above).
+* [Remove choice.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000455959891) Being in control of and having to decide everything is exhausting. Remove unnecessary choices from your life. Have a big wardrobe? Reduce it and go minimal. Or to quote President Obama who always wore a white shirt and cycled through his suits: "Do you know how many decision I have to make throughout the day? You think I also want to decide what to wear?"
+* [Coach yourself from the third person.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000468907282) The research suggests that you perform better and are happier, if you think about the challenges you are facing from a third person perspective. The key term is **distancing**. Distance yourself to get a clearer picture of what is going on. You can use personal distancing (use your name instead of "I"): "Felix knows what he is doing and has experience. Trust him." You can use temporal distancing: "Felix has faced this threat before and came out successful." You can use group distancing: "We are a strong society and can solve this challenge together."
+* [Connect with others. Even strangers.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000452731206) Modern life aims at removing all inconveniences. But it also removes social connections with other people. The example from the podcast is from the guy that invented the ATM. When there were still bank tellers, you had to wait in line -- where you might have to interact socially -- and had to interact with the teller. A person. Research suggests that happiness improves just by interacting with other people
+* [Frame your emotions.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000469255597) When encountering an emotion, you have 5 seconds to decide how to react to it. Use different frames depending on the situation. Examples for these frames:
+	* **The comedic frame** Try to tell a joke about the situation.
+	* **The future storytelling frame** Live your life in a way so that your story, told **truthfully**, makes you look like the person you strife to be. Which story sounds better to you? The story about a miserable and frustrated person that gave up on the slightest problem **or** the story about the person that strongly and cleverly encounters the challenges life throws at her and masters these challenges while smiling.
+	* **The stoic gods challenge frame** Use stoic, imaginary gods as a psychological device: Every setback you face in life is a test these gods have designed to test you and your character. And you want and can prove to them that you are up to the challenge. The harder the challenge is, the more trust the gods have in you.
+* [Practice negative visualization.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000469255597) Pause every once in a while during the day and think about what you could lose and how that would make you feel. Don't dwell on these thoughts. Just let them flicker for a second. This aims at increasing your appreciation for the people and things you have in your life.
@@ -0,0 +1,85 @@
+---
+layout: post
+title: "Ideas"
+categories:
+  - Personal
+tags:
+  - English
+  - Collection
+
+last_modified_at: 
+excerpt_separator: <!-- more -->
+---
+
+Many people have ideas. Ideas are not special. What makes and breaks an idea is its realization and/or implementation. Here are some of **my** product ideas. Implement them, if you like them! Then send me an [email](mailto:felixfoertsch@gmail.com) to show them to me, please. 😁
+
+<!-- more -->
+
+## Product Ideas
+
+**Flatpen:** Pens have a problem. They are round and stiff and that makes them harder to carry around. The idea: Create a pen that uses regular pen mines, but folds flat so it can be put inside of a notebook without making it wobble.
+
+**Process Visualization with Z-Layers:** Processes are an important part of business development and optimization. Their visualization is important for communicating them. Most process visualization software is clunky to use. Finding the right layer of abstractions with processes is hard by default -- software should make it easier. This has to be a combined solution: From the editor to the reader. The core idea is using Z-layer zooming to make it more intuitive (e.g. pinching in mobile and tablet apps).
+
+**Magic Handshake:** Create a system that supports favors. Being in the system opens you doors, because you know someone. Like an exclusive club.
+
+**10 Minute Mentor:** Finding is a mentor is difficult. Make it easier.
+
+**Sane Games:** Create a list of games that are *sane*: no IAP, no psycho abuse, etc.
+
+## Web App Ideas
+
+**Sign-up:** Create an event where people can sign up really easily. Like [Raid Helper](https://raid-helper.com/), but generalized.
+
+**WOOP:** PWA that implements the [GROW](https://en.wikipedia.org/wiki/GROW_model) or [WOOP](https://en.wikipedia.org/wiki/Gabriele_Oettingen) mental model.
+
+**Predefined Workflow Builder/Checklister/Show the Way:** Many task in modern life follow step-by-step processes. It is **really** inefficient that everybody has to learn them individually. It should be easy to download a pre-created checklist for a specific task and then succeed with just following this checklist. E.g. "How to do a product launch" --> Step 1: Do X. Step 2: Do Y., "How to learn JavaFX" --> etc. Specialised Version of this could be a "You should app". A collection of things everybody should do and/or have. Have a bank account, have insurance, etc.
+
+**GitHub Contributions for Everything:** GitHub Contributions are awesome. They give a quick and intuitive overview about progress. Create a way that allows tracking everything like this.
+
+**Applicant Oriented Applications:** Applications are awful for the applicant. They are at the mercy of organizations. They have to send in all their information and then they have to wait. And they have to do that multiple times. Use different interfaces, create different formats, and so on. It should be easier.
+
+**Make it very easy to donate to a good cause/org:** One click donations. It is not easy to set up donations in Germany. There is a lot of hassle involved with creating receipts etc. This should be super easy for the associated organizations and should allow integrated systems like PayPal and Stripe for payments.
+
+**Local Twitter:** It's not always easy to know what's happening around your. Make an app that makes it really easy to know what public events are happening right now around you. Concert? Demonstration? Check and know.
+
+**Gamekey Exchange:**
+Enable people that buy things like humble bundle to trade their unused keys with each other.
+
+## Computer and Phone App Ideas
+
+**On time:** Calendar integration that allows one click information to others, if you are on time or not.
+
+**Hierarchical Documentation:** Documentation of software is often flat, even though hierarchies are at the core of many projects. Tools should display hierarchies to make it easier to quickly grasp software libraries.
+
+**Moderator Toolbox:** Organizing groups is hard. Make using speech lists, protocols, etc. easy to do.
+
+**Cadence and Heartbeat Music:** Generate electronic music (e.g. with AI) and use the heartbeat sensor of the Apple Watch attach it to the cadence and/or heart rate of the person.
+
+**Vaccination Card:** There is a yellow book that helps track vaccinations. Make one that's on your phone.
+
+**Walk the City:** Exploring a city is awesome. Make an app that tracks all routes/streets you have already been to on the map to facilitate walking every road once.
+
+**Checkpoints:** Create a system that allows people with bad time management to tell an accurate prediction on when they'll get somewhere. Use map data and checkpoints to find out the time.
+
+**Color Clipboard:** Monitor clipboard and store Hex codes. Give a nice UI to create palettes, etc.
+
+**Kontakte:** Create a Tinder-like interface to clean-up contacts: Keep, delete, edit. Have a nice and easy way to add notes and tags. Potentially: Add whitelist/blocklist.
+
+**Business Plan Archive:** Like ideas business plans have way less value than people think. Put them in the public domain.
+
+**Track a Thing:** App that has a unified interface to track things **very** easily. Did a run: Track. How many days since you last called your mother: Track. Is your Doner bigger or smaller than average: Track.
+
+**Single Player Raider (Game):** A game where you do a 40-person raid, but you do it solo on your own terms.
+
+
+## Apps that already exist (or probably exists), but require better design, should not cost money or should be open source
+
+- **Tiddlywiki for Mac**
+- **Anki for Mac**
+- **Twitch for Mac:** mpv/IINA as player and chat on the bottom (native portrait mode)
+- **Ebook reader for Mac:** Books always adds the PDF/ePub to the library, which is not always required
+- **Reddit but with a limit:** Scrolling is unhealthy.
+- **Archiver for Mac:** Easy archiving of things. YouTube via youtube-dl, etc.
+- https://www.progressbarosx.com/
+- **Ambience:** Menu bar one-click music player for study/background music
@@ -0,0 +1,163 @@
+---
+layout: post
+title: "Apple Colors in SCSS"
+categories:
+  - Design
+tags:
+  - English
+
+last_modified_at: 
+excerpt_separator: <!-- more -->
+---
+
+Colors have a big impact on how software looks. Personally, I think macOS and iOS are beautiful and the colors are very well selected. Since I am not a designer, but I want to understand **why** these systems always looks so good, I started designing this website using the Apple colors. The first step I took was creating variables for the Apple colors from the [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) ([iOS](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/)/[macOS](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/)).
+
+I published them on GitHub as gists so you can use them, too. It's just the raw variables; but I could not find them anywhere else in this SCSS form. Gist [macOS-colors-dark.scss](https://gist.github.com/felixfoertsch/52904ab569521158dd8494024c0a5d77), [macOS-colors-light.scss](https://gist.github.com/felixfoertsch/36922ee9a74d9bd0c0887f62cecb7041), [iOS-colors-dark.scss](https://gist.github.com/felixfoertsch/69dd59c9e541788056ee6c70928c3769), [iOS-colors-light.scss](https://gist.github.com/felixfoertsch/e4c73a673bd769218c39c17ac09127aa).
+
+Read more for the actual variables.
+
+<!-- more -->
+
+```scss
+// macOS-colors-dark.scss
+$macOS-systemBlue-dark: rgba(10, 132, 255, 1);
+$macOS-systemBrown-dark: rgba(172, 142, 104, 1);
+$macOS-systemGray-dark: rgba(152, 152, 157, 1);
+$macOS-systemGreen-dark: rgba(50, 215, 75, 1);
+$macOS-systemIndigo-dark: rgba(94, 92, 230, 1);
+$macOS-systemOrange-dark: rgba(255, 159, 10, 1);
+$macOS-systemPink-dark: rgba(255, 55, 95, 1);
+$macOS-systemPurple-dark: rgba(191, 90, 242, 1);
+$macOS-systemRed-dark: rgba(255, 69, 58, 1);
+$macOS-systemTeal-dark: rgba(100, 210, 255, 1);
+$macOS-systemYellow-dark: rgba(255, 214, 10, 1);
+$macOS-alternateSelectedControl-dark: rgba(0, 88, 208, 1);
+$macOS-alternateSelectedControlText-dark: rgba(255, 255, 255, 1);
+$macOS-controlBackground-dark: rgba(30, 30, 30, 1);
+$macOS-controlText-dark: rgba(255, 255, 255, 0.8);
+$macOS-disabledControlText-dark: rgba(255, 255, 255, 0.2);
+$macOS-grid-dark: rgba(255, 255, 255, 0.1);
+$macOS-headerText-dark: rgba(255, 255, 255, 1);
+$macOS-highlight-dark: rgba(180, 180, 180, 1);
+$macOS-labelColor-dark: rgba(255, 255, 255, 0.8);
+$macOS-linkColor-dark: rgba(65, 156, 255, 1);
+$macOS-placeholderTextColor-dark: rgba(255, 255, 255, 0.2);
+$macOS-quaternaryLabelColor-dark: rgba(255, 255, 255, 0.1);
+$macOS-secondaryLabelColor-dark: rgba(255, 255, 255, 0.5);
+$macOS-selectedContentBackgroundColor-dark: rgba(0, 88, 208, 1);
+$macOS-selectedControlColor-dark: rgba(63, 99, 109, 1);
+$macOS-selectedControlTextColor-dark: rgba(255, 255, 255, 0.8);
+$macOS-selectedMenuItemTextColor-dark: rgba(255, 255, 255, 1);
+$macOS-selectedTextBackgroundColor-dark: rgba(63, 99, 139, 1);
+$macOS-selectedTextColor-dark: rgba(255, 255, 255, 1);
+$macOS-separatorColor-dark: rgba(255, 255, 255, 0.1);
+$macOS-shadowColor-dark: rgba(0, 0, 0, 0);
+$macOS-tertiaryLabelColor-dark: rgba(255, 255, 255, 0.2);
+$macOS-textBackgroundColor-dark: rgba(30, 30, 30, 1);
+$macOS-textColor-dark: rgba(255, 255, 255, 1);
+$macOS-underPageBackgroundColor-dark: rgba(40, 40, 40, 1);
+$macOS-unemphasizedSelectedContentBackgroundColor-dark: rgba(70, 70, 70, 1);
+$macOS-unemphasizedSelectedTextBackgroundColor-dark: rgba(70, 70, 70, 1);
+$macOS-unemphasizedSelectedTextColor-dark: rgba(255, 255, 255, 1);
+$macOS-windowBackgroundColor-dark: rgba(50, 50, 50, 1);
+$macOS-windowFrameTextColor-dark: rgba(255, 255, 255, 0.8);
+```
+
+```scss
+// macOS-colors-light.scss
+$macOS-systemBlue: rgba(0, 122, 255, 1);
+$macOS-systemBrown: rgba(162, 132, 94, 1);
+$macOS-systemGray: rgba(142, 142, 147, 1);
+$macOS-systemGreen: rgba(40, 205, 65, 1);
+$macOS-systemIndigo: rgba(88, 86, 214, 1);
+$macOS-systemOrange: rgba(255, 149, 0, 1);
+$macOS-systemPink: rgba(255, 45, 85, 1);
+$macOS-systemPurple: rgba(175, 82, 222, 1);
+$macOS-systemRed: rgba(255, 59, 48, 1);
+$macOS-systemTeal: rgba(90, 200, 250, 1);
+$macOS-systemYellow: rgba(255, 204, 0, 1);
+$macOS-alternateSelectedControl: rgba(0, 99, 255, 1);
+$macOS-alternateSelectedControlText: rgba(255, 255, 255, 1);
+$macOS-controlBackground: rgba(255, 255, 255, 1);
+$macOS-controlText: rgba(0, 0, 0, 0.8);
+$macOS-disabledControlText: rgba(0, 0, 0, 0.2);
+$macOS-grid: rgba(204, 204, 204, 1);
+$macOS-headerText: rgba(0, 0, 0, 0.8);
+$macOS-highlight: rgba(255, 255, 255, 1);
+$macOS-labelColor: rgba(0, 0, 0, 0.8);
+$macOS-linkColor: rgba(0, 104, 218, 1);
+$macOS-placeholderTextColor: rgba(0, 0, 0, 0.2);
+$macOS-quaternaryLabelColor: rgba(0, 0, 0, 0.1);
+$macOS-secondaryLabelColor: rgba(0, 0 ,0, 0.5);
+$macOS-selectedContentBackgroundColor: rgba(0, 99, 225, 1);
+$macOS-selectedControlColor: rgba(179, 215, 255, 1);
+$macOS-selectedControlTextColor: rgba(0, 0, 0, 0.8);
+$macOS-selectedMenuItemTextColor: rgba(255, 255, 255, 1);
+$macOS-selectedTextBackgroundColor: rgba(179, 215, 255, 1);
+$macOS-selectedTextColor: rgba(0, 0, 0, 1);
+$macOS-separatorColor: rgba(0, 0, 0, 0.1);
+$macOS-shadowColor: rgba(0, 0, 0, 1);
+$macOS-tertiaryLabelColor: rgba(0, 0, 0, 0.2);
+$macOS-textBackgroundColor: rgba(255, 255, 255, 1);
+$macOS-textColor: rgba(0, 0, 0, 1);
+$macOS-underPageBackgroundColor: rgba(150, 150, 150, 0.9);
+$macOS-unemphasizedSelectedContentBackgroundColor: rgba(220, 220, 220, 1);
+$macOS-unemphasizedSelectedTextBackgroundColor: rgba(220, 220, 220, 1);
+$macOS-unemphasizedSelectedTextColor: rgba(0, 0, 0, 1);
+$macOS-windowBackgroundColor: rgba(236, 236, 236, 1);
+$macOS-windowFrameTextColor: rgba(0, 0, 0, 0.8);
+```
+
+```scss
+// iOS-colors-dark.scss
+$iOS-systemBlue-dark: rgba(10, 132, 255, 1);
+$iOS-systemGreen-dark: rgba(48, 209, 88, 1);
+$iOS-systemIndigo-dark: rgba(94, 92, 230, 1);
+$iOS-systemOrange-dark: rgba(255, 159, 10, 1);
+$iOS-systemPink-dark: rgba(255, 55, 95, 1);
+$iOS-systemPurple-dark: rgba(191, 90, 242, 1);
+$iOS-systemRed-dark: rgba(255, 69, 58, 1);
+$iOS-systemTeal-dark: rgba(100, 210, 255, 1);
+$iOS-systemYellow-dark: rgba(255, 214, 10, 1);
+$iOS-systemGray-dark: rgba(142, 142, 147, 1);
+$iOS-systemGray2-dark: rgba(99, 99, 102, 1);
+$iOS-systemGray3-dark: rgba(72, 72, 74, 1);
+$iOS-systemGray4-dark: rgba(58, 58, 60, 1);
+$iOS-systemGray5-dark: rgba(44, 44, 46, 1);
+$iOS-systemGray6-dark: rgba(28, 28, 30, 1);
+$iOS-label-dark: rgba(255, 255, 255, 1);
+$iOS-secondaryLabel-dark: rgba(235, 235, 245, 0.6);
+$iOS-tertiaryLabel-dark: rgba(235, 235, 245, 0.3);
+$iOS-quaternaryLabel-dark: rgba(235, 235, 245, 0.2);
+$iOS-placeholderText-dark: rgba(235, 235, 245, 0.3);
+$iOS-separator-dark: rgba(84, 84, 88, 0.3);
+$iOS-opaqueSeparator-dark: rgba(56, 56, 58, 1);
+$iOS-link-dark: rgba(9, 132, 255, 1);
+```
+
+```scss
+// iOS-colors-light.scss
+$iOS-systemBlue: rgba(0, 122, 255, 1);
+$iOS-systemGreen: rgba(52, 199, 89, 1);
+$iOS-systemIndigo: rgba(88, 86, 214, 1);
+$iOS-systemOrange: rgba(255, 149, 0, 1);
+$iOS-systemPink: rgba(255, 45, 85, 1);
+$iOS-systemPurple: rgba(175, 82, 222, 1);
+$iOS-systemRed: rgba(255, 59, 48, 1);
+$iOS-systemTeal: rgba(90, 200, 250, 1);
+$iOS-systemYellow: rgba(255, 204, 0, 1);
+$iOS-systemGray: rgba(142, 142, 147, 1);
+$iOS-systemGray2: rgba(174, 174, 178, 1);
+$iOS-systemGray3: rgba(199, 199, 204, 1);
+$iOS-systemGray4: rgba(209, 209, 214, 1);
+$iOS-systemGray5: rgba(229, 229, 234, 1);
+$iOS-systemGray6: rgba(242, 242, 247, 1);
+$iOS-label: rgba(0, 0, 0, 1);
+$iOS-secondaryLabel: rgba(60, 60, 67, 0.6);
+$iOS-tertiaryLabel: rgba(60, 60, 67, 0.3);
+$iOS-quaternaryLabel: rgba(60, 60, 67, 0.2);
+$iOS-placeholderText: rgba(60, 60, 67, 0.3);
+$iOS-separator: rgba(60, 60, 67, 0.3);
+$iOS-opaqueSeparator: rgba(198, 198, 200, 1);
+$iOS-link: rgba(0, 122, 255, 1);
+```