Dark theme for whole NomiAI website.
NomiAI Dark Theme by breat
Details
Authorbreat
LicenseNo License
Categorynomi.ai
Created
Updated
Size15 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
More previews here:
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-home.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-ios.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-new-nomi.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-new-nomi-customization.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-new-nomi-customization-2.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-nomi-details.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-nomi-profile.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-our-profile.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-photo-album.jpg
- https://raw.githubusercontent.com/breatfr/NomiAI-dark-theme/main/preview-photo-viewer.jpg
Changelog
- https://discord.com/channels/1099791840028405864/1138872233641652364 or
- https://www.reddit.com/r/NomiAI/comments/15n7rgr/a_dark_theme_make_by_me/
Some modifications other than the dark theme include in my theme:
-
on whole nomi site
- thin scrollbars
-
now in chat page:
- bigger text in chat bubbles
- fix some forgotten ui elements in the ui base to follow the nomi's based design
- remove the nomi logo on top left and remove some free space to enlarge the chat size to max without modify the size left side of the page
- remove borders under the logo already removed and between nomi's names if more than 1 nomi
- add heart background in chat
- modification of bubbles colors
- pics in chat are in row if more than 2 (depending of the screen size, so on mobile like me on last screenshot, 4 pics aren't in row on my iphone 12 mini)
- pics in chat, photo album and photo viewer zoom when they are hover
- for large screens (+1500px wide):
- new home page where you can see all your nomis after logged in
- new chat page design to get full size profile picture, sticky top bar
How to use in few steps on computer
- Install Stylus browser extension
- Chromium based browsers link: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
- Firefox based browsers link: https://addons.mozilla.org/firefox/addon/styl-us/
Chromium based browsers non-exhaustive list:
- Brave
- Chromium
- Google Chrome
- Iridium Browser
- Microsoft Edge
- Opera
- Opera GX
- SRWare Iron
- Ungoogled Chromium
- Vivaldi
- Yandex Browser
- many more
Firefox based browsers non-exhaustive list:
- Mozilla Firefox
- Mullvad Browser
- Tor Browser
- Waterfox
- many more
-
Go on NomiAI Dark Theme on UserStyles.world website and click on
Install
under the preview picture. -
To update the theme, open the
Stylus Management
window and click onCheck for update
and follow the instructions or just wait 24h to automatic update -
Enjoy :)
How to use in few steps on iOS (Safari)
-
Install Makeover - Custom CSS app
-
Open the app just installed and click on
How to Use
and follow instructions -
In Safari come on NomiAI Dark Theme on UserStyles.world or on my GitHub and select
ALL
the code to finally copy it -
In Safari go to NomiAI website and click on
plugin
icon to finally click onMakeover
-
Paste the previously copied code in the
Makerover's field
and remove the 1st line:
@-moz-document url-prefix("https://beta.nomi.ai/nomis/") {
if you don't delete this line, the style won't work.
for each update you'll need copy/paste the code and remove this line.
6. Enjoy :)
How to use in few steps on Android (Kiwi Browser)
-
Install Kiwi Browser
-
Come on NomiAI Dark Theme on UserStyles.world page and install the style like on computer
-
Go on NomiAI website and click on
3 dots
on top right of the browser and activate Dark mode -
To update the theme do like on computer.
-
Enjoy :)
Support me on:
Ko-fi
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name NomiAI Dark Theme
@version 20230827.00.09
@namespace userstyles.world/user/breat
@description Dark theme for whole NomiAI website.
@author breat
@license No License
==/UserStyle== */
@-moz-document domain("nomi.ai") {
/* === Credits ===
Created by BreatFR
Creatied on 2023/08/08
Changelog https://discord.com/channels/1099791840028405864/1138872233641652364
Changelog https://www.reddit.com/r/NomiAI/comments/15n7rgr/a_dark_theme_make_by_me/
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/+5ZLC2qntf6xmYmI0
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */
/* ========================================================================
Bigger chat font size
======================================================================= */
.css-2hr7pt,
.css-3td3fo,
.css-d56yar {
font-size: 20px;
}
/* ========================================================================
Remove logo at the top left corner
======================================================================= */
.css-zkgx86, /* Remove logo */
.css-e2xlbb.el09qsr0 > div:nth-of-type(1) /* Remove border under removed logo */{
display: none;
}
/* ========================================================================
Heart background
======================================================================= */
.css-1vi0cy8 {
background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100% !important;
border-radius: 0px 0px 20px 20px;
}
/* ========================================================================
Thin scrollbars for normally all browsers
======================================================================= */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 20px;
}
::-webkit-scrollbar-thumb {
background: pink;
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: white;
}
/* ========================================================================
Bigger image in picture viewer
======================================================================= */
.css-staxus {
height: 100% !important;
}
/* ========================================================================
Textarea customization
======================================================================= */
@keyframes gradient {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
textarea:not(:focus) {
animation: gradient 5s ease infinite;
animation-fill-mode: forwards !important;
background-image: linear-gradient(90deg, rgba(58,180,133,0.14066876750700286) 0%, rgba(89,98,140,0.16307773109243695) 21%, rgba(253,29,29,0.16307773109243695) 43%, rgba(218,41,141,0.16867997198879547) 65%, rgba(183,53,252,0.24711134453781514) 80%, rgba(252,176,69,0.3031337535014006) 100%);
background-size: 200% 200%;
color: #2f343d !important;
}
textarea:focus {
animation: gradient 5s ease infinite;
animation-fill-mode: forwards !important;
background-image: linear-gradient(90deg, rgba(58,180,133,0.14066876750700286) 0%, rgba(89,98,140,0.16307773109243695) 21%, rgba(253,29,29,0.16307773109243695) 43%, rgba(218,41,141,0.16867997198879547) 65%, rgba(183,53,252,0.24711134453781514) 80%, rgba(252,176,69,0.3031337535014006) 100%);
background-size: 200% 200%;
border-color: #9610FF !important;
color: var(--toastify-color-light) !important;
}
/* Fix texarea to always stay on screen */
.css-1ooloxp {
position: sticky !important;
}
/* Make textarea to grow to the top and not to the down and add rouned corners */
.css-d56yar {
border-radius: 20px;
min-height: 56px;
resize: vertical !important;
}
/* Hide the resizer of the textarea */
textarea::-webkit-resizer {
display: none;
}
/* ========================================================================
Height of menu
======================================================================= */
.css-udmu36 {
border-top: 0px !important;
min-height: 85px;
max-height: 85px;
padding: 0px !important;
}
/* Little bigger font-size in menu */
.css-1pqzh7c {
font-size: 14px;
}
/* ========================================================================
Nomi's names list in left side
======================================================================= */
/* Smaller names */
.css-5f4tlo {
line-height: 100%;
padding: 10px 0px;
}
/* Nomi's name and pictures link, infos link SVG are pink in left side of chat page */
.css-5f4tlo h4,
.css-5f4tlo svg path {
color: pink !important;
stroke: pink;
}
/* Remove borders between nomis list if more than 1 nomi */
.css-nzao1s.eawisc75 div {
border: 0px !important;
}
/* ========================================================================
Pictures are in row in chat
======================================================================= */
.css-1cwe3m3 {
display: grid;
gap: 8px;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
/* ========================================================================
Add rounded corners to pics in chat and photo album page
======================================================================= */
.e129scxq2,
.css-yb98gs {
border-radius: 20px !important;
}
/* ========================================================================
Replace the "Profile picture" overlay photo album page by a border
======================================================================= */
.css-yb98gs {
background: transparent !important;
border: 5px solid rgb(171, 64, 255);
}
.css-1gp3erv:hover {
transform: scale(1.9) !important;
transition: 0.2s linear !important;
z-index: 9999 !important;
}
.css-yb98gs p {
display: none;
}
/* ========================================================================
Image zoom on hover in picture viewer page
======================================================================= */
.css-1mh151z:hover {
display: block;
max-height: 93%;
transform: scale(1.25);
transition: 0.2s linear;
}
/* ========================================================================
Dark theme
======================================================================= */
/* Light color for all texts */
* {
color: var(--toastify-color-light) !important;
}
/* Dark background color on whole page */
body,
input,
select,
--toastify-spinner-color-empty-area,
ul.css-497xvz,
.css-18rjz9j,
.css-ea8az7,
.css-1j5d3ll,
.css-8oy3d3,
.css-1j19l95,
.css-mcumek,
.css-9i2gok,
.css-7fgif5,
.css-13esyrq,
.css-1n084m6,
.css-vtzx0o,
.css-1l1u68n,
.css-i616ue,
.css-1d7lv4w,
.react-datepicker__month-container,
.react-datepicker__header,
.css-1je5qdk,
.css-1ejta19,
.css-1n084m6,
.css-u5iji2,
.css-1oeraiw,
.css-1ooloxp {
background-color: rgb(9, 16, 29) !important;
}
/* Remove border on pop up for selfie request */
.css-wwpt19 {
border: 0px !important;
}
/* Nomi.ai color in menu */
.css-g6cz36 {
color: rgb(150, 16, 255) !important;
}
/* SVG are white */
svg path {
stroke: white;
}
.css-1u2l9gp svg path {
stroke: rgb(9, 16, 29);
}
/* Fix spinner */
.css-1iw9n18 svg path {
stroke: none;
}
/* Fix SVG menu */
.css-i3pbo svg path,
.css-vo6oh1 svg path,
/* Fix SVG customization */
.css-1v8aab4 svg path,
.css-1o5vjud svg path,
/* Fix SVG loading */
.css-1j0l6xk svg path {
stroke: rgb(150, 16, 255);
}
/* Fix camera button */
.css-1x4dmv7 svg path {
fill: rgb(150, 16, 255);
}
/* Make logout SVG and text red again */
.css-1rv67vh,
.css-1hmb4pn svg path,
/* Make delete image SVG red */
.css-l9wrht svg path {
color: #e74c3c !important;
fill: #e74c3c;
}
/* Delete account button */
.css-1yp80wt {
align-items: center;
background-color: rgb(247, 85, 85);
border: 2px solid rgb(247, 85, 85);
border-radius: 100px;
display: flex;
font-size: 16px;
font-weight: 600;
height: 58px;
letter-spacing: 0.2px;
line-height: 22px;
padding: 18px 32px;
}
/* Delete Nomi buttons */
button.css-8as6rk,
.css-a6rva7 button {
background-color: #e74c3c !important;
color: white !important;
}
/* Fix SVG on nomi details page when hover */
.css-bxdqnu:hover svg path {
fill: white;
}
/* Fix some buttons and bubbles to make them more visible */
.css-9i2gok,
.css-hsqzc1,
.css-1qvkgqq,
.css-bxdqnu:hover /* Fix nomi details page hover */ {
background-color: gray !important;
}
/* Blue background for the Welcome bubble */
.css-1y64612 > :last-child {
background: var(--toastify-color-info) !important;
}
/* Titles on new nomi page */
h5.css-124mhq6 {
background: transparent!important;
color: var(--toastify-color-light) !important;
}
/* Selfie notifications */
.Toastify__zoom-enter svg path,
.Toastify__zoom-error svg path,
.Toastify__toast-theme--light,
.Toastify__toast-body,
/* Fix bubble during selfie is taking to make her more visible */
.css-12kxn86,
.css-kkk4zb {
background: #616161 !important;
stroke: none;
}
/* Make "Send" button and "Delete Nomi Forever" visible again when disabled */
.css-8as6rk:disabled,
.css-12a128q:disabled,
.css-1x4dmv7:disabled svg path {
background-color: gray !important;
cursor: not-allowed !important;
fill: gray;
}
/* Date bubble */
.css-ygnlmt {
background-color: transparent !important;;
display: inline-block;
padding: 0 10px;
position: relative;
}
.css-ygnlmt::before,
.css-ygnlmt::after {
background-color: white;
content: "";
height: 2px;
position: absolute;
top: 20%;
width:100%;
}
.css-ygnlmt::before {
left: 0;
transform: translate(-100%);
}
.css-ygnlmt::after {
transform: translate(100%);
right: 0;
}
/* Make send button visible again when disa...