DNSCloak - An open-source DNSCrypt and DoH client for iOS by the Center for the Cultivation of Technology gemeinnuetzige GmbH.
- Nebulo - An open-source application for Android supporting DoH and DoT. It also supports caching DNS responses and locally logging DNS queries.
-
-
- Local DNS servers:
-
- - Namecoin - A decentralized DNS open-source information registration and transfer system based on the Bitcoin cryptocurrency.
- - Stubby - An open-source application for Linux, macOS, and Windows that acts as a local DNS Privacy stub resolver using DoT.
-
-
- Network wide DNS servers:
-
- - Pi-hole - A network-wide DNS server mainly for the Raspberry Pi. Blocks ads, tracking, and malicious domains for all devices on your network.
- - NoTrack - A network-wide DNS server like Pi-hole for blocking ads, tracking, and malicious domains.
-
-
- Further reading:
-
-
-
+
+Terms
+
+
+ - DNS-over-TLS (DoT) - A security protocol for encrypted DNS on a dedicated port 853. Some providers support port 443 which generally works everywhere while port 853 is often blocked by restrictive firewalls.
+ - DNS-over-HTTPS (DoH) - Similar to DoT, but uses HTTPS instead, being indistinguishable from "normal" HTTPS traffic on port 443.
+ - DNSCrypt - An older yet robust method of encrypting DNS.
+
+
+How to verify DNS is encrypted
+
+
+
+Worth Mentioning and Additional Information
+
+
+ - Encrypted DNS clients for desktop:
+
+ - Firefox comes with built-in DoH support with Cloudflare set as the default resolver, but can be configured to use any DoH resolver. Currently Mozilla is conducting studies before enabling DoH by default for all US-based Firefox users.
+
+ - DNS over HTTPS can be enabled in Menu -> Preferences (
about:preferences) -> Network Settings -> Enable DNS over HTTPS. Set "Use Provider" to "Custom", and enter your DoH provider's address.
+ - Advanced users may enable it in
about:config by setting network.trr.custom_uri and network.trr.uri as the address you find from the documentation of your DoH provider and network.trr.mode as 2. It may also be desirable to set network.security.esni.enabled to True in order to enable encrypted SNI and make sites supporting ESNI a bit more difficult to track.
+
+
+
+ - Encrypted DNS clients for mobile:
+
+ - Android 9 comes with a DoT client by default.
+ - DNSCloak - An open-source DNSCrypt and DoH client for iOS by
the Center for the Cultivation of Technology gemeinnuetzige GmbH.
+ - Nebulo - An open-source application for Android supporting DoH and DoT. It also supports caching DNS responses and locally logging DNS queries.
+
+
+ - Local DNS servers:
+
+ - Namecoin - A decentralized DNS open-source information registration and transfer system based on the Bitcoin cryptocurrency.
+ - Stubby - An open-source application for Linux, macOS, and Windows that acts as a local DNS Privacy stub resolver using DoT.
+
+
+ - Network wide DNS servers:
+
+ - Pi-hole - A network-wide DNS server mainly for the Raspberry Pi. Blocks ads, tracking, and malicious domains for all devices on your network.
+ - NoTrack - A network-wide DNS server like Pi-hole for blocking ads, tracking, and malicious domains.
+
+
+ - Further reading:
+
+
+
diff --git a/assets/css/dark.scss b/assets/css/dark.scss
new file mode 100644
index 00000000..d7133452
--- /dev/null
+++ b/assets/css/dark.scss
@@ -0,0 +1,174 @@
+---
+---
+$dark-400: #181b21;
+$dark-300: #22262e;
+$dark-200: #343a46;
+$dark-100: #464f60;
+$light: #d8d8d8;
+$primary: #345e8e;
+$danger: #b63f4a;
+$secondary: $dark-100;
+$success: #2c7f40;
+$warning: #c6a339;
+$info: #218899;
+
+
+/*
+ * HTML
+ */
+
+body {
+ background: $dark-400;
+ color: $light;
+}
+a {
+ color: lighten($primary, 25%);
+}
+a:hover {
+ color: lighten($primary, 10%);
+}
+img {
+ filter: saturate(80%);
+}
+
+
+/*
+ * Bootstrap
+ */
+
+.alert a {
+ color: #214D97;
+}
+
+.bg-secondary, .btn-secondary, .badge-secondary { background-color: $secondary !important; }
+.btn-secondary, .card-secondary .card-header { border-color: $secondary !important; }
+.text-secondary { color: $secondary !important; }
+.alert-secondary, .btn-secondary:hover {
+ color: $light;
+ background-color: darken($secondary, 10%);
+ border-color: darken($secondary, 10%);
+}
+
+.bg-primary, .btn-primary, .badge-primary { background-color: $primary !important; }
+.btn-primary, .card-primary .card-header { border-color: $primary !important; }
+.text-primary { color: $primary !important; }
+.alert-primary, .btn-primary:hover {
+ color: $light;
+ background-color: darken($primary, 10%);
+ border-color: darken($primary, 10%);
+}
+
+.bg-warning, .btn-warning, .badge-warning { background-color: $warning !important; }
+.btn-warning, .card-warning .card-header { border-color: $warning !important; }
+.text-warning { color: $warning !important; }
+.card-warning > .text-dark { color: $dark-400 !important; }
+.alert-warning, .btn-warning:hover {
+ color: $light;
+ background-color: darken($warning, 10%);
+ border-color: darken($warning, 10%);
+}
+
+.bg-info, .btn-info, .badge-info { background-color: $info !important; }
+.btn-info, .card-info .card-header { border-color: $info !important; }
+.text-info { color: $info !important; }
+.alert-info, .btn-info:hover {
+ color: $light;
+ background-color: darken($info, 10%);
+ border-color: darken($info, 10%);
+}
+
+.bg-success, .btn-success, .badge-success { background-color: $success !important; }
+.btn-success, .card-success .card-header { border-color: $success !important; }
+.text-success { color: $success !important; }
+.alert-success, .btn-success {
+ color: $light;
+ background-color: darken($success, 10%);
+ border-color: darken($success, 10%);
+}
+
+.bg-danger, .btn-danger, .badge-danger { background-color: $danger !important; }
+.btn-danger, .card-danger .card-header { border-color: $danger !important; }
+.text-danger { color: $danger !important; }
+.alert-danger, .btn-danger:hover {
+ color: $light;
+ background-color: darken($danger, 10%);
+ border-color: darken($danger, 10%);
+}
+
+.card {
+ box-shadow: none !important;
+}
+
+.dropdown-item:hover {
+ color: $light;
+ background-color: $dark-300;
+}
+
+.form-control,
+.form-control:focus {
+ color: $light;
+ background: $dark-300;
+ border-color: $dark-300;
+}
+
+.card,
+.jumbotron,
+.list-group-item {
+ background: $dark-300;
+}
+
+.blockquote {
+ border-color: $dark-300;
+}
+
+.bg-dark {
+ background-color: $dark-300 !important;
+}
+
+.dropdown-item {
+ color: $light;
+}
+
+.list-group-item {
+ border-color: $dark-200;
+}
+
+.text-dark {
+ color: $light !important;
+}
+
+table[data-sortable].sortable-theme-bootstrap {
+ color: $light;
+ background-color: $dark-300;
+}
+table[data-sortable].sortable-theme-bootstrap th,
+table[data-sortable].sortable-theme-bootstrap td {
+ border-color: $dark-100 !important;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
+ color: $light;
+ background: $dark-200;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]::after, {
+ border-bottom-color: $light;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="descending"]::after {
+ border-top-color: $light;
+}
+
+
+/*
+ * Other
+ */
+
+.nav-dropdown {
+ color: $light;
+ background-color: $dark-400;
+ border-color: $dark-300;
+}
+
+.nav-theme-icon:before {
+ color: $warning;
+ font-size: 1em;
+ content: "\f185";
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 0cd336a8..1591b926 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -177,6 +177,10 @@ h2, h3:not(.h5), h4, h5 {
text-align: justify;
}
+.no-text-wrap {
+ white-space: nowrap;
+}
+
footer {
img,
i {
@@ -184,6 +188,7 @@ footer {
}
}
+
/*
* Navbar
*/
@@ -272,8 +277,15 @@ input#nav-toggle,
display: none;
}
+#nav-switch-theme {
+ /* We will make it visible with JavaScript
+ * as it does not work without it */
+ display: none;
+}
-/* Mobile hamburger menu */
+/*
+ * Mobile hamburger menu
+ */
@media only screen and (max-width: 992px) {
.menu,
@@ -336,6 +348,13 @@ input#nav-toggle,
}
}
-.no-text-wrap {
- white-space: nowrap;
+.nav-theme-icon:before {
+ color: var(--warning);
+ font-size: 0.875em;
+ content: "\f186";
}
+
+.table td, .table th {
+ vertical-align: middle;
+}
+
diff --git a/assets/js/main.js b/assets/js/main.js
index f2925aad..9e04c387 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -27,6 +27,47 @@ function navSectionsClose(event) {
});
}
+
+// Dark/Light color scheme switch button
+document.querySelector("#nav-switch-theme").style.display = "inline"
+
+if (localStorage.getItem("colorScheme") === "dark") {
+ document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
+}
+else if (localStorage.getItem("colorScheme") === "light") {
+ document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
+}
+
+function changeColorScheme() {
+
+ // Use whatever users want
+ if (localStorage.getItem("colorScheme") === "dark") {
+ // Change to light theme
+ // by setting invalid media it will just not apply CSS for anyone
+ document.querySelector("#dark-css").setAttribute("media", "invalid");
+ localStorage.setItem("colorScheme", "light");
+ }
+ else if (localStorage.getItem("colorScheme") === "light") {
+ // Change to dark theme
+ // media was set to prefers-color-scheme: dark
+ document.querySelector("#dark-css").removeAttribute("media");
+ localStorage.setItem("colorScheme", "dark");;
+ }
+
+ // Just use whatever browsers want
+ else if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
+ // Change to light Theme
+ document.querySelector("#dark-css").setAttribute("media", "invalid");
+ localStorage.setItem("colorScheme", "light");
+ }
+ else {
+ // Change to dark theme
+ document.querySelector("#dark-css").removeAttribute("media");
+ localStorage.setItem("colorScheme", "dark");;
+ }
+}
+
+
// Matomo
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
| |