Obsidian Signal geliştiren: Teito

Obsidian Signal

A deep-black Firefox theme built around Signal Orange (#FF6800), with orange toolbar icons, restrained charcoal surfaces, and high-contrast text.

Optional Nova Styling

Firefox's Nova interface uses additional internal colours that normal Firefox themes cannot override.

The optional CSS below extends Obsidian Signal's styling to Firefox Settings, internal pages, and the sidebar customisation interface.

Installation

1. Open about:config
2. Set toolkit.legacyUserProfileCustomizations.stylesheets to true
3. Open about:profiles
4. Open the Root Directory for your active profile
5. Create a folder named chrome
6. Create userContent.css and userChrome.css inside it
7. Paste the relevant code below into each file
8. Restart Firefox

userContent.css

/* =========================================================
OBSIDIAN SIGNAL — FIREFOX NOVA
userContent.css
Primary accent: #FF6800
========================================================= */

@-moz-document url-prefix("about:") {

:root {
/* Core palette */
--bo-orange: #ff6800;
--bo-orange-hover: #ff7a1a;
--bo-orange-active: #d95700;

--bo-canvas: #0a0a0a;
--bo-sidebar: #101010;
--bo-surface: #181818;
--bo-surface-hover: #202020;
--bo-surface-active: #282828;

--bo-border: #303030;
--bo-border-light: #444444;

--bo-text: #f2f2f2;
--bo-text-strong: #ffffff;
--bo-text-muted: #b8b8b8;

/* Firefox design tokens */
--color-accent-primary: var(--bo-orange) !important;
--color-accent-primary-hover: var(--bo-orange-hover) !important;
--color-accent-primary-active: var(--bo-orange-active) !important;
--color-accent-primary-selected: var(--bo-orange) !important;

--color-accent-attention: var(--bo-orange) !important;

--focus-outline-color: var(--bo-orange) !important;

--text-color: var(--bo-text) !important;
--text-color-accent-primary-selected: #000000 !important;

--background-color-canvas: var(--bo-canvas) !important;
--background-color-box: var(--bo-surface) !important;
--background-color-box-info: var(--bo-surface-hover) !important;

--panel-background-color: var(--bo-surface) !important;
--panel-text-color: var(--bo-text) !important;

--border-color: var(--bo-border-light) !important;
--border-color-deemphasized: var(--bo-border) !important;
--border-color-interactive: var(--bo-border-light) !important;
--border-color-interactive-hover: var(--bo-orange) !important;
--border-color-interactive-active: var(--bo-orange-active) !important;

--panel-border-color: var(--bo-border) !important;
--popup-border-color: var(--bo-border) !important;
--sidebar-border-color: var(--bo-border) !important;

/* Buttons */
--button-background-color: #181818 !important;
--button-background-color-hover: #282828 !important;
--button-background-color-active: #303030 !important;

--button-background-color-ghost: transparent !important;
--button-background-color-ghost-hover: #202020 !important;
--button-background-color-ghost-active: #303030 !important;
--button-background-color-ghost-selected: #303030 !important;

--button-background-color-muted: #181818 !important;
--button-background-color-muted-hover: #282828 !important;
--button-background-color-muted-active: #303030 !important;

--button-border-color: var(--bo-border) !important;
--button-border-color-hover: var(--bo-orange) !important;
--button-border-color-active: var(--bo-orange-active) !important;

--button-text-color: var(--bo-text) !important;
--button-text-color-primary: #000000 !important;

/* Inputs */
--input-text-background-color: #181818 !important;
--input-text-color: var(--bo-text) !important;

accent-color: var(--bo-orange) !important;

/* Nova purple/violet remap */
--color-purple-0: #fff3ea !important;
--color-purple-10: #ffd9c2 !important;
--color-purple-20: #ffba8a !important;
--color-purple-30: #ff9952 !important;
--color-purple-40: #ff7a1a !important;
--color-purple-50: #ff6800 !important;
--color-purple-60: #d95700 !important;
--color-purple-70: #a84400 !important;
--color-purple-80: #202020 !important;
--color-purple-90: #101010 !important;

--color-violet-0: #fff3ea !important;
--color-violet-10: #ffd9c2 !important;
--color-violet-20: #ffba8a !important;
--color-violet-30: #ff9952 !important;
--color-violet-40: #ff7a1a !important;
--color-violet-50: #ff6800 !important;
--color-violet-60: #d95700 !important;
--color-violet-70: #a84400 !important;
--color-violet-80: #202020 !important;
--color-violet-90: #101010 !important;
}

input,
select,
textarea,
button {
accent-color: var(--bo-orange) !important;
}

input:checked,
option:checked {
accent-color: var(--bo-orange) !important;
}

::selection {
background-color: var(--bo-orange) !important;
color: #000000 !important;
}
}


/* =========================================================
ABOUT:PREFERENCES — NOVA SETTINGS
========================================================= */

@-moz-document url-prefix("about:preferences") {

html,
body,
#preferences-root {
background-color: #0a0a0a !important;
color: #f2f2f2 !important;
}

/* Settings sidebar */
#categories,
.navigation,
.navigation-container,
.sidebar,
.sidebar-container {
background-color: #101010 !important;
color: #f2f2f2 !important;
}

#categories > .category {
background-color: transparent !important;
color: #b8b8b8 !important;
}

#categories > .category:hover {
background-color: #202020 !important;
color: #ffffff !important;
}

#categories > .category[selected],
#categories > .category.selected {
background-color: #ff6800 !important;
color: #000000 !important;
}

#categories > .category[selected] .category-icon,
#categories > .category.selected .category-icon {
fill: #000000 !important;
color: #000000 !important;
}

#categories > .category:hover .category-icon {
fill: #ff6800 !important;
color: #ff6800 !important;
}

/* Settings rows/cards */
.setting-group,
.settings-group,
.card,
moz-card {
--background-color-box: #181818 !important;
}

.clickable:hover,
.interactive:hover,
[role="option"]:hover,
[role="menuitem"]:hover {
background-color: #202020 !important;
}

[role="option"][aria-selected="true"],
[role="menuitem"][aria-selected="true"] {
background-color: #ff6800 !important;
color: #000000 !important;
}

/* Links */
a,
.text-link {
color: #ff6800 !important;
}

a:hover,
.text-link:hover {
color: #ff7a1a !important;
}

a:active,
.text-link:active {
color: #d95700 !important;
}

/* Checkboxes / radios */
input[type="checkbox"],
input[type="radio"] {
accent-color: #ff6800 !important;
}

/* Focus states */
input:focus,
select:focus,
textarea:focus {
border-color: #ff6800 !important;
outline-color: #ff6800 !important;
}

/* Sticky/navigation backgrounds */
.sticky-container,
.sticky-inner-container {
background-color: #0a0a0a !important;
}
}


userChrome.css

/* =========================================================
OBSIDIAN SIGNAL — FIREFOX NOVA
userChrome.css
Sidebar Customisation Panel
Primary accent: #FF6800
========================================================= */

@-moz-document url("chrome://browser/content/sidebar/sidebar-customize.html") {

:root,
sidebar-customize {
/* Core accent */
--color-accent-primary: #ff6800 !important;
--color-accent-primary-hover: #ff7a1a !important;
--color-accent-primary-active: #d95700 !important;
--color-accent-primary-selected: #ff6800 !important;

/* Focus */
--focus-outline-color: #ff6800 !important;

/* Links */
--link-color: #ff6800 !important;
--link-color-hover: #ff7a1a !important;
--link-color-active: #d95700 !important;

/* Sidebar */
--sidebar-text-color: #f2f2f2 !important;
--sidebar-box-color: #f2f2f2 !important;

/* Separators */
--panel-separator-color: #303030 !important;

/* Native form accent fallback */
accent-color: #ff6800 !important;
}

/* Checkboxes */
moz-checkbox {
--color-accent-primary: #ff6800 !important;
--color-accent-primary-hover: #ff7a1a !important;
--color-accent-primary-active: #d95700 !important;

accent-color: #ff6800 !important;
}

/* Links */
a {
color: #ff6800 !important;
}

a:hover {
color: #ff7a1a !important;
}

a:active {
color: #d95700 !important;
}
}